zoukankan      html  css  js  c++  java
  • 使用CSS3实现超炫的Loading(加载)动画效果

    SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画。借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画。SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案,而是给现代浏览器提供更优的技术实现方案和更佳的使用体验。(为保证最佳的效果,请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览)

      Loading 动画效果一

      HTML 代码:

    <div class="spinner"> 
    
    <div class="rect1"></div> 
    
    <div class="rect2"></div> 
    
    <div class="rect3"></div> 
    
    <div class="rect4"></div> 
    
    <div class="rect5"></div> 
    
    </div>

      CSS 代码:

    .spinner { 
    
    margin: 100px auto; 
    
    width: 50px; 
    
    height: 60px; 
    
    text-align: center; 
    
    font-size: 10px; 
    
    } 
    
    .spinner > div { 
    
    background-color: #67CF22; 
    
    height: 100%; 
    
    width: 6px; 
    
    display: inline-block; 
    
    
    -webkit-animation: stretchdelay 1.2s infinite ease-in-out; 
    
    animation: stretchdelay 1.2s infinite ease-in-out; 
    
    } 
    
    .spinner .rect2 { 
    
    -webkit-animation-delay: -1.1s; 
    
    animation-delay: -1.1s; 
    
    } 
    
    .spinner .rect3 { 
    
    -webkit-animation-delay: -1.0s; 
    
    animation-delay: -1.0s; 
    
    } 
    
    .spinner .rect4 { 
    
    -webkit-animation-delay: -0.9s; 
    
    animation-delay: -0.9s; 
    
    } 
    
    .spinner .rect5 { 
    
    -webkit-animation-delay: -0.8s; 
    
    animation-delay: -0.8s; 
    
    } 
    
    @-webkit-keyframes stretchdelay { 
    
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
    
    20% { -webkit-transform: scaleY(1.0) } 
    
    } 
    
    @keyframes stretchdelay { 
    
    0%, 40%, 100% { 
    
    transform: scaleY(0.4); 
    
    -webkit-transform: scaleY(0.4); 
    
    }  20% { 
    
    transform: scaleY(1.0); 
    
    -webkit-transform: scaleY(1.0); 
    
    } 
    
    }
      Loading 动画效果二

      HTML 代码:

    <div class="spinner"></div>

      CSS 代码:

    .spinner { 
    
    width: 60px; 
    
    height: 60px; 
    
    background-color: #67CF22; 
    
    margin: 100px auto; 
    
    -webkit-animation: rotateplane 1.2s infinite ease-in-out; 
    
    animation: rotateplane 1.2s infinite ease-in-out; 
    
    } 
    
    @-webkit-keyframes rotateplane { 
    
    0% { -webkit-transform: perspective(120px) } 
    
    50% { -webkit-transform: perspective(120px) rotateY(180deg) } 
    
    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) } 
    
    } 
    
    @keyframes rotateplane { 
    
    0% { 
    
    transform: perspective(120px) rotateX(0deg) rotateY(0deg); 
    
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
    
    } 50% { 
    
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); 
    
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
    
    } 100% { 
    
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 
    
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 
    
    } 
    
    }
      Loading 动画效果三

      HTML 代码:

    <div class="spinner"> 
    
    <div class="double-bounce1"></div> 
    
    <div class="double-bounce2"></div> 
    
    </div>

      CSS 代码:

    .spinner { 
    
    width: 60px; 
    
    height: 60px; 
    
    position: relative; 
    
    margin: 100px auto; 
    
    } 
    
    .double-bounce1, .double-bounce2 { 
    
    width: 100%; 
    
    height: 100%; 
    
    border-radius: 50%; 
    
    background-color: #67CF22; 
    
    opacity: 0.6; 
    
    position: absolute; 
    
    top: 0; 
    
    left: 0; 
    
    
    -webkit-animation: bounce 2.0s infinite ease-in-out; 
    
    animation: bounce 2.0s infinite ease-in-out; 
    
    } 
    
    .double-bounce2 { 
    
    -webkit-animation-delay: -1.0s; 
    
    animation-delay: -1.0s; 
    
    } 
    
    @-webkit-keyframes bounce { 
    
    0%, 100% { -webkit-transform: scale(0.0) } 
    
    50% { -webkit-transform: scale(1.0) } 
    
    } 
    
    @keyframes bounce { 
    
    0%, 100% { 
    
    transform: scale(0.0); 
    
    -webkit-transform: scale(0.0); 
    
    } 50% { 
    
    transform: scale(1.0); 
    
    -webkit-transform: scale(1.0); 
    
    } 
    
    }
      Loading 动画效果四

      HTML 代码:

      CSS 代码:

    .spinner { 
    
    margin: 100px auto; 
    
    width: 32px; 
    
    height: 32px; 
    
    position: relative; 
    
    } 
    
    .cube1, .cube2 { 
    
    background-color: #67CF22; 
    
    width: 30px; 
    
    height: 30px; 
    
    position: absolute; 
    
    top: 0; 
    
    left: 0; 
    
    
    -webkit-animation: cubemove 1.8s infinite ease-in-out; 
    
    animation: cubemove 1.8s infinite ease-in-out; 
    
    } 
    
    .cube2 { 
    
    -webkit-animation-delay: -0.9s; 
    
    animation-delay: -0.9s; 
    
    } 
    
    @-webkit-keyframes cubemove { 
    
    25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) } 
    
    50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) } 
    
    75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) } 
    
    100% { -webkit-transform: rotate(-360deg) } 
    
    } 
    
    @keyframes cubemove { 
    
    25% { 
    
    transform: translateX(42px) rotate(-90deg) scale(0.5); 
    
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); 
    
    } 50% { 
    
    transform: translateX(42px) translateY(42px) rotate(-179deg); 
    
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); 
    
    } 50.1% { 
    
    transform: translateX(42px) translateY(42px) rotate(-180deg); 
    
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); 
    
    } 75% { 
    
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); 
    
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); 
    
    } 100% { 
    
    transform: rotate(-360deg); 
    
    -webkit-transform: rotate(-360deg); 
    
    } 
    
    }
      Loading 动画效果五

      HTML 代码:

      CSS 代码:

    .spinner { 
    
    margin: 100px auto; 
    
    width: 90px; 
    
    height: 90px; 
    
    position: relative; 
    
    text-align: center; 
    
    
    -webkit-animation: rotate 2.0s infinite linear; 
    
    animation: rotate 2.0s infinite linear; 
    
    } 
    
    .dot1, .dot2 { 
    
    width: 60%; 
    
    height: 60%; 
    
    display: inline-block; 
    
    position: absolute; 
    
    top: 0; 
    
    background-color: #67CF22; 
    
    border-radius: 100%; 
    
    
    -webkit-animation: bounce 2.0s infinite ease-in-out; 
    
    animation: bounce 2.0s infinite ease-in-out; 
    
    } 
    
    .dot2 { 
    
    top: auto; 
    
    bottom: 0px; 
    
    -webkit-animation-delay: -1.0s; 
    
    animation-delay: -1.0s; 
    
    } 
    
    @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }} 
    
    @keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }} 
    
    @-webkit-keyframes bounce { 
    
    0%, 100% { -webkit-transform: scale(0.0) } 
    
    50% { -webkit-transform: scale(1.0) } 
    
    } 
    
    @keyframes bounce { 
    
    0%, 100% { 
    
    transform: scale(0.0); 
    
    -webkit-transform: scale(0.0); 
    
    } 50% { 
    
    transform: scale(1.0); 
    
    -webkit-transform: scale(1.0); 
    
    } 
    
    }
      Loading 动画效果六

      HTML 代码:

    <div class="spinner"> 
    
    <div class="bounce1"></div> 
    
    <div class="bounce2"></div> 
    
    <div class="bounce3"></div> 
    
    </div>

      CSS 代码:

    .spinner { 
    
    margin: 100px auto 0; 
    
    width: 150px; 
    
    text-align: center; 
    
    } 
    
    .spinner > div { 
    
    width: 30px; 
    
    height: 30px; 
    
    background-color: #67CF22; 
    
    border-radius: 100%; 
    
    display: inline-block; 
    
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out; 
    
    animation: bouncedelay 1.4s infinite ease-in-out; 
    
    /* Prevent first frame from flickering when animation starts */ 
    
    -webkit-animation-fill-mode: both; 
    
    animation-fill-mode: both; 
    
    } 
    
    .spinner .bounce1 { 
    
    -webkit-animation-delay: -0.32s; 
    
    animation-delay: -0.32s; 
    
    } 
    
    .spinner .bounce2 { 
    
    -webkit-animation-delay: -0.16s; 
    
    animation-delay: -0.16s; 
    
    } 
    
    @-webkit-keyframes bouncedelay { 
    
    0%, 80%, 100% { -webkit-transform: scale(0.0) } 
    
    40% { -webkit-transform: scale(1.0) } 
    
    } 
    
    @keyframes bouncedelay { 
    
    0%, 80%, 100% { 
    
    transform: scale(0.0); 
    
    -webkit-transform: scale(0.0); 
    
    } 40% { 
    
    transform: scale(1.0); 
    
    -webkit-transform: scale(1.0); 
    
    } 
    
    }
      Loading 动画效果七

      HTML 代码:

    <div class="spinner"></div>

      CSS 代码:

    .spinner { 
    
    width: 40px; 
    
    height: 40px; 
    
    margin: 100px auto; 
    
    background-color: #333; 
    
    border-radius: 100%;  
    
    -webkit-animation: scaleout 1.0s infinite ease-in-out; 
    
    animation: scaleout 1.0s infinite ease-in-out; 
    
    } 
    
    @-webkit-keyframes scaleout { 
    
    0% { -webkit-transform: scale(0.0) } 
    
    100% { 
    
    -webkit-transform: scale(1.0); 
    
    opacity: 0; 
    
    } 
    
    } 
    
    @keyframes scaleout { 
    
    0% { 
    
    transform: scale(0.0); 
    
    -webkit-transform: scale(0.0); 
    
    } 100% { 
    
    transform: scale(1.0); 
    
    -webkit-transform: scale(1.0); 
    
    opacity: 0; 
    
    } 
    
    }
      Loading 动画效果八

      HTML 代码:

    <div class="spinner"> 
    
    <div class="spinner-container container1"> 
    
    <div class="circle1"></div> 
    
    <div class="circle2"></div> 
    
    <div class="circle3"></div> 
    
    <div class="circle4"></div> 
    
    </div> 
    
    <div class="spinner-container container2"> 
    
    <div class="circle1"></div> 
    
    <div class="circle2"></div> 
    
    <div class="circle3"></div> 
    
    <div class="circle4"></div> 
    
    </div> 
    
    <div class="spinner-container container3"> 
    
    <div class="circle1"></div> 
    
    <div class="circle2"></div> 
    
    <div class="circle3"></div> 
    
    <div class="circle4"></div> 
    
    </div> 
    
    </div>

      CSS 代码:

    .spinner { 
    
    margin: 100px auto; 
    
    width: 20px; 
    
    height: 20px; 
    
    position: relative; 
    
    } 
    
    .container1 > div, .container2 > div, .container3 > div { 
    
    width: 6px; 
    
    height: 6px; 
    
    background-color: #333; 
    
    border-radius: 100%; 
    
    position: absolute; 
    
    -webkit-animation: bouncedelay 1.2s infinite ease-in-out; 
    
    animation: bouncedelay 1.2s infinite ease-in-out; 
    
    -webkit-animation-fill-mode: both; 
    
    animation-fill-mode: both; 
    
    } 
    
    .spinner .spinner-container { 
    
    position: absolute; 
    
    width: 100%; 
    
    height: 100%; 
    
    } 
    
    .container2 { 
    
    -webkit-transform: rotateZ(45deg); 
    
    transform: rotateZ(45deg); 
    
    } 
    
    .container3 { 
    
    -webkit-transform: rotateZ(90deg); 
    
    transform: rotateZ(90deg); 
    
    } 
    
    .circle1 { top: 0; left: 0; } 
    
    .circle2 { top: 0; right: 0; } 
    
    .circle3 { right: 0; bottom: 0; } 
    
    .circle4 { left: 0; bottom: 0; } 
    
    .container2 .circle1 { 
    
    -webkit-animation-delay: -1.1s; 
    
    animation-delay: -1.1s; 
    
    } 
    
    .container3 .circle1 { 
    
    -webkit-animation-delay: -1.0s; 
    
    animation-delay: -1.0s; 
    
    } 
    
    .container1 .circle2 { 
    
    -webkit-animation-delay: -0.9s; 
    
    animation-delay: -0.9s; 
    
    } 
    
    .container2 .circle2 { 
    
    -webkit-animation-delay: -0.8s; 
    
    animation-delay: -0.8s; 
    
    } 
    
    .container3 .circle2 { 
    
    -webkit-animation-delay: -0.7s; 
    
    animation-delay: -0.7s; 
    
    } 
    
    .container1 .circle3 { 
    
    -webkit-animation-delay: -0.6s; 
    
    animation-delay: -0.6s; 
    
    } 
    
    .container2 .circle3 { 
    
    -webkit-animation-delay: -0.5s; 
    
    animation-delay: -0.5s; 
    
    } 
    
    .container3 .circle3 { 
    
    -webkit-animation-delay: -0.4s; 
    
    animation-delay: -0.4s; 
    
    } 
    
    .container1 .circle4 { 
    
    -webkit-animation-delay: -0.3s; 
    
    animation-delay: -0.3s; 
    
    } 
    
    .container2 .circle4 { 
    
    -webkit-animation-delay: -0.2s; 
    
    animation-delay: -0.2s; 
    
    } 
    
    .container3 .circle4 { 
    
    -webkit-animation-delay: -0.1s; 
    
    animation-delay: -0.1s; 
    
    } 
    
    @-webkit-keyframes bouncedelay { 
    
    0%, 80%, 100% { -webkit-transform: scale(0.0) } 
    
    40% { -webkit-transform: scale(1.0) } 
    
    } 
    
    @keyframes bouncedelay { 
    
    0%, 80%, 100% { 
    
    transform: scale(0.0); 
    
    -webkit-transform: scale(0.0); 
    
    } 40% { 
    
    transform: scale(1.0); 
    
    -webkit-transform: scale(1.0); 
    
    } 
    
    }

    本文转载自:http://www.admin10000.com/document/3601.html

  • 相关阅读:
    Serialization and deserialization are bottlenecks in parallel and distributed computing, especially in machine learning applications with large objects and large quantities of data.
    Introduction to the Standard Directory Layout
    import 原理 及 导入 自定义、第三方 包
    403 'Forbidden'
    https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
    These interactions can be expressed as complicated, large scale graphs. Mining data requires a distributed data processing engine
    mysqldump --flush-logs
    mysql dump 参数
    mysql dump 参数
    如果是在有master上开启了该参数,记得在slave端也要开启这个参数(salve需要stop后再重新start),否则在master上创建函数会导致replaction中断。
  • 原文地址:https://www.cnblogs.com/Hcjer/p/4003972.html
Copyright © 2011-2022 走看看