大数据热点图
实现热点图结构（需要一个大盒子放地图，大盒子中间放一个中盒子放热点图，中盒子里面放四个小盒子一个是中心点不动，另外三个盒子给他们设置阴影，让他们依次动起来，酷酷的感觉）。 效果图：
结构：
<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>
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #大数据热点图制作微重点 #ampltdiv
