css动画实现涟漪效果波纹动态效果效果图：
图上是echarts，本⽂是使⽤的是css3动画制作的，效果⼀样
.html
<div class="GreenStatus"></div>
.css
css特效文字
/* 绿⾊⼩圆点 */
.GreenStatus {
width: 10px;
height: 10px;
background-color: #6cb552;
border-radius: 50%;
display: inline-block;
position: relative;
}
.GreenStatus::before {
content: "";
width: 18px;
height: 18px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -9px;
margin-top: -9px;
border-radius: 50%;
animation: GreenDot 1.5s ease-out 0s infinite;
background-color: rgba(108, 181, 82, 0.5);
}
@keyframes GreenDot {
0% {
transform: scale(0.5);
opacity: 1;
}
30% {
opacity: 1;
}
100% {
transform: scale(1.4);
opacity: 0;
}
}