图1

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

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

效果图：

  图2

代码：

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

  1. <div id='loading'>
  2. <div id='coloumn1' class='coloumns'></div>
  3. <div id='coloumn2' class='coloumns'></div>
  4. <div id='coloumn3' class='coloumns'></div>
  5. <div id='coloumn4' class='coloumns'></div>
  6. <div id='coloumn5' class='coloumns'></div>
  7. <div id='coloumn6' class='coloumns'></div>
  8. </div>
  1. #loading{
  2. margin-top:30px;
  3. float:left;
  4. width:95px;
  5. height:32px;
  6. margin-left:30px;
  7. /* CSS3圆角边框 */
  8. -webkit-border-radius: 5px;
  9. -moz-border-radius: 5px;
  10. border-radius: 5px;
  11. }
  12. .coloumns{
  13. border:1px solid #fff;
  14. float:left;
  15. height:30px;
  16. margin-left:5px;
  17. width:10px;
  18. /* 在这儿我们定义一个动画名，随后我们将会实现它 */
  19. -webkit-animation-name: animation;
  20. /* 动画循环一次的总时间 */
  21. -webkit-animation-duration: 3s;
  22. /* 动画的循环次数，我们设置为无穷大 */
  23. -webkit-animation-iteration-count: infinite;
  24. -webkit-animation-direction: linear;
  25. /* 最初所有列的透明度都为0 */
  26. opacity:0;
  27. /* 开始时将它缩放为0.8 */
  28. -webkit-transform:scale(0.8);
  29. }
  30. #coloumn1{
  31. /* 第一列动画延迟0.3秒 */
  32. -webkit-animation-delay: .3s;
  33. }
  34. #coloumn2{
  35. /* 第二列动画延迟0.4秒 */
  36. -webkit-animation-delay: .4s;
  37. }
  38. #coloumn3{
  39. /* 第三列动画延迟0.5秒*/
  40. -webkit-animation-delay: .5s;
  41. }
  42. #coloumn4{
  43. /* 第四列动画延迟0.6秒*/
  44. -webkit-animation-delay: .6s;
  45. }
  46. #coloumn5{
  47. /* 第四列动画延迟0.7秒*/
  48. -webkit-animation-delay: .7s;
  49. }
  50. #coloumn6{
  51. /* 第四列动画延迟0.8秒*/
  52. -webkit-animation-delay: .8s;
  53. }
  54. /* 之前我们曾经定义过动画的名称，我们在这儿设置动画的属性 */
  55. @-webkit-keyframes animation{
  56. /* 在动画开始时每一列的透明度都是0 */
  57. 0%{opacity:0;}
  58. /* 在动画中间时每一列的透明度都是1 */
  59. 50%{opacity:1;}
  60. /*在动画结束时每一列的透明度都还原到0 */
  61. 100%{opacity:0;}
  62. }

最新文章

  1. ZeroMQ接口函数之 ：zmq_msg_more - 指出是不是还有更多的消息部分可以接收
  2. 18.虚拟机linux上网问题
  3. oracle驱动地址
  4. android学习笔记一——简介
  5. C# 清空sessin
  6. EntityFramwork(2Database First) 源地址https://msdn.microsoft.com/zh-cn/data/jj193542
  7. 超级MINI STLINK V2 官方固件自动升级 ST-Link 【worldsing 笔记】
  8. DSASync: Managing End-to-End Connections in Dynamic Spectrum Access Wireless LANs
  9. IO库 8.6
  10. 夜未央Test1
  11. lucene 索引查看工具
  12. 9.hibernate的一对一映射
  13. winform webbrowser如何强制使用ie11内核？
  14. 【Learning】 欧拉回路的求解
  15. linux CentOS 安装 nginx
  16. ketlle windows下的安装(最基本)
  17. 创建JUtil
  18. flask 渲染jinja2模版和传参
  19. 八、uboot 代码流程分析---board_init_f
  20. 你真的懂Handler.postDelayed()的原理吗?

热门文章

  1. Remote &#39;attachhome&#39; failed on nodes:XXX
  2. Python acos() 函数
  3. es6 解构赋值 新认知/新习惯
  4. Netty（六）：Netty中的连接管理（心跳机制和定时断线重连）
  5. IP和java.net.InetAddress类的使用
  6. 【Android】18.1 利用安卓内置的定位服务实现位置跟踪
  7. 【Android】12.3 在当前Activity中获取另一个Activity的返回值
  8. 【Android】3.12 兴趣点（ POI）搜索功能
  9. 使用VMware安装CentOS7步骤详情
  10. struts2漏洞-第一次入侵经历