zoukankan      html  css  js  c++  java

  • CSS3加载动画

    图1

    通常我们都使用gif格式的图片或者使用Ajax来实现诸如这类的动态加载条,但是现在CSS3也可以完成,并且灵活性更大.

    选1个例子看看怎么实现的吧:

    效果图：

    加载条  图2

    代码：

    使用1个名为'loading'的层装所有加载内容，里面需要有多少条目则添加这么多个div，并且使用相同的class名称'coloumns'， 再为每个动画条添加各自延迟的CSS代码

    Html代码  收藏代码
    1. <div id='loading'>  
    2.   
    3.                  <div id='coloumn1' class='coloumns'></div>  
    4.   
    5.                  <div id='coloumn2' class='coloumns'></div>  
    6.   
    7.                  <div id='coloumn3' class='coloumns'></div>  
    8.   
    9.                 <div id='coloumn4' class='coloumns'></div>  
    10.   
    11.                  <div id='coloumn5' class='coloumns'></div>  
    12.   
    13.                  <div id='coloumn6' class='coloumns'></div>  
    14.   
    15. </div>  
    Html代码  收藏代码
    1.     #loading{  
    2.   
    3.          margin-top:30px;  
    4.   
    5.          float:left;  
    6.   
    7.          95px;  
    8.   
    9.          height:32px;  
    10.   
    11.            
    12.   
    13.          margin-left:30px;  
    14.   
    15.          /* CSS3圆角边框 */  
    16.   
    17.          -webkit-border-radius: 5px;  
    18.   
    19.          -moz-border-radius: 5px;  
    20.   
    21.          border-radius: 5px;  
    22. }  
    23.   
    24. .coloumns{  
    25.   
    26.            
    27.   
    28.          border:1px solid #fff;  
    29.   
    30.          float:left;  
    31.   
    32.          height:30px;  
    33.   
    34.          margin-left:5px;  
    35.   
    36.          10px;  
    37.   
    38.          /* 在这儿我们定义一个动画名，随后我们将会实现它 */  
    39.   
    40.          -webkit-animation-name: animation;  
    41.   
    42.          /* 动画循环一次的总时间 */  
    43.   
    44.          -webkit-animation-duration: 3s;  
    45.   
    46.          /* 动画的循环次数，我们设置为无穷大 */  
    47.   
    48.          -webkit-animation-iteration-count: infinite;  
    49.   
    50.          -webkit-animation-direction: linear;  
    51.   
    52.          /* 最初所有列的透明度都为0 */  
    53.   
    54.          opacity:0;  
    55.   
    56.          /* 开始时将它缩放为0.8 */  
    57.   
    58.          -webkit-transform:scale(0.8);  
    59.   
    60.          }  
    61.   
    62. #coloumn1{  
    63.   
    64.          /* 第一列动画延迟0.3秒 */  
    65.   
    66.          -webkit-animation-delay: .3s;  
    67.   
    68.  }  
    69.   
    70. #coloumn2{  
    71.   
    72.          /* 第二列动画延迟0.4秒 */  
    73.   
    74.          -webkit-animation-delay: .4s;  
    75.   
    76. }  
    77.   
    78. #coloumn3{  
    79.   
    80.          /* 第三列动画延迟0.5秒*/  
    81.   
    82.          -webkit-animation-delay: .5s;  
    83.   
    84. }  
    85.   
    86. #coloumn4{  
    87.   
    88.          /* 第四列动画延迟0.6秒*/  
    89.   
    90.          -webkit-animation-delay: .6s;  
    91.   
    92.  }  
    93.   
    94. #coloumn5{  
    95.   
    96.          /* 第四列动画延迟0.7秒*/  
    97.   
    98.          -webkit-animation-delay: .7s;  
    99.   
    100. }  
    101.   
    102. #coloumn6{  
    103.   
    104.          /* 第四列动画延迟0.8秒*/  
    105.   
    106.          -webkit-animation-delay: .8s;  
    107.   
    108. }  
    109.   
    110. /* 之前我们曾经定义过动画的名称，我们在这儿设置动画的属性 */  
    111.   
    112. @-webkit-keyframes animation{  
    113.   
    114.          /* 在动画开始时每一列的透明度都是0 */  
    115.   
    116.          0%{opacity:0;}  
    117.   
    118.          /* 在动画中间时每一列的透明度都是1 */  
    119.   
    120.          50%{opacity:1;}  
    121.   
    122.          /*在动画结束时每一列的透明度都还原到0 */  
    123.   
    124.          100%{opacity:0;}  
    125.   
    126. }  
  • 相关阅读:
    ueditor 视频上传 cookie丢失问题
    asp分块读取解决ueditor 上传文件200K限制问题
    thinkcmf上传到阿里云虚拟主机后报错
    TP5 apache服务器fastcgi模式下rewrite重写
    Nginx实战之反向代理WebSocket的配置实例
    CentOS7安装Supervisor
    webservice发送带有头信息的数据
    分布式系统 杂记
    docker网络学习笔记
    php 跨域处理
  • 原文地址：https://www.cnblogs.com/xiaochao12345/p/4037201.html
Copyright © 2011-2022 走看看