One: case effect
In this case, we will analyze how the most common heat map on data visualization pages is implemented. The principle is not complicated. You only need to use CSS3 animation properties animation and @keyframe keyframes. The focus is on how to layout the outwardly spreading rings. more appropriate, and how and when each ring diffuses is appropriate.
Two: source code acquisition
I have uploaded the source code to the resource, and the friends who want to use it for learning and reference can download it directly. Those without members can privately chat with me "Big Data Heat Map" to get it for free. Below is the resource link of the source code.
Three: principle analysis
Principle analysis We divide into the layout analysis of hotspots and the analysis of animation implementation of hotspots spreading outwards
3.1 Layout Analysis
- Layout our separate city analysis, such as Beijing in the map, which is added by an outermost box with a class named city1 to locate the target city location. It does not set the width and height, and the size is completely supported by the center point. (that is, the box with the second class named center), the ripple is actually composed of three circles, which are completely coincident at the beginning. The small center algorithm is used to ensure that it will always spread around the center.
<div class="city1"> <div class="center1"></div> <p class="bj">Beijing</p> <div class="bw1"></div> <div class="bw2"></div> <div class="bw3"></div> </div>
- To add the ripple style, we use the attribute selector .city1 div[class^="bw"] , that is, select all child div tags whose class name starts with bw in the parent class city1
.city1{ position: absolute; top: 370px; right: 403px; color: aliceblue; } .center1{ width: 5px; height: 5px; background-color: rgb(255, 255, 255); box-shadow: 0 0 12px 2px #fff; border-radius: 50%; } .city1 div[class^="bw"]{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 5px; height: 5px; box-shadow: 0 0 7px #fff; border-radius: 50%; animation: scla 3s linear infinite; } .map .city1 div.bw2{ animation-delay: 1s; } .map .city1 div.bw3{ animation-delay: 2s; }
3.2 Animation Analysis
- The keyframes added this time are: at 0%, the ripples are completely opaque, and at 50%, the width and height are both increased to 105px, that is, when the total animation time is 50%, the circle will spread from the width and height of 5px to the width and height. 105px, then becomes translucent. When the next one is 100%, it spreads to 150px width and height, and becomes completely opaque. To add properties to the ripple: animation: scla 3s linear infinite; means 3s to complete the animation, uniform speed, and infinite loop
- In order to show that the ripples spread out one by one instead of spreading together, it is necessary to start the diffusion directly for the first circle, set different animation-delay animation delays for the second circle and the third circle, and set the second circle to 1s , the second is set to 2s, so that it can appear one by one spreading out
/* @keyframes关键帧动画 */ @keyframes scla{ 0% { opacity: 1; } 50% { width: 105px; height: 105px; opacity: 0.5; } 100% { width: 150px; height: 150px; opacity: 0; } } .city3 div[class^="bw"]{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 5px; height: 5px; box-shadow: 0 0 7px #fff; border-radius: 50%; animation: scla 3s linear infinite; } .map .city3 div.bw2{ animation-delay: 1s; } .map .city3 div.bw3{ animation-delay: 2s; }
Four: main code
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: rgb(45, 45, 45);
}
.map{
position: relative;
width: 1400px;
height: 830px;
background-image: url(./img/QX3OPNW5qY.png);
background-repeat: no-repeat;
background-size: 100%;
margin: 0 auto;
}
.bj{
position: absolute;
top: 15px;
left: 10px;
font-size: 10px;
}
.Gambia{
position: absolute;
top: 15px;
left: 10px;
font-size: 10px;
color:rgb(255, 153, 153)
}
.Island{
position: absolute;
top: 15px;
left: 10px;
font-size: 10px;
}
/* 城市1 */
.city1{
position: absolute;
top: 370px;
right: 403px;
color: aliceblue;
}
.center1{
width: 5px;
height: 5px;
background-color: rgb(255, 255, 255);
box-shadow: 0 0 12px 2px #fff;
border-radius: 50%;
}
.city1 div[class^="bw"]{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 5px;
height: 5px;
box-shadow: 0 0 7px #fff;
border-radius: 50%;
animation: scla 3s linear infinite;
}
.map .city1 div.bw2{
animation-delay: 1s;
}
.map .city1 div.bw3{
animation-delay: 2s;
}
/* 城市2 */
.city2{
position: absolute;
top: 500px;
right: 703px;
color: aliceblue;
}
.center2{
width: 5px;
height: 5px;
background-color: rgb(255, 255, 255);
box-shadow: 0 0 12px 2px #fff;
border-radius: 50%;
}
.city2 div[class^="bw"]{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 5px;
height: 5px;
box-shadow: 0 0 7px rgb(255, 149, 149);
border-radius: 50%;
animation: scla1 3s linear infinite;
}
.map .city2 div.bw2{
animation-delay: 0.75s;
}
.map .city2 div.bw3{
animation-delay: 1.5s;
}
.map .city2 div.bw4{
animation-delay: 2.25s;
}
/* 城市3 */
.city3{
position: absolute;
top: 200px;
right: 1003px;
color: aliceblue;
}
.center3{
width: 5px;
height: 5px;
background-color: rgb(255, 255, 255);
box-shadow: 0 0 12px 2px #fff;
border-radius: 50%;
}
/* 属性选择器 正则表达式筛选bw开头类名 */
.city3 div[class^="bw"]{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 5px;
height: 5px;
box-shadow: 0 0 7px #fff;
border-radius: 50%;
animation: scla 3s linear infinite;
}
.map .city3 div.bw2{
animation-delay: 1s;
}
.map .city3 div.bw3{
animation-delay: 2s;
}
/* @keyframes关键帧动画 */
@keyframes scla{
0% {
opacity: 1;
}
50% {
width: 105px;
height: 105px;
opacity: 0.5;
}
100% {
width: 150px;
height: 150px;
opacity: 0;
}
}
@keyframes scla1{
0% {
opacity: 1;
}
50% {
width: 285px;
height: 285px;
opacity: 0.5;
}
100% {
width: 330px;
height: 330px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="map">
<div class="city1">
<div class="center1"></div>
<p class="bj">Beijing</p>
<div class="bw1"></div>
<div class="bw2"></div>
<div class="bw3"></div>
</div>
<div class="city2">
<div class="center2"></div>
<p class="Gambia">Gambia</p>
<div class="bw1"></div>
<div class="bw2"></div>
<div class="bw3"></div>
<div class="bw4"></div>
</div>
<div class="city3">
<div class="center3"></div>
<p class="Island">Island</p>
<div class="bw1"></div>
<div class="bw2"></div>
<div class="bw3"></div>
</div>
</div>
</body>