【css3】涟漪动画

效果展示

dom代码

<div class="mapSelfTitle66"><div></div>
</div>

样式代码

.mapSelfTitle66{width:120px;height:60px;position: relative;&>div{width:100%;height:100%;background: url("~@/assets/images/video_show/error_bg.png") no-repeat;background-size: 100% 100%;position: absolute;top:50%;left:50%;margin:-30px 0 0 -60px;animation: animationName 1.5s ease-out infinite;}
}
@keyframes animationName {0% { }100% {width:140px;height:70px;margin:-35px 0 0 -70px;}
}