search

Home >Web Front-end >HTML Tutorial >CSS3 loading animation_html/css_WEB-ITnose

CSS3 loading animation_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:55:571349browse

 

图1

 

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

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

 

效果图：

  图2

代码：

 

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

 

 

Html代码  

  1.   
  2.   
  3.                  
      
  4.   
  5.                  
      
  6.   
  7.                  
      
  8.   
  9.                 
      
  10.   
  11.                  
      
  12.   
  13.                  
      
  14.   

Html code

  1.     #loading{  
  2.   
  3.          margin-top:30px;  
  4.   
  5.          float:left;  
  6.   
  7.          width: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.          width: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. }
  78. #coloumn3{
  80. /* The third column animation is delayed by 0.5 seconds*/
  82. -webkit-animation-delay: .5s;
  84. }
  86. #coloumn4{ /* The fourth column animation is delayed by 0.6 seconds*/
  88. -webkit-animation-delay: .6s;
  90. }
  92. #coloumn5{
    95. /* The fourth column animation is delayed by 0.7 seconds*/ -delay: .7s;
    97. }
    99. #coloumn6{ Column animation delay 0.8 seconds*/
    101. -webkit-animation-delay: .8s;
    103. }
    105. /* We have defined the name of the animation before, we set the properties of the animation here */
    107. @-webkit-keyframes animation{
    109. /* The opacity of each column is 0 at the beginning of the animation */
    111. 0%{opacity:0;}
    113.                                                                       / *At the end of the animation, the opacity of each column is restored to 0 */ >
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：In-depth CSS attributes (9): z-index_html/css_WEB-ITnoseNext article：In-depth CSS attributes (9): z-index_html/css_WEB-ITnose

Related articles

See more