css动画实现涟漪效果 波纹动态效果

效果图：

图上是echarts，本文是使用的是css3动画制作的，效果一样

.html

<div class="GreenStatus"></div>

.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;}
}