css3写倒着跳动的音符

最新推荐文章于 2021-06-03 11:21:05 发布

翻译最新推荐文章于 2021-06-03 11:21:05 发布 · 1.8k 阅读

myWork-- 专栏收录该内容

59 篇文章

订阅专栏

本文介绍了一种使用纯CSS实现音频波形动画的方法。通过设置不同延迟的动画，使得一系列并排的矩形能够模拟出类似音频波的动态变化效果。文章详细展示了如何利用CSS属性来控制这些矩形的高度和颜色变化，最终呈现出逼真的音频波动。

    <!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>