css动画 - 音波效果

半兽人 发表于: 2019-03-26   最后更新时间: 2021-09-18 09:11:43  
{{totalSubscript}} 订阅, 5,374 游览

css实现一个持续变化的音波特效,代码如下,可直接运行。

注意:ie下无效。

<!DOCTYPE html>
<html>
    <head>
        <meta charset='uft-8'>
        <title>音频波效果</title>
        <style type="text/css">
            #container{
                position:relative;
            }

            #container span{
                width:5px;
                height: 5px;
                top:0px;
                position:absolute;
                background:red;
                -webkit-animation: bodong 0.5s infinite  ease;
            }

            #container span:first-child{
                left:0px;
                -webkit-animation-delay:.3s;
            }

            #container span:nth-child(2){
                left:7px;
                -webkit-animation-delay:.4s;

            }
            #container span:nth-child(3){
                left:14px;
                 -webkit-animation-delay:.6s;
            }
             #container span:nth-child(4){
                left:21px;
                 -webkit-animation-delay:.8s;
            }
            #container span:nth-child(5){
                left:28px;
                 -webkit-animation-delay:1s;
            }

            @-webkit-keyframes bodong{
                0%{height:5px; background:bule;}
                30%{height:15px; background:bule;}
                60%{height:20px; background:bule;}
                80%{height:15px; background:bule;}
                100%{height:5px; background:bule;}
            }

        </style>
    </head>
    <body>
        <div id='container'>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </body>
</html>

在线运行

css
更新于 2021-09-18
在线,3小时前登录

查看css更多相关的文章或提一个关于css的问题,也可以与我们一起分享文章