音频波动效果两则

作者: 积_渐 | 来源:发表于2018-06-12 18:31 被阅读16次

音频波动效果两则
ffmpeg的用法基础示例
平面波动方程实现线条波动效果
mac iMovie叠加音频
模拟水纹波动效果
音频播放工具类
效果命令下的插值、反转、机械化命令基本操作
“量子波动速读”和“僵尸舞台剧”，供方和需方共同催生的市场怪胎
音频｜音频测试！
fcpx插件：Pixel Film Studios ProSto

1.效果如下

从上往下波动

代码如下：

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

注：此时的波动是从上往下波动，如要改成从下往上波动，只需将span的样式按如下修改即可：

#container span{  
      width:5px;  
      height: 5px;  
      top:0px;  
      position:absolute;  
      background:red;  
      -webkit-animation: bodong 0.5s infinite  ease;  
}

2.效果如下

水平粗细波动

代码如下：

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset='uft-8'>  
        <title>音频波效果</title>  
        <style type="text/css">  
           #preloader_1{
              position: relative;
              top: 50px;
            }

            #preloader_1 span{
              display:block;
              bottom:0px;
              width: 9px;
              height: 5px;
              background:#9b59b6;
              position:absolute;
              -webkit-animation: preloader_1 2s infinite ease-in-out;
              -moz-animation: preloader_1 2s infinite ease-in-out;
              -ms-animation: preloader_1 2s infinite ease-in-out;
              animation: preloader_1 2s infinite ease-in-out;
            }

            #preloader_1 span:nth-child(2){
              left:11px;
              -webkit-animation-delay: .2s;
              -moz-animation-delay: .2s;
              -ms-animation-delay: .2s;
              -o-animation-delay: .2s;
              animation-delay: .2s;
            }

            #preloader_1 span:nth-child(3){
              left:22px;
              -webkit-animation-delay: .4s;
              -moz-animation-delay: .4s;
              -ms-animation-delay: .4s;
              -o-animation-delay: .4s;
              animation-delay: .4s;
            }

            #preloader_1 span:nth-child(4){
              left:33px;
              -webkit-animation-delay: .6s;
              -moz-animation-delay: .6s;
              -ms-animation-delay: .6s;
              -o-animation-delay: .6s;
              animation-delay: .6s;
            }

            #preloader_1 span:nth-child(5){
              left:44px;
              -webkit-animation-delay: .8s;
              -moz-animation-delay: .8s;
              -ms-animation-delay: .8s;
              -o-animation-delay: .8s;
              animation-delay: .8s;
            }

            @-webkit-keyframes preloader_1 {
                0% {height:5px;-webkit-transform:translateY(0px);background:#9b59b6;}
                25% {height:30px;-webkit-transform:translateY(15px);background:#3498db;}
                50% {height:5px;-webkit-transform:translateY(0px);background:#9b59b6;}
                100% {height:5px;-webkit-transform:translateY(0px);background:#9b59b6;}
            }

            @-moz-keyframes preloader_1 {
                0% {height:5px;-moz-transform:translateY(0px);background:#9b59b6;}
                25% {height:30px;-moz-transform:translateY(15px);background:#3498db;}
                50% {height:5px;-moz-transform:translateY(0px);background:#9b59b6;}
                100% {height:5px;-moz-transform:translateY(0px);background:#9b59b6;}
            }

            @-ms-keyframes preloader_1 {
                0% {height:5px;-ms-transform:translateY(0px);background:#9b59b6;}
                25% {height:30px;-ms-transform:translateY(15px);background:#3498db;}
                50% {height:5px;-ms-transform:translateY(0px);background:#9b59b6;}
                100% {height:5px;-ms-transform:translateY(0px);background:#9b59b6;}
            }

            @keyframes preloader_1{
              0%{height: 5px;transform:translateY(0px);background:#9b59b6;}
              25%{height: 30px;transform:translateY(15px);background:#3498db;}
              50%{height: 5px;transform:translateY(0px);background:#9b59b6;}
              100%{height: 5px;transform:translateY(0px);background:#9b59b6;}
            } 
  
        </style>  
    </head>  
    <body>  
        <div id="preloader_1">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        </div> 
    </body>  
</html>