先上图:
中间那个实心点里面放几个盒子,每个盒子都设置一样的宽高,不要设置背景颜色,设置边框色就可以,然后通过绝对定位加移动,把这些小盒子移到实心点正上方,然后添加动画效果,0% 75% 100%进行宽度高度的变大,最后对每个盒子的缩放进行延迟(delay)操作,不然都是同时放大和缩小,就没有效果,就可以像图示这样呈现发散效果了。
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.map {
width: 747px;
height: 617px;
background-image: url("../images/map.jpg");
background-size: 100% 100%;
margin: 0 auto;
position: relative;
}
.city {
position: absolute;
top: 260px;
right: 260px;
color: blue;
}
.yuan {
width: 8px;
height: 8px;
background-color: #09f;
border-radius: 4px;
}
.city [class^="pulse"] {
position: absolute;
top: 50%;
left: 50%;
/* 保证我们小波纹在父盒子垂直居中,方法之后就会压住父盒子 */
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
box-shadow: 0 0 12px #009dfd;
border-radius: 50%;
animation: donghua 1.2s linear infinite;
}
.city .pulse2 {
animation-delay: 0.4s;
}
.city.pulse3 {
animation-delay: 0.8s;
}
.tb {
top: 400px;
right: 300px;
}
@keyframes donghua {
0% {}
70% {
width: 40px;
height: 40px;
opacity: 1;
}
100% {
width: 70px;
height: 70px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="map">
<div class="city">
<div class="yuan"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="city tb">
<div class="yuan"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
</body>
</html>