【css3】涟漪动画

最新推荐文章于 2024-04-22 14:48:45 发布

Yin.云端

最新推荐文章于 2024-04-22 14:48:45 发布

阅读量995

点赞数 2

分类专栏： CSS 文章标签： css3 前端 css

本文链接：https://blog.csdn.net/qq_35892039/article/details/134136308

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果展示

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