css3 做成的音频波动效果_css 仿siri音频波纹

作者：木道寻08 | 2024-08-06 10:45:47

踩

css 仿siri音频波纹


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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/木道寻08/article/detail/937071