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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。