先看图，多数是从别人那里看的效果直接仿的，先开随笔，有了创意继续加

其实3个之后，脑子里立刻有个第四个的制作思路，无外乎是利用border或者块元素变形，然后构思好接下来的行为，写起来也非常简单，5个一共用了半个小时左右，缺的还是思路啊

代码如下

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>仅在chrome下正常显示</title>
  6. <style>
  7. *{ margin:0; padding:0;}
  8. .css_content{
  9.     width:300px; height:300px; float:left; display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; border:1px solid #ccc;
  10. }
  11.  
  12. /* NO.1 */
  13. .loading1{
  14.     width:100px;
  15.     height:100px;
  16.     margin:50px;
  17.     border:10px solid #ccc;
  18.     border-left-color:#000;
  19.     border-radius:50%;
  20.     -webkit-animation: loading1 1s linear infinite;
  21. }
  22. @-webkit-keyframes loading1{
  23.     to { -webkit-transform:rotate(1turn)};
  24. }
  25.  
  26. /* NO.2 */
  27. .loading2{ width:150px; height:50px; text-align:center;} 
  28.  
  29. .loading2 span{
  30.      display:inline-block;
  31.      width:6px;
  32.      height:100%;
  33.      background:green;
  34.      -webkit-animation: loading2 1.2s infinite ease-in-out ;
  35. }
  36. /* 下面的样式，如果不加上.loading2 则不生效 */
  37. .loading2 .line2{
  38.     -webkit-animation-delay:-1.1s;
  39. }
  40. .loading2 .line3{
  41.     -webkit-animation-delay:-1.0s;
  42. }
  43.  
  44. .loading2 .line4{
  45.     -webkit-animation-delay:-0.9s;
  46. }
  47.  
  48. .loading2 .line5{
  49.     -webkit-animation-delay:-0.8s;
  50. }
  51. @-webkit-keyframes loading2{
  52.      0%,40%,100%{
  53.     -webkit-transform:scaleY(.4);
  54.   }
  55.   20%{
  56.     -webkit-transform:scaleY(1);
  57.   }
  58. }
  59.  
  60. /* loading3 */
  61.  
  62. .loading3{ width:50px; height:50px; border:2px solid #666; border-radius:50%; border-left-color:transparent; border-right-color:transparent;
  63.     -webkit-animation:loading3 2s infinite;
  64. }
  65. @-webkit-keyframes loading3{
  66.     0% {
  67.         -webkit-transform:rotate(0deg);
  68.     }
  69.     50%{
  70.         -webkit-transform:rotate(360deg);
  71.     }
  72.     100% {
  73.         -webkit-transform:rotate(0deg);
  74.     }
  75. }
  76.  
  77. /* loading4 */
  78. .loading4{ width:200px; height:40px; font-family:"微软雅黑"; text-align:center;}
  79. .loading4 span{ display:inline-block;
  80.     -webkit-animation:loading4 1.4s infinite ease-in-out;
  81. }
  82. .loading4 .str1{ -webkit-animation-delay:-1.3s;}
  83. .loading4 .str2{ -webkit-animation-delay:-1.2s;}
  84. .loading4 .str3{ -webkit-animation-delay:-1.1s;}
  85. .loading4 .str4{ -webkit-animation-delay:-1.0s;}
  86. .loading4 .str5{ -webkit-animation-delay:-.9s;}
  87. .loading4 .str6{ -webkit-animation-delay:-.8s;}
  88. .loading4 .str7{ -webkit-animation-delay:-.7s;}
  89.  
  90. @-webkit-keyframes loading4{
  91.     0%,40%,100% {
  92.         -webkit-transform:translateY(0px);
  93.     }
  94.     20% {
  95.         -webkit-transform:translateY(-20px);
  96.     }
  97. }
  98.  
  99. /* N0.5 */
  100. .loading5{ width:50px; height:50px; position:relative; -webkit-animation:loading5 1.5s linear infinite;}
  101. .loading5 span{ position:absolute; left:50%; top:50%; width:3px; height:10px; display:block; -webkit-transform-origin:center -8px;}
  102. .loading5 .b1{  -webkit-transform:translate(-50%,8px) rotate(-45deg); background-color:#000;}
  103. .loading5 .b2{  -webkit-transform:translate(-50%,8px) rotate(-90deg); background-color:#222;}
  104. .loading5 .b3{  -webkit-transform:translate(-50%,8px) rotate(-135deg); background-color:#444;}
  105. .loading5 .b4{  -webkit-transform:translate(-50%,8px) rotate(-180deg); background-color:#666;}
  106. .loading5 .b5{  -webkit-transform:translate(-50%,8px) rotate(-225deg); background-color:#888;}
  107. .loading5 .b6{  -webkit-transform:translate(-50%,8px) rotate(-270deg); background-color:#aaa;}
  108. .loading5 .b7{  -webkit-transform:translate(-50%,8px) rotate(-315deg); background-color:#ccc;}
  109. .loading5 .b8{  -webkit-transform:translate(-50%,8px) rotate(-360deg); background-color:#eee;}
  110.  
  111. @-webkit-keyframes loading5{
  112.     to{
  113.         -webkit-transform:rotate(1turn);
  114.     }
  115. }
  116.  
  117. </style>
  118. </head>
  119.  
  120. <body>
  121.  
  122. <!-- NO.1 -->
  123. <div class="css_content">
  124.     <div class="loading1"></div>
  125. </div>
  126.  
  127. <!-- NO.2 -->
  128. <div class="css_content" style="background-color:#333;">
  129.     <div class="loading2">
  130.         <span class="line1"></span>
  131.         <span class="line2"></span>
  132.         <span class="line3"></span>
  133.         <span class="line4"></span>
  134.         <span class="line5"></span>
  135.     </div>
  136. </div>
  137. <!-- NO.3 -->
  138. <div class="css_content" style="background-color:#FFEC73;">
  139.     <div class="loading3"></div>
  140. </div>
  141.  
  142. <!-- NO.4 -->
  143. <div class="css_content">
  144.     <div class="loading4">
  145.         <span class="str1">L</span>
  146.         <span class="str2">o</span>
  147.         <span class="str3">a</span>
  148.         <span class="str4">d</span>
  149.         <span class="str5">i</span>
  150.         <span class="str6">n</span>
  151.         <span class="str7">g</span>
  152.     </div>
  153. </div>
  154.  
  155. <!-- NO.5 -->
  156. <div class="css_content">
  157.     <div class="loading5">
  158.         <span class="b1"></span>
  159.         <span class="b2"></span>
  160.         <span class="b3"></span>
  161.         <span class="b4"></span>
  162.         <span class="b5"></span>
  163.         <span class="b6"></span>
  164.         <span class="b7"></span>
  165.         <span class="b8"></span>
  166.     </div>
  167. </div>
  168.  
  169. </body>
  170. </html>

利用css3制作的几个loading图的更多相关文章

  1. 利用CSS3制作淡入淡出动画效果

    CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...

  2. 利用CSS3制作网页动画

    如何在网页中实现动画效果动态图片 flashjavascriptcss3变形是一些效果的集合如平移 旋转 缩放 倾斜效果每个效果都可以称为变形(transfrom) 它们可以分别操控元素发生平移.旋转 ...

  3. 利用css3制作毛玻璃的效果

    忙里偷闲,最近又在看许多比较酷炫的效果.现在基于jquery的插件比较多,但是很多插件的兼容性不是太好,所以原生的才是王道.在日常当中,毛玻璃已经不常见了,那是一个很久远年代的东西了.诺,下面就是毛玻 ...

  4. 第九章 利用CSS3制作网页动画

    一.CSS3变形transform 1.平移:translate(x,y) translateX(x) translateY(y) 注意:如果想只向X轴平移那么可以translateX,如果想只向X轴 ...

  5. 用css3制作旋转加载动画的几种方法

    以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...

  6. 利用box-shadow制作loading图

    我们见过很多利用css3做的loading图,像下面这种应该是很常见的.通常制作这种loading,我们会一个标签对应一个圆,八个圆就要八个标签.但是这种做法很浪费资源.我们可以只用一个标签,然后利用 ...

  7. 利用CSS3实现图片无间断轮播图的实现思路

    前言:图片轮播效果现在在各大网站都是非常普遍的,以前我们都是通过postion的left or right来控制dom的移动,这里我要说的是利用css3来制作轮播!相比以前通过postion来移动do ...

  8. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  9. 使用HTML5制作loading图

    昨天发了一篇使用HTML5 canvas写的时钟的文章,今天发一篇关于使用HTML5制作loading图的文章. <!DOCTYPE html> <html> <head ...

随机推荐

  1. Python自动化之django视图

    视图 1.获取用户请求数据 request.GET request.POST request.FILES PS: GET:获取数据 POST:提交数据 request其他方法详解:http://dja ...

  2. 守护神 Supervisor

    参考: http://linbo.github.io/2013/04/04/supervisor/ http://www.restran.net/2015/10/04/supervisord-tuto ...

  3. 校园网搭建HUSTOJ记录

    上学期和网管中心的老师说过很多次--要在校园网上搭OJ,当时那边老师说要等"虚拟化搞好了以后才能搭".直到上周,终于在校园网上申请到了一个虚拟主机,4核,10G内存,100G硬盘, ...

  4. realloc的使用误区

    C语言 realloc() 函数位于 stdlib.h 头文件中,原型为: void *realloc(void *ptr, size_t size); realloc() 会将 ptr 所指向的内存 ...

  5. python习题 （1）：login

    #!/uer/bin/env python # _*_ coding: utf-8 _*_ import sys retry_limit = 3 retry_count = 0 account_fil ...

  6. sql 删除表中某字段的重复数据

    重复字段:BarCode SELECT * FROM dbo.AssetBarCode WHERE BarCode IN (SELECT BarCode FROM dbo.AssetBarCode G ...

  7. Linux启动过程详解

    Linux启动过程详解 附上两张图,加深记忆 图1: 图2: 第一张图比较简洁明了,下面对第一张图的步骤进行详解: 加载BIOS 当你打开计算机电源,计算机会首先加载BIOS信息,BIOS信息是如此的 ...

  8. LeetCode之371. Sum of Two Integers

    ---------------------------------- 使用位运算实现加法: a^b 加不同部分(a&b)<<1 加相同部分递归相加 AC代码: public cla ...

  9. python常见数据类型

    字符串 字符串是 Python 中最常用的数据类型.我们可以使用引号('或")来创建字符串. 创建字符串烦人过程其实很简单,只需为变量分配一个值即可.例如: var = 'Hello Wor ...

  10. jquery插件开发继承了jQuery高级编程思路

    要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...