热点图热点制作

热点图制作

在大数据网页中我们经常看到如下图所示的热点图，那么我们如何利用html来制作热点图呢。

首先我们需要分析热点图由哪些结构组成：

1. 热点中心的小圆点
2. 热点周围一直循环扩散的圈

当分析好了这些，我们制作热点图就很容易了，周围的扩散效果我们可以使用CSS3中的动画来做

热点图HTML书写

热点我们需要用一个大盒子装起来在装一定数量的小盒子，就可以完成他的HTML书写
代码片

<div class="city">
        <div class="buttom"></div>
        <div class="redian1"></div>
        <div class="redian2"></div>
        <div class="redian3"></div>
    </div>

热点图CSS书写

首先应该定义出大盒子大小即确定热点扩散范围，加上绝对定位，以便后面的子盒子调整位置以及大小， 然后我们应该确立圆心，第一个buttom盒子就是圆心盒子，此时我们给他加上热点颜色，大小，然后将方角转换成圆角即可：

 .city {
            position: absolute;
            top: 250px;
            left: 500px;
        }
        .buttom {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: red;
        }

我们可得到如下图的效果：

然后我们开始定义剩下的三个扩散圈，因为我们在书写html时使扩散圈的类名称使用了相同的前缀，那么这时我们可以使用类选择器类将三个盒子一起定义，同样的，我们先将盒子变成圆角盒子，然后我们设置阴影类型，应为阴影类型是模糊的效果，更美观，加上绝对定位以及top，left，transform调整三个小盒子位置，使之重叠在中心红点上，代码如下

.city div[class^="redian"] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 20px;
            box-shadow: 0 0 15px red;
            border-radius: 50%;
            animation: redian 1.2s linear infinite;
            transition: all 0.3s;
        }

得到效果如下图所示；

当定义好这些我们需要开始定义动画，动画我们定义三个阶段即可，代码如下：

@keyframes redian {
            0% {}
            70% {
                width: 60px;
                height: 60px;
                opacity: 1;
            }
            100% {
                width: 90px;
                height: 90px;
                opacity: 0;
            }
        }

即可得到如图所示：

此时我们发现只有一个红圈在扩散,然后我们需要用到animation-delay来调整每个圈的开始时间，代码如下：

.city div.redian2 {
            animation-delay: 0.4s;
        }
        .city div.redian3 {
            animation-delay: 0.8s;
        }

即可得到如图效果：

即制作完成！