zoukankan      html  css  js  c++  java
  • CSS3生成音频波纹效果加载中动画

    #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;}
    }

    <div id="preloader_1">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    </div>

  • 相关阅读:
    java子类重写父类的要点
    转:swing 中paint与paintComponent的区别(jcomponent)
    证明二叉查找树所有节点的平均深度为O(logN)
    O(logN)中logN的底数
    Stanford依存句法关系解释
    java中的interface
    转:java中Vector的使用
    final类与final方法
    转:NLP+句法结构(三)︱中文句法结构(CIPS2016、依存句法、文法)
    英文语法分析树标注集
  • 原文地址:https://www.cnblogs.com/benpaodegegen/p/7648957.html
Copyright © 2011-2022 走看看