效果展示
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;
}
}
文章来源地址https://www.toymoban.com/news/detail-741018.html
文章来源:https://www.toymoban.com/news/detail-741018.html
到了这里,关于【css3】涟漪动画的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!