css动画实现涟漪效果波纹动态效果

最新推荐文章于 2024-12-16 16:22:55 发布

陈序员01

最新推荐文章于 2024-12-16 16:22:55 发布

阅读量2.3k

点赞数 1

分类专栏： html 文章标签： css3 html5 css

本文链接：https://blog.csdn.net/weixin_46193248/article/details/108639727

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图：

在这里插入图片描述
图上是echarts，本文是使用的是css3动画制作的，效果一样

.html

<div class="GreenStatus"></div>

.css

/* 绿色小圆点 */
.GreenStatus {
    width: 10px;
    height: 10px;
    background-color: #6cb552;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

.GreenStatus::before {
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -9px;
    margin-top: -9px;
    border-radius: 50%;
    animation: GreenDot 1.5s ease-out 0s infinite;
    background-color: rgba(108, 181, 82, 0.5);
}

@keyframes GreenDot {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }
    30% {
        opacity: 1;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}