大数据热点图

站长

2022年09月08日 16:22 · 阅读数 304

<!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>

<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>