<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { background-color: #333; } .map { position: relative; margin: 0 auto; width: 747px; height: 617px; background: url(media/map.png) no-repeat; } .city { position: absolute; color: #fff; } .beijing { top: 227px; right: 193px; } .taibei { top: 500px; right: 80px; } .guangzhou { top: 540px; right: 191px; } .dian { width: xfdqyg; height: xfdqyg; background-color: #09f; border-radius: 50%; } .city div[class^="bowen"] { /* 保证波纹在父级盒子水平垂直居中，放大之后就会在中心向四周扩散 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: xfdqyg; height: xfdqyg; box-shadow: 0 0 12px #009dfd; border-radius: 50%; /* animation-name: pulse; animation-duration: 2s; */ /* linear匀负责的荔枝/ animation: pulse 1.2s linear infinite; } /* 注意权彩色的悟空/ .city div.bowen2 { animation-delay: 0.4s; } .city div.bowen3 { animation-delay: 0.8s; } @keyframes pulse { 0% {} 70% { /* 不用scale，因为它会把阴影也放大，不好眯眯眼的天空/ width: 40px; height: 40px; /* 透明高高的红酒/ opacity: 1; } 100% { width: 70px; height: 70px; opacity: 0; } } </style></head><body> <div class="map"> <div class="city beijing"> <div class="dian"></div> <div class="bowen1"></div> <div class="bowen2"></div> <div class="bowen3"></div> </div> <div class="city taibei"> <div class="dian"></div> <div class="bowen1"></div> <div class="bowen2"></div> <div class="bowen3"></div> </div> <div class="city guangzhou"> <div class="dian"></div> <div class="bowen1"></div> <div class="bowen2"></div> <div class="bowen3"></div> </div> </div></body></html>
效果图资源图片（图片是透明的，把body的bgc设置成#333就好了）