zoukankan      html  css  js  c++  java
  • 纯CSS仿windows系统loading效果

    今天分享的css3案例模仿了window系统下的loading效果
    里面最关键的地方使用了css3 animation的delay属性以及
    贝塞尔曲线(cubic-bezier)的过渡效果,如下所示

    span[class*="l-"] {
     height: 8px; width: 8px;
     background: #fff;
     display: inline-block;
     margin: 12px 2px;
     
     border-radius: 100%;
     -webkit-border-radius: 100%;
     -moz-border-radius: 100%;
     
     -webkit-animation: loader 4s infinite;
     -webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
     -webkit-animation-fill-mode: both;
     -moz-animation: loader 4s infinite;
     -moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
     -moz-animation-fill-mode: both;
     -ms-animation: loader 4s infinite;
     -ms-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
     -ms-animation-fill-mode: both;
     animation: loader 4s infinite;
     animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
     animation-fill-mode: both;
    }
    
    span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
    span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
    span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
    span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
    span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
    span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}

    http://www.h5street.com/demo/windows-phone-loading-animation/index.html

  • 相关阅读:
    设计模式之_6大设计原则(转)
    Django-ORM多表操作(进阶)
    03-django模型(1)
    02-Django基础知识
    web开篇
    body标签中的相关标签
    01-前端初识
    Flask简述
    浅析设计模式
    Python的单例模式
  • 原文地址:https://www.cnblogs.com/qingruozhu/p/6485446.html
Copyright © 2011-2022 走看看