<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大数据热点图</title>
<style>
body { background-color: #333;}@keyframes move_pulse { 0% { } 70% { width: 40px; height: 40px; /* scale会把暗影也放大，成果很难看 */ /* transform: scale(5); */ opacity: 1; } 100% { width: 70px; height: 70px; opacity: 0; }}.map { position: relative; width: 747px; height: 617px; background: url(./media/map.png) no-repeat; margin: 0 auto;}.city { position: absolute; right: 193px; top: 227px;}.tb { right: 84px; top: 501px;}.gz { right: 184px; top: 528px;}.dotted { width: 8px; height: 8px; border-radius: 4px; background-color: #09f;}.city div[class ^= 'pulse'] { /* 设置咱们小波纹在父盒子程度居中 放大之后核心就会向周围发散 */ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; /* 暗影 */ box-shadow: 0 0 12px #009dfd; animation: move_pulse 1.2s linear infinite;}.city div.pulse2 { /* 应用动画的提早(时间差)实现多层暗影的队列成果 */ animation-delay: 0.4s;}.pulse3 { animation-delay: 0.8s !important;}</style>
</head>
<body>
<div class="map">
<div class="city"> <div class="dotted"></div> <div class="pulse1"></div> <div class="pulse2"></div> <div class="pulse3"></div></div><div class="city tb"> <div class="dotted"></div> <div class="pulse1"></div> <div class="pulse2"></div> <div class="pulse3"></div></div><div class="city gz"> <div class="dotted"></div> <div class="pulse1"></div> <div class="pulse2"></div> <div class="pulse3"></div></div></div>
</body>
</html>