css动画-音波效果

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>





发表于: 3月前   最后更新时间: 3月前   游览量:284
上一条: 人工智能、机器学习和深度学习的区别?
下一条: css动画-圆形扩散(音效)