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>
在线运行
css动画 - 音波效果

昵称
