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 encoding
    [转]shell 变量的作用域
    [转] shell :解析json的命令-jq
    [转] Linux user-space Atomic Operations && GCC Atomic builtins
    [转]reference counting
    [转]memory order,memory barrier,原子操作
    [转]c语言volatile 关键字
    OCF介绍
    [转]计算机存储 cache介绍
    [转] linux IO
  • 原文地址:https://www.cnblogs.com/benpaodegegen/p/7648957.html
Copyright © 2011-2022 走看看