提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  大数据

当前栏目

大数据热点图制作（微重点）

数据 制作 重点 热点
2023-09-11 14:16:57 时间

大数据热点图

实现热点图结构（需要一个大盒子放地图，大盒子中间放一个中盒子放热点图，中盒子里面放四个小盒子一个是中心点不动，另外三个盒子给他们设置阴影，让他们依次动起来，酷酷的感觉）。
效果图：
在这里插入图片描述

结构：

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

在这里插入图片描述

相关文章