使用 css 实现震波效果

最新推荐文章于 2024-09-11 16:40:38 发布

墨城之左

最新推荐文章于 2024-09-11 16:40:38 发布

阅读量736

点赞数 1

分类专栏：技术杂文文章标签： css 震动波纹

本文链接：https://blog.csdn.net/antony1776/article/details/108117867

版权

技术杂文专栏收录该内容

57 篇文章

订阅专栏

本文详细介绍了如何使用CSS实现一种无限循环的动画效果，通过不同的关键帧和动画属性设置，展示了如何让元素在不同比例下缩放并改变透明度，从而达到视觉上的波动感。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .wave0 {
            animation: scale0 1s;
            -webkit-animation:scale0 1s; 
            animation-iteration-count:infinite;
            -webkit-animation-iteration-count:infinite; 
            animation-timing-function:linear;
            -webkit-animation-timing-function:linear;/* Safari and Chrome */
        }

        .wave1 {
            animation: scale1 1s;
            -webkit-animation:scale1 1s; 
            animation-iteration-count:infinite;
            -webkit-animation-iteration-count:infinite; 
            animation-timing-function:linear;
            -webkit-animation-timing-function:linear; /* Safari and Chrome */
        }

        .wave2 {
            animation: scale2 1s;
            -webkit-animation:scale2 1s; 
            animation-iteration-count:infinite;
            -webkit-animation-iteration-count:infinite; 
            animation-timing-function:linear;
            -webkit-animation-timing-function:linear; /* Safari and Chrome */
        }

        /*  #ff0000 #ff0000d6 #ff0000a6 #ff000087*/
        @keyframes scale0
        {
            from {transform:scale(2);opacity: 0.8}
            to { transform:scale(4);opacity: 0.5}
        }

        @-webkit-keyframes scale0 /*Safari and Chrome*/
        {
            from {transform:scale(2);opacity: 0.8}
            to { transform:scale(4);opacity: 0.5}
        }


        @keyframes scale1
        {
            from {transform:scale(4);opacity: 0.5}
            to { transform:scale(6); opacity: 0.3}
        }

        @-webkit-keyframes scale1 /*Safari and Chrome*/
        {
            from {transform:scale(4);opacity: 0.5}
            to { transform:scale(6); opacity: 0.3}
        }

        @keyframes scale2
        {
            from {transform:scale(6);opacity: 0.3}
            to { transform:scale(7);  opacity: 0.0}
        }

        @-webkit-keyframes scale2 /*Safari and Chrome*/
        {
            from {transform:scale(6);opacity: 0.3}
            to { transform:scale(7);  opacity: 0.0}
        }

        .dot {
            float: left;
            width: 6px;
            height: 6px;
            border-radius:3px;
        }

        .red .dot{
            background-color: red;
        }

        .dot_left {
            margin-left: -6px;
        }

    </style>
</head>
<body style="padding:200px">
    <div class="red"  style="position:relative;top:300px;left:10px;">
        <div class="dot wave2" style="z-index: 5;"></div>
        <div class="dot wave1 dot_left" style="z-index: 8;"></div>
        <div class="dot wave0 dot_left" style="z-index: 9;"></div>
        <div class="dot dot_left" style="z-index: 10; transform:scale(2)"></div>
    </div>

    <div class="red"  style="position:relative;top:300px;left:100px;">
        <div class="dot wave2" style="z-index: 5;"></div>
        <div class="dot wave1 dot_left" style="z-index: 8;"></div>
        <div class="dot wave0 dot_left" style="z-index: 9;"></div>
        <div class="dot dot_left" style="z-index: 10; transform:scale(2)"></div>
    </div>


</body>
</html>