css3 做成的音频波动效果

最新推荐文章于 2024-06-12 10:15:41 发布

Jason-Jin

最新推荐文章于 2024-06-12 10:15:41 发布

阅读量1.2w

点赞数

分类专栏： Web前端文章标签： css3 html5

本文链接：https://blog.csdn.net/jjx0224/article/details/45334141

版权

Web前端专栏收录该内容

57 篇文章 0 订阅

订阅专栏

<!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>
        </div>
    </body>
</html>