CSS 水波纹效果 动画

 

 

 

 

 

 html

<div class="point"></div>

css

.point,.point::before,.point::after {
    position: absolute;/*必须设置*/

   margin-top: -22px;

　　margin-left: 5px;

   width: 30px;height: 15px;
　　border-radius: 50%;
　　content: '';/*必须设置*/
}
.point::before {animation: scale 2s infinite;}
.point::after { animation: scale2 2s infinite;}


--设置背景颜色 
.point::before,.point::after {    background: linear-gradient( rgba(60, 188, 179, 0) 2%,
        rgba(60, 188, 179, 0.4) 20%,rgba(60, 188, 179, 0.5) 40%,
        rgba(60, 188, 179, 0.6) 90%, rgba(60, 188, 179, 0.8) 95%, rgb(60, 188, 179) 100%);
}
.point {background-color: none !important;}
@keyframes scale {
    0% {transform: scale(1);opacity: .3}
    100% {transform: scale(1);opacity: 0;}
}
@keyframes scale2 {
    0% {transform: scale(1);opacity: .5;}
    100% {transform: scale(2);opacity: 0;}
}