欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

CSS3加载动画_html/css_WEB-ITnose

程序员文章站 2022-04-17 15:27:20
...
图1

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

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

效果图：

图2

代码：

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

Html代码

Html代码

  1. #loading{
  3. margin-top:30px;
  5. float:left;
  7. width:95px;
  9. height:32px;
  13. margin-left:30px;
  15. /* CSS3圆角边框 */
  17. -webkit-border-radius: 5px;
  19. -moz-border-radius: 5px;
  21. border-radius: 5px;
  22. }
  24. .coloumns{
  28. border:1px solid #fff;
  30. float:left;
  32. height:30px;
  34. margin-left:5px;
  36. width:10px;
  38. /* 在这儿我们定义一个动画名，随后我们将会实现它 */
  40. -webkit-animation-name: animation;
  42. /* 动画循环一次的总时间 */
  44. -webkit-animation-duration: 3s;
  46. /* 动画的循环次数，我们设置为无穷大 */
  48. -webkit-animation-iteration-count: infinite;
  50. -webkit-animation-direction: linear;
  52. /* 最初所有列的透明度都为0 */
  54. opacity:0;
  56. /* 开始时将它缩放为0.8 */
  58. -webkit-transform:scale(0.8);
  60. }
  62. #coloumn1{
  64. /* 第一列动画延迟0.3秒 */
  66. -webkit-animation-delay: .3s;
  68. }
  70. #coloumn2{
  72. /* 第二列动画延迟0.4秒 */
  74. -webkit-animation-delay: .4s;
  76. }
  78. #coloumn3{
  80. /* 第三列动画延迟0.5秒*/
  82. -webkit-animation-delay: .5s;
  84. }
  86. #coloumn4{
  88. /* 第四列动画延迟0.6秒*/
  90. -webkit-animation-delay: .6s;
  92. }
  94. #coloumn5{
  96. /* 第四列动画延迟0.7秒*/
  98. -webkit-animation-delay: .7s;
  100. }
  102. #coloumn6{
  104. /* 第四列动画延迟0.8秒*/
  106. -webkit-animation-delay: .8s;
  108. }
  110. /* 之前我们曾经定义过动画的名称，我们在这儿设置动画的属性 */
  112. @-webkit-keyframes animation{
  114. /* 在动画开始时每一列的透明度都是0 */
  116. 0%{opacity:0;}
  118. /* 在动画中间时每一列的透明度都是1 */
  120. 50%{opacity:1;}
  122. /*在动画结束时每一列的透明度都还原到0 */
  124. 100%{opacity:0;}
  126. }
相关标签： CSS3加载动画

上一篇： 新手要想学好Linux系统就必须做好这四件事情

下一篇： ps透明图片格式怎么做

推荐阅读