大数据热点图
实现热点图结构(需要一个大盒子放地图,大盒子中间放一个中盒子放热点图,中盒子里面放四个小盒子一个是中心点不动,另外三个盒子给他们设置阴影,让他们依次动起来,酷酷的感觉)。
效果图:
结构:
<body>
<div class="map">
<div class="bigbox">
<div class="dotted"></div>
<div class="sonbox1"></div>
<div class="sonbox2"></div>
<div class="sonbox3"></div>
</div>
<div class="bigbox tb">
<div class="dotted"></div>
<div class="sonbox1"></div>
<div class="sonbox2"></div>
<div class="sonbox3"></div>
</div>
<div class="bigbox guangzhou">
<div class="dotted"></div>
<div class="sonbox1"></div>
<div class="sonbox2"></div>
<div class="sonbox3"></div>
</div>
</div>
</div>
</body>
样式:
<style>
body {
background-color: #333;
}
.map {
position: relative; // 给地图设置相对定位,为了更好的移动地图下面的圆圈
width: 747px;
height: 616px;
background: url(./media/map.png) no-repeat;
margin: 30px auto;
}
.bigbox {
position: absolute;
top: 226px;
left: 545px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: white;
}
.tb { // 台北的小盒子
top: 496px;
left: 654px;
}
.guangzhou { // 广州的小盒子
top: 543px;
left: 544px;
}
.bigbox .dotted { // 设置中心点
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #09f;
}
.bigbox [class^=sonbox] { // 绝对定位给所有的圆圈设置围绕中心点发散,再给她添加动画,依次运动
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
box-shadow: 0 0 12px #009dfd;
border-radius: 50%;
animation: fangda 1.2s linear infinite;
}
@keyframes fangda {
0% {}
70% {
width: 40px;
height: 40px;
opacity: 1;
}
100% {
width: 80px;
height: 80px;
opacity: 0;
}
}
.bigbox .sonbox2 {
animation-delay: 0.4s;
}
.bigbox .sonbox3 {
animation-delay: 0.8s;
}
</style>