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

  • 相关阅读:
    docker容器的通讯——内部访问外部
    docker网络介绍之bridge网络详解
    一张图看懂docker容器的所有状态
    docker——cgroup限制的应用实例
    docker私有仓库搭建
    VC多线程临界区(转)
    delphi 多线程2
    delphi 多线程
    SQL ROW_NUMBER() OVER函数的基本用法用法
    sqlserver游标概念与实例全面解说
  • 原文地址:https://www.cnblogs.com/qingruozhu/p/6485446.html
Copyright © 2011-2022 走看看