关于html:大数据热点图

5次阅读

共计 1419 个字符，预计需要花费 4 分钟才能阅读完成。

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

正文完