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