热点图制作
在大数据网页中我们经常看到如下图所示的热点图,那么我们如何利用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;
}
即可得到如图效果:
即制作完成!