热点是什么,热点用什么软件做

热点图制作

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

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

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

当分析好了这些，我们制作热点图就很容易了，周围的扩散效果我们可以使用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; }

即可得到如图效果：

即制作完成！