亚博app

CSS3绘制8种超炫的加载动画

旋转的加载图片

当服务器的带宽不太够或者跨运营商访问导致网速没保证时,图片加载很慢,看着都让人着急。如果能在网站的图片加载完成之前先显示加载动画,至少让访客感觉舒服点。小卓在做网站和前端网页设计时,经常会逛前端开发网站学习百家之长。偶尔发现了一组非常炫酷的CSS3加载动画,遂迫不及待的做个Demo保存下来,形成了这篇CSS3绘制8种超炫的加载动画

下面的这8个加载动画用到了CSS3的旋转transform属性,颜色透明度设置和伪元素操作等CSS技术。奇妙的组合,灵活的运用,产生了意想不到的动态效果。

1.上下起伏波动的加载动画:

css3_demo_01

  1. #loader1,
  2.   #loader1:before,
  3.   #loader1:after {
  4.      background#f2fa08;
  5.      -webkit-animation: load1 1s infinite ease-in-out;
  6.      animation: load1 1s infinite ease-in-out;
  7.      width: 1em;
  8.      height: 4em;
  9.    }
  10.    #loader1:before,
  11.    #loader1:after {
  12.      positionabsolute;
  13.      top: 0;
  14.      content;
  15.    }
  16.    #loader1:before {
  17.      left: -1.5em;
  18.    }
  19.    #loader1 {
  20.      text-indent: -9999em;
  21.      margin50px 50px;
  22.      positionrelative;
  23.      floatleft;
  24.      font-size11px;
  25.      -webkit-animation-delay: 0.16s;
  26.      animation-delay: 0.16s;
  27.    }
  28.    #loader1:after {
  29.      left: 1.5em;
  30.      -webkit-animation-delay: 0.32s;
  31.      animation-delay: 0.32s;
  32.    }
  33.    @-webkit-keyframes load1 {
  34.      0%,
  35.      80%,
  36.      100% {
  37.        box-shadow: 0 0 #f2fa08;
  38.        height: 4em;
  39.      }
  40.      40% {
  41.        box-shadow: 0 -2em #f2fa08;
  42.        height: 5em;
  43.      }
  44.    }
  45.    @keyframes load1 {
  46.      0%,
  47.      80%,
  48.      100% {
  49.        box-shadow: 0 0 #f2ff08;
  50.        height: 4em;
  51.      }
  52.      40% {
  53.        box-shadow: 0 -2em #f2ff08;
  54.        height: 5em;
  55.      }
  56.    }

2.类似弹簧效果的旋转加载动画:

此处用到CSS3的transform属性

CSS3的变形(transform)属性让元素在一个坐标系统中变形。这个属性包含一系列变形函数,可以移动、旋转和缩放元素。
transform属性可用于内联元素和块元素。其默认值为none,表示不元素不进行变形。transform另一个属性值是一系列的<transform-function>。<transform-function>表示一个或多个变形函数,以空格分开;我们可以同时对一个元素进行变形的多种属性操作,如rotate、scale、translate等。以往我们叠加效果都是用逗号(“,”)隔开,但在transform中使用多个transform-function时却需要有空格隔开。
● 2D transform常用的transform-function的功能:
transform属性3D变形(3D transform)模块的一部分,也就是说所有的2D变形函数也包含于3D变形规范中。如此一来,CSS3变形中的函数根据不同的规范略有不同,下面列出的是变形中的2D和3D常用变形函数的功能,简单说明如下:

translate():YONGLAIYIDONGYUANSU,KEYIGENJUXZHOUHEYZHOUZUOBIAOZHONGXINDINGWEIYUANSUWEIZHI。ZAICIJICHUSHANGYOULIANGGEKUOZHANHANSHU:translateX()HEtranslateY()。

scale():YONGLAISUOXIAOHUOFANGDAYUANSU,KEYISHIYONGYUANSUCHICUNFASHENGBIANHUA。ZAICIJICHUSHANGYOULIANGGEKUOZHANHANSHU:scaleX()HEscaleY()。            rotate():YONGLAIXUANZHUANYUANSU。

skew():YONGLAIRANGYUANSUQINGXIE。ZAICIJICHUSHANGYOULIANGGEKUOZHANHANSHU:skewX()HEskewY()。

matrix():定义矩阵变形,基于X轴和Y轴坐标重新定位元素位置。
● 3D transform常用的transform-function的功能:
translate3d():移元素元素,用来指定一个3D变形移动位移量。
translate():指定3D位移在Z轴的位移量。
scale3d():用来缩放一个元素。
scaleZ():指定Z轴的缩放向量。
rotate3d():指定元素具有一个三维旋转的角度。
rotateX()、rotateY()和rotateZ():让元素具有一个旋转角度。
perspective():指定一个透视投影矩阵。
matrix3d():定义矩阵变形。

● transform-origin属性用来设置变换的原点。示例中代表旋转中心。

css3_demo_02

  1. #loader2,
  2.    #loader2:before,
  3.    #loader2:after {
  4.      border-radius: 50%;
  5.    }
  6.    #loader2:before,
  7.    #loader2:after {
  8.       positionabsolute;
  9.       content;
  10.    }
  11.    #loader2:before {
  12.      width: 5.2em;
  13.      height: 10.2em;
  14.      background#ffffff;
  15.      border-radius: 10.2em 0 0 10.2em;
  16.      top: -0.1em;
  17.      left: -0.1em;
  18.      -webkit-transform-origin: 5.2em 5.1em;
  19.      transform-origin: 5.2em 5.1em;
  20.      -webkit-animation: load2 2s infinite ease 1.5s;
  21.      animation: load2 2s infinite ease 1.5s;
  22.     }
  23.     #loader2 {
  24.       font-size11px;
  25.       text-indent: -99999em;
  26.       margin20px 20px;
  27.       positionrelative;
  28.       floatleft;
  29.       width: 10em;
  30.       height: 10em;
  31.       box-shadow: inset 0 0 0 1em #ff0f88;
  32.     }
  33.     #loader2:after {
  34.       width: 5.2em;
  35.       height: 10.2em;
  36.       background#ffffff;
  37.       border-radius: 0 10.2em 10.2em 0;
  38.       top: -0.1em;
  39.       left: 5.1em;
  40.       -webkit-transform-origin: 0px 5.1em;
  41.       transform-origin: 0px 5.1em;
  42.       -webkit-animation: load2 2s infinite ease;
  43.       animation: load2 2s infinite ease;
  44.      }
  45.      @-webkit-keyframes load2 {
  46.         0% {
  47.           -webkit-transform: rotate(0deg);
  48.           transform: rotate(0deg);
  49.         }
  50.         100% {
  51.           -webkit-transform: rotate(360deg);
  52.           transform: rotate(360deg);
  53.         }
  54.     }
  55.     @keyframes load2 {
  56.        0% {
  57.          -webkit-transform: rotate(0deg);
  58.          transform: rotate(0deg);
  59.        }
  60.        100% {
  61.          -webkit-transform: rotate(360deg);
  62.          transform: rotate(360deg);
  63.        }
  64.    }

3.大小不一的粒子旋转加载动画:

css3_demo_03

  1. #load3,
  2.   #loader3 {
  3.    font-size20px;
  4.    margin80px 50px;
  5.    floatleft;
  6.    width: 1em;
  7.    height: 1em;
  8.    border-radius: 50%;
  9.    positionrelative;
  10.    text-indent: -9999em;
  11.    -webkit-animation: load3 1.3s infinite linear;
  12.    animation: load3 1.3s infinite linear;
  13.   }
  14.   @-webkit-keyframes load3 {
  15.      0%,
  16.      100% {
  17.        box-shadow: 0em -3em 0 0.2em #aaff00, 2em -2em 0 0em #aaff00,
  18.                    3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,
  19.                    0em 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,
  20.                    -3em 0 0 -0.5em #aaff00, -2em -2em 0 0em #aaff00;
  21.      }
  22.      12.5% {
  23.        box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 0.2em #aaff00,
  24.                    3em 0 0 0 #aaff00, 2em 2em 0 -0.5em #aaff00,
  25.                    0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,
  26.                    -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;
  27.      }
  28.      25% {
  29.         box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 0em #aaff00,
  30.                     3em 0 0 0.2em #aaff00, 2em 2em 0 0 #aaff00,
  31.                     0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,
  32.                     -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;
  33.      }
  34.      37.5% {
  35.          box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,
  36.                      3em 0 0 0 #aaff00, 2em 2em 0 0.2em #aaff00,
  37.                      0 3em 0 0 #aaff00, -2em 2em 0 -0.5em #aaff00,
  38.                      -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;
  39.     }
  40.     50% {
  41.         box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,
  42.                     3em 0 0 -0.5em #aaff00, 2em 2em 0 0 #aaff00,
  43.                     0 3em 0 0.2em #aaff00, -2em 2em 0 0 #aaff00,
  44.                     -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;
  45.     }
  46.     62.5% {
  47.         box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,
  48.                     3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,
  49.                     0 3em 0 0 #aaff00, -2em 2em 0 0.2em #aaff00,
  50.                     -3em 0 0 0 #aaff00, -2em -2em 0 -0.5em #aaff00;
  51.     }
  52.     75% {
  53.        box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,
  54.                    3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,
  55.                    0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,
  56.                    -3em 0 0 0.2em #aaff00, -2em -2em 0 0 #aaff00;
  57.     }
  58.     87.5% {
  59.        box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 -0.5em #aaff00,
  60.                    3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,
  61.                    0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,
  62.                    -3em 0 0 0 #aaff00, -2em -2em 0 0.2em #aaff00;
  63.     }
  64.   }
  65.   @keyframes load3 {
  66.     0%,
  67.     100% {
  68.         box-shadow: 0 -3em 0 0.2em #aaff00, 2em -2em 0 0 #aaff00,
  69.                     3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,
  70.                     0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,
  71.                     -3em 0 0 -0.5em #aaff00, -2em -2em 0 0 #aaff00;
  72.     }
  73.     12.5% {
  74.         box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 0.2em #aaff00,
  75.                     3em 0 0 0 #aaff00, 2em 2em 0 -0.5em #aaff00,
  76.                     0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,
  77.                     -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;
  78.     }
  79.     25% {
  80.         box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 0 #aaff00,
  81.                     3em 0 0 0.2em #aaff00, 2em 2em 0 0 #aaff00,
  82.                     0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,
  83.                     -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;
  84.     }
  85.     37.5% {
  86.        box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,
  87.                    3em 0 0 0 #aaff00, 2em 2em 0 0.2em #aaff00,
  88.                    0 3em 0 0 #aaff00, -2em 2em 0 -0.5em #aaff00,
  89.                    -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;
  90.      }
  91.      50% {
  92.         box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,
  93.                     3em 0 0 -0.5em #aaff00, 2em 2em 0 0 #aaff00,
  94.                     0 3em 0 0.2em #aaff00, -2em 2em 0 0 #aaff00,
  95.                     -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;
  96.      }
  97.      62.5% {
  98.          box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,
  99.                      3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,
  100.                      0 3em 0 0 #aaff00, -2em 2em 0 0.2em #aaff00,
  101.                      -3em 0 0 0 #aaff00, -2em -2em 0 -0.5em #aaff00;
  102.     }
  103.     75% {
  104.         box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,
  105.                     3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,
  106.                     0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,
  107.                     -3em 0 0 0.2em #aaff00, -2em -2em 0 0 #aaff00;
  108.      }
  109.      87.5% {
  110.          box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 -0.5em #aaff00,
  111.                      3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,
  112.                      0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,
  113.                      -3em 0 0 0 #aaff00, -2em -2em 0 0.2em #aaff00;
  114.     }
  115.   }

4.蛇形旋转加载动画:

css3_demo_04

  1. #loader4 {
  2.     font-size10px;
  3.     margin20px 20px;
  4.     floatleft;
  5.     text-indent: -9999em;
  6.     width: 11em;
  7.     height: 11em;
  8.     border-radius: 50%;
  9.     background#ffffff;
  10.     background: -moz-linear-gradient(left#ff00ff 10%, rgba(255, 255, 255, 0) 42%);
  11.     background: -webkit-linear-gradient(left#ff00ff 10%, rgba(255, 255, 255, 0) 42%);
  12.     background: -o-linear-gradient(left#ff00ff 10%, rgba(255, 255, 255, 0) 42%);
  13.     background: -ms-linear-gradient(left#ff00ff 10%, rgba(255, 255, 255, 0) 42%);
  14.     background: linear-gradient(to rightright#ff00ff 10%, rgba(255, 255, 255, 0) 42%);
  15.     positionrelative;
  16.     -webkit-animation: load4 1.4s infinite linear;
  17.     animation: load4 1.4s infinite linear;
  18.   }
  19.   #loader4:before {
  20.     width: 50%;
  21.     height: 50%;
  22.     background#ff00ff;
  23.     border-radius: 100% 0 0 0;
  24.     positionabsolute;
  25.     top: 0;
  26.     left: 0;
  27.     content;
  28.   }
  29.   #loader4:after {
  30.     background#ffffff;
  31.     width: 75%;
  32.     height: 75%;
  33.     border-radius: 50%;
  34.     content;
  35.     marginauto;
  36.     positionabsolute;
  37.     top: 0;
  38.     left: 0;
  39.     bottombottom: 0;
  40.     rightright: 0;
  41.   }
  42.   @-webkit-keyframes load4 {
  43.     0% {
  44.       -webkit-transform: rotate(0deg);
  45.       transform: rotate(0deg);
  46.     }
  47.     100% {
  48.       -webkit-transform: rotate(360deg);
  49.       transform: rotate(360deg);
  50.     }
  51.   }
  52.   @keyframes load4 {
  53.     0% {
  54.       -webkit-transform: rotate(0deg);
  55.       transform: rotate(0deg);
  56.     }
  57.     100% {
  58.       -webkit-transform: rotate(360deg);
  59.       transform: rotate(360deg);
  60.     }
  61.   }

 5.大小相同,颜色深浅不一的粒子旋转动画:

TASHIYUNYONGCSS3DEborder-radiusYUANJIAOSHUXING、box-shadowYINYINGSHUXINGDENGSHUXINGZHIZUOCHULAIDE。

animationSHUXINGSHEZHIDECANSHU:

● SHEZHIDUIXIANGSUOYINGYONGDEDONGHUAMINGCHENG:load5。

● SHEZHIDUIXIANGDONGHUADECHIXUSHIJIAN:1.1s。

● SHEZHIDUIXIANGDONGHUADEGUODULEIXING:

ease:DONGHUAYIDISUKAISHI,RANHOUJIAKUAI,ZAIJIESHUQIANBIANMAN。

linear:YUNSU。

ease-in:DONGHUAYIDISUKAISHI。

ease-out:DONGHUAYIDISUJIESHU。

ease-in-out:DONGHUAYIDISUKAISHIHEJIESHU,XIANGDUIYUeaseHUANMAN,SUDUGENGJUNYUN。

step-start:ANkeyframesSHEZHIZHUZHENXIANSHI,DIYIZHENWEIkeyframesSHEZHIDEDIYIZHEN。

step-end:ANkeyframesSHEZHIZHUZHENXIANSHI,DIYIZHENWEIYANGSHIDECHUSHIZHI。

steps(<number>[,
[ start | end ] ]?):把keyframes里设置的一帧等分为几帧,start为第一次显示第一帧,end第一次显示样式的初始值,例如:steps(4,start)。

cubic-bezier(<number>, <number>, <number>, <number>):在 cubic-bezier 函数中自己的值。可能的值是从 0 到
1 的数值。贝兹曲线限制了首尾两控制点的位置,通过调整中间两控制点的位置可以灵活得到常用的动画效果。

● SHEZHIDUIXIANGDONGHUADEXUNHUANCISHU:infinite(WUXIANXUNHUAN)。

JIANGDONGHUAYUNXINGZHENGGEGUOCHENGDEFENWEI0%,12.5%,25%,37.5%,50%,62.5%,75%,87.5%,100%ZHEI8GEJIEDUAN,ZAIBUTONGDEJIEDUANYUNYONGYANSEDETOUMINGDUZHIZUOCHUBUTONGDEYINYINGXIAOGUO。

css3_demo_05

  1. #load5,
  2. #loader5 {
  3.   margin80px 50px;
  4.   floatleft;
  5.   font-size25px;
  6.   width: 1em;
  7.   height: 1em;
  8.   border-radius: 50%;
  9.   positionrelative;
  10.   text-indent: -9999em;
  11.   -webkit-animation: load5 1.1s infinite ease;
  12.   animation: load5 1.1s infinite ease;
  13. }
  14. @-webkit-keyframes load5 {
  15.   0%,
  16.   100% {
  17.      box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 1), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
  18.                  2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
  19.                  0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),
  20.                  -2.6em 0 0 0 rgba(128, 0, 255, 0.5), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7);
  21.   }
  22.   12.5% {
  23.      box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.7), 1.8em -1.8em 0 0 rgba(128, 0, 255, 1),
  24.                  2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
  25.                  0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),
  26.                  -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.5);
  27.   }
  28.   25% {
  29.      box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.5), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7),
  30.                  2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
  31.                  0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),
  32.                  -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
  33.   }
  34.   37.5% {
  35.      box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0em rgba(128, 0, 255, 0.5),
  36.                  2.5em 0em 0 0 rgba(128, 0, 255, 0.7), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
  37.                  0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),
  38.                  -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
  39.   }
  40.   50% {
  41.      box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
  42.                  2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.7),
  43.                  0 2.5em 0 0 rgba(128, 0, 255, 1), -1.8em 1.8em 0 0 rgba(128, 255, 0, 0.2),
  44.                  -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
  45.   }
  46.   62.5% {
  47.       box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
  48.                   2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.5),
  49.                   0 2.5em 0 0 rgba(128, 0, 255, 0.7), -1.8em 1.8em 0 0 rgba(128, 0, 255, 1),
  50.                   -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
  51.   }
  52.   75% {
  53.       box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
  54.                   2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
  55.                   0 2.5em 0 0 rgba(128, 0, 255, 0.5), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.7),
  56.                   -2.6em 0 0 0 rgba(128, 0, 255, 1), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
  57.   }
  58.   87.5% {
  59.       box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
  60.                   2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
  61.                   0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.5),
  62.                   -2.6em 0 0 0 rgba(128, 0, 255, 0.7), -1.8em -1.8em 0 0 rgba(128, 0, 255, 1);
  63.   }
  64. }
  65. @keyframes load5 {
  66.   0%,
  67.   100% {
  68.      box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 1), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
  69.                  2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
  70.                  0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),
  71.                  -2.6em 0 0 0 rgba(128, 0, 255, 0.5), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7);
  72.   }
  73.   12.5% {
  74.      box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.7), 1.8em -1.8em 0 0 rgba(128, 0, 255, 1),
  75.                  2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
  76.                  0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),
  77.                  -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.5);
  78.   }
  79.   25% {
  80.      box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.5), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7),
  81.                  2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
  82.                  0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),
  83.                  -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
  84.   }
  85.   37.5% {
  86.      box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0em rgba(128, 0, 255, 0.5),
  87.                  2.5em 0em 0 0 rgba(128, 0, 255, 0.7), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
  88.                  0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),
  89.                  -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
  90.   }
  91.   50% {
  92.      box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
  93.                  2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.7),
  94.                  0 2.5em 0 0 rgba(128, 0, 255, 1), -1.8em 1.8em 0 0 rgba(128, 255, 0, 0.2),
  95.                  -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
  96.   }
  97.   62.5% {
  98.       box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
  99.                   2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.5),
  100.                   0 2.5em 0 0 rgba(128, 0, 255, 0.7), -1.8em 1.8em 0 0 rgba(128, 0, 255, 1),
  101.                   -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
  102.   }
  103.   75% {
  104.       box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
  105.                   2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
  106.                   0 2.5em 0 0 rgba(128, 0, 255, 0.5), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.7),
  107.                   -2.6em 0 0 0 rgba(128, 0, 255, 1), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
  108.   }
  109.   87.5% {
  110.       box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
  111.                   2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
  112.                   0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.5),
  113.                   -2.6em 0 0 0 rgba(128, 0, 255, 0.7), -1.8em -1.8em 0 0 rgba(128, 0, 255, 1);
  114.   }
  115. }

 6.粒子旋转伸缩加载动画:

YUNYONGCSS3DEXUANZHUANTransformSHUXINGHEDONGHUADEZHIXINGBAIFENBIZHIZUOERCHENG。

css3_demo_06

  1.  #loader6 {
  2.   margin60px 50px;
  3.   floatleft;
  4.   font-size90px;
  5.   text-indent: -9999em;
  6.   overflowhidden;
  7.   width: 1em;
  8.   height: 1em;
  9.   border-radius: 50%;
  10.   positionrelative;
  11.   -webkit-animation: load6 1.7s infinite ease;
  12.   animation: load6 1.7s infinite ease;
  13.  }
  14.  @-webkit-keyframes load6 {
  15.     0% {
  16.       -webkit-transform: rotate(0deg);
  17.       transform: rotate(0deg);
  18.       box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
  19.                   -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
  20.                   -0.11em -0.83em 0 -0.477em #ff0000;
  21.       }
  22.     5%,
  23.     95% {
  24.       box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
  25.                   -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
  26.                   -0.11em -0.83em 0 -0.477em #ff0000;
  27.     }
  28.     30% {
  29.       box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.51em -0.66em 0 -0.42em #ff0000,
  30.                   -0.75em -0.36em 0 -0.44em #ff0000, -0.83em -0.03em 0 -0.46em #ff0000,
  31.                   -0.81em 0.21em 0 -0.477em #ff0000;
  32.     }
  33.     55% {
  34.       box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.29em -0.78em 0 -0.42em #ff0000,
  35.                   -0.43em -0.72em 0 -0.44em #ff0000, -0.52em -0.65em 0 -0.46em #ff0000,
  36.                   -0.57em -0.61em 0 -0.477em #ff0000;
  37.     }
  38.     100% {
  39.       -webkit-transform: rotate(360deg);
  40.       transform: rotate(360deg);
  41.       box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
  42.                   -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
  43.                   -0.11em -0.83em 0 -0.477em #ff0000;
  44.     }
  45.  }
  46. @keyframes load6 {
  47.   0% {
  48.     -webkit-transform: rotate(0deg);
  49.     transform: rotate(0deg);
  50.     box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
  51.                 -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
  52.                 -0.11em -0.83em 0 -0.477em #ff0000;
  53.     }
  54.   5%,
  55.   95% {
  56.     box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
  57.                 -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
  58.                 -0.11em -0.83em 0 -0.477em #ff0000;
  59.   }
  60.   30% {
  61.     box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.51em -0.66em 0 -0.42em #ff0000,
  62.                 -0.75em -0.36em 0 -0.44em #ff0000, -0.83em -0.03em 0 -0.46em #ff0000,
  63.                 -0.81em 0.21em 0 -0.477em #ff0000;
  64.   }
  65.   55% {
  66.     box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.29em -0.78em 0 -0.42em #ff0000,
  67.                 -0.43em -0.72em 0 -0.44em #ff0000, -0.52em -0.65em 0 -0.46em #ff0000,
  68.                 -0.57em -0.61em 0 -0.477em #ff0000;
  69.   }
  70.   100% {
  71.     -webkit-transform: rotate(360deg);
  72.     transform: rotate(360deg);
  73.     box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
  74.                 -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
  75.                 -0.11em -0.83em 0 -0.477em #ff0000;
  76.   }
  77. }

7.横向粒子变动加载动画:

CICHUYONGDAOLECSS3DONGHUAanimationSHUXINGDEanimation-fill-modeSHUXINGHEanimation-delaySHUXING。

● animation-fill-modeSHUXINGGUIDINGDONGHUAZAIBOFANGZHIQIANHUOZHIHOU,QIDONGHUAXIAOGUOSHIFOUKEJIAN。

none:BUGAIBIANMORENXINGWEI。

forwards:DANGDONGHUAWANCHENGHOU,BAOCHIZUIHOUYIGESHUXINGZHI(ZAIZUIHOUYIGEGUANJIANZHENZHONGDINGYI)。

backwards:ZAIanimation-delaySUOZHIDINGDEYIDUANSHIJIANNEI,ZAIDONGHUAXIANSHIZHIQIAN,YINGYONGKAISHISHUXINGZHI(ZAIDIYIGEGUANJIANZHENZHONGDINGYI)。

both: XIANGQIANHEXIANGHOUTIANCHONGMOSHIDOUBEIYINGYONG。

● animation-delaySHUXINGDINGYIDONGHUAHESHIKAISHI。GAISHUXINGYUNXUFUZHI,SHILIZHONGYANCHI0.16sZHIXINGDONGHUA。

css3_demo_07

  1. #loader7:before,
  2. #loader7:after,
  3. #loader7 {
  4.   border-radius: 50%;
  5.   width: 2.5em;
  6.   height: 2.5em;
  7.   -webkit-animation-fill-mode: both;
  8.   animation-fill-mode: both;
  9.   -webkit-animation: load7 1.8s infinite ease-in-out;
  10.   animation: load7 1.8s infinite ease-in-out;
  11. }
  12. #loader7 {
  13.   margin60px 50px;
  14.   floatleft;
  15.   font-size10px;
  16.   positionrelative;
  17.   text-indent: -9999em;
  18.   -webkit-animation-delay: 0.16s;
  19.   animation-delay: 0.16s;
  20. }
  21. #loader7:before {
  22.   left: -3.5em;
  23. }
  24. #loader7:after {
  25.   left: 3.5em;
  26.   -webkit-animation-delay: 0.32s;
  27.   animation-delay: 0.32s;
  28. }
  29. #loader7:before,
  30. #loader7:after {
  31.   content;
  32.   positionabsolute;
  33.   top: 0;
  34. }
  35. @-webkit-keyframes load7 {
  36.   0%,
  37.   80%,
  38.   100% {
  39.     box-shadow: 0 2.5em 0 -1.3em #000000;
  40.   }
  41.   40% {
  42.     box-shadow: 0 2.5em 0 0 #000000;
  43.   }
  44. }
  45. @keyframes load7 {
  46.   0%,
  47.   80%,
  48.   100% {
  49.     box-shadow: 0 2.5em 0 -1.3em #000000;
  50.   }
  51.   40% {
  52.     box-shadow: 0 2.5em 0 0 #000000;
  53.   }
  54. }

8.圆环旋转加载动画:

css3_demo_08

  1. #loader8 {
  2.   margin30px 50px;
  3.   floatleft;
  4.   font-size10px;
  5.   positionrelative;
  6.   text-indent: -9999em;
  7.   border-top: 1.1em solid rgba(255, 128, 0, 0.2);
  8.   border-right: 1.1em solid rgba(255, 128, 0, 0.2);
  9.   border-bottom: 1.1em solid rgba(255, 128, 0, 0.2);
  10.   border-left: 1.1em solid rgba(255, 128, 0, 1);
  11.   -webkit-animation: load8 1.1s infinite linear;
  12.   animation: load8 1.1s infinite linear;
  13. }
  14. #loader8,
  15. #loader8:after {
  16.   border-radius: 50%;
  17.   width: 10em;
  18.   height: 10em;
  19. }
  20. @-webkit-keyframes load8 {
  21.   0% {
  22.     -webkit-transform: rotate(0deg);
  23.     transform: rotate(0deg);
  24.   }
  25.   100% {
  26.     -webkit-transform: rotate(360deg);
  27.     transform: rotate(360deg);
  28.   }
  29. }
  30. @keyframes load8 {
  31.   0% {
  32.     -webkit-transform: rotate(0deg);
  33.     transform: rotate(0deg);
  34.   }
  35.   100% {
  36.     -webkit-transform: rotate(360deg);
  37.     transform: rotate(360deg);
  38.   }
  39. }

完整的示例Demo:

css3常用图案效果

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset=“UTF-8”>
  5.   <title>CSS3绘制加载动画</title>
  6.   <style>
  7.   #loader1,
  8.   #loader1:before,
  9.   #loader1:after {
  10.      background: #f2fa08;
  11.      -webkit-animation: load1 1s infinite ease-in-out;
  12.      animation: load1 1s infinite ease-in-out;
  13.      width: 1em;
  14.      height: 4em;
  15.    }
  16.    #loader1:before,
  17.    #loader1:after {
  18.      position: absolute;
  19.      top: 0;
  20.      content: ”;
  21.    }
  22.    #loader1:before {
  23.      left: -1.5em;
  24.    }
  25.    #loader1 {
  26.      text-indent: -9999em;
  27.      margin: 50px 50px;
  28.      position: relative;
  29.      float: left;
  30.      font-size: 11px;
  31.      -webkit-animation-delay: 0.16s;
  32.      animation-delay: 0.16s;
  33.    }
  34.    #loader1:after {
  35.      left: 1.5em;
  36.      -webkit-animation-delay: 0.32s;
  37.      animation-delay: 0.32s;
  38.    }
  39.    @-webkit-keyframes load1 {
  40.      0%,
  41.      80%,
  42.      100% {
  43.        box-shadow: 0 0 #f2fa08;
  44.        height: 4em;
  45.      }
  46.      40% {
  47.        box-shadow: 0 -2em #f2fa08;
  48.        height: 5em;
  49.      }
  50.    }
  51.    @keyframes load1 {
  52.      0%,
  53.      80%,
  54.      100% {
  55.        box-shadow: 0 0 #f2ff08;
  56.        height: 4em;
  57.      }
  58.      40% {
  59.        box-shadow: 0 -2em #f2ff08;
  60.        height: 5em;
  61.      }
  62.    }
  63.    #loader2,
  64.    #loader2:before,
  65.    #loader2:after {
  66.      border-radius: 50%;
  67.    }
  68.    #loader2:before,
  69.    #loader2:after {
  70.       position: absolute;
  71.       content: ”;
  72.    }
  73.    #loader2:before {
  74.      width: 5.2em;
  75.      height: 10.2em;
  76.      background: #ffffff;
  77.      border-radius: 10.2em 0 0 10.2em;
  78.      top: -0.1em;
  79.      left: -0.1em;
  80.      -webkit-transform-origin: 5.2em 5.1em;
  81.      transform-origin: 5.2em 5.1em;
  82.      -webkit-animation: load2 2s infinite ease 1.5s;
  83.      animation: load2 2s infinite ease 1.5s;
  84.     }
  85.     #loader2 {
  86.       font-size: 11px;
  87.       text-indent: -99999em;
  88.       margin: 20px 20px;
  89.       position: relative;
  90.       float: left;
  91.       width: 10em;
  92.       height: 10em;
  93.       box-shadow: inset 0 0 0 1em #ff0f88;
  94.     }
  95.     #loader2:after {
  96.       width: 5.2em;
  97.       height: 10.2em;
  98.       background: #ffffff;
  99.       border-radius: 0 10.2em 10.2em 0;
  100.       top: -0.1em;
  101.       left: 5.1em;
  102.       -webkit-transform-origin: 0px 5.1em;
  103.       transform-origin: 0px 5.1em;
  104.       -webkit-animation: load2 2s infinite ease;
  105.       animation: load2 2s infinite ease;
  106.      }
  107.      @-webkit-keyframes load2 {
  108.         0% {
  109.           -webkit-transform: rotate(0deg);
  110.           transform: rotate(0deg);
  111.         }
  112.         100% {
  113.           -webkit-transform: rotate(360deg);
  114.           transform: rotate(360deg);
  115.         }
  116.     }
  117.     @keyframes load2 {
  118.        0% {
  119.          -webkit-transform: rotate(0deg);
  120.          transform: rotate(0deg);
  121.        }
  122.        100% {
  123.          -webkit-transform: rotate(360deg);
  124.          transform: rotate(360deg);
  125.        }
  126.    }
  127.   #load3,
  128.   #loader3 {
  129.    font-size: 20px;
  130.    margin: 80px 50px;
  131.    float: left;
  132.    width: 1em;
  133.    height: 1em;
  134.    border-radius: 50%;
  135.    position: relative;
  136.    text-indent: -9999em;
  137.    -webkit-animation: load3 1.3s infinite linear;
  138.    animation: load3 1.3s infinite linear;
  139.   }
  140.   @-webkit-keyframes load3 {
  141.      0%,
  142.      100% {
  143.        box-shadow: 0em -3em 0 0.2em #aaff00, 2em -2em 0 0em #aaff00,
  144.                    3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,
  145.                    0em 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,
  146.                    -3em 0 0 -0.5em #aaff00, -2em -2em 0 0em #aaff00;
  147.      }
  148.      12.5% {
  149.        box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 0.2em #aaff00,
  150.                    3em 0 0 0 #aaff00, 2em 2em 0 -0.5em #aaff00,
  151.                    0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,
  152.                    -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;
  153.      }
  154.      25% {
  155.         box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 0em #aaff00,
  156.                     3em 0 0 0.2em #aaff00, 2em 2em 0 0 #aaff00,
  157.                     0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,
  158.                     -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;
  159.      }
  160.      37.5% {
  161.          box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,
  162.                      3em 0 0 0 #aaff00, 2em 2em 0 0.2em #aaff00,
  163.                      0 3em 0 0 #aaff00, -2em 2em 0 -0.5em #aaff00,
  164.                      -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;
  165.     }
  166.     50% {
  167.         box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,
  168.                     3em 0 0 -0.5em #aaff00, 2em 2em 0 0 #aaff00,
  169.                     0 3em 0 0.2em #aaff00, -2em 2em 0 0 #aaff00,
  170.                     -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;
  171.     }
  172.     62.5% {
  173.         box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,
  174.                     3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,
  175.                     0 3em 0 0 #aaff00, -2em 2em 0 0.2em #aaff00,
  176.                     -3em 0 0 0 #aaff00, -2em -2em 0 -0.5em #aaff00;
  177.     }
  178.     75% {
  179.        box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,
  180.                    3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,
  181.                    0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,
  182.                    -3em 0 0 0.2em #aaff00, -2em -2em 0 0 #aaff00;
  183.     }
  184.     87.5% {
  185.        box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 -0.5em #aaff00,
  186.                    3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,
  187.                    0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,
  188.                    -3em 0 0 0 #aaff00, -2em -2em 0 0.2em #aaff00;
  189.     }
  190.   }
  191.   @keyframes load3 {
  192.     0%,
  193.     100% {
  194.         box-shadow: 0 -3em 0 0.2em #aaff00, 2em -2em 0 0 #aaff00,
  195.                     3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,
  196.                     0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,
  197.                     -3em 0 0 -0.5em #aaff00, -2em -2em 0 0 #aaff00;
  198.     }
  199.     12.5% {
  200.         box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 0.2em #aaff00,
  201.                     3em 0 0 0 #aaff00, 2em 2em 0 -0.5em #aaff00,
  202.                     0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,
  203.                     -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;
  204.     }
  205.     25% {
  206.         box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 0 #aaff00,
  207.                     3em 0 0 0.2em #aaff00, 2em 2em 0 0 #aaff00,
  208.                     0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,
  209.                     -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;
  210.     }
  211.     37.5% {
  212.        box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,
  213.                    3em 0 0 0 #aaff00, 2em 2em 0 0.2em #aaff00,
  214.                    0 3em 0 0 #aaff00, -2em 2em 0 -0.5em #aaff00,
  215.                    -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;
  216.      }
  217.      50% {
  218.         box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,
  219.                     3em 0 0 -0.5em #aaff00, 2em 2em 0 0 #aaff00,
  220.                     0 3em 0 0.2em #aaff00, -2em 2em 0 0 #aaff00,
  221.                     -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;
  222.      }
  223.      62.5% {
  224.          box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,
  225.                      3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,
  226.                      0 3em 0 0 #aaff00, -2em 2em 0 0.2em #aaff00,
  227.                      -3em 0 0 0 #aaff00, -2em -2em 0 -0.5em #aaff00;
  228.     }
  229.     75% {
  230.         box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,
  231.                     3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,
  232.                     0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,
  233.                     -3em 0 0 0.2em #aaff00, -2em -2em 0 0 #aaff00;
  234.      }
  235.      87.5% {
  236.          box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 -0.5em #aaff00,
  237.                      3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,
  238.                      0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,
  239.                      -3em 0 0 0 #aaff00, -2em -2em 0 0.2em #aaff00;
  240.     }
  241.   }
  242.   #loader4 {
  243.     font-size: 10px;
  244.     margin: 20px 20px;
  245.     float: left;
  246.     text-indent: -9999em;
  247.     width: 11em;
  248.     height: 11em;
  249.     border-radius: 50%;
  250.     background: #ffffff;
  251.     background: -moz-linear-gradient(left, #ff00ff 10%, rgba(255, 255, 255, 0) 42%);
  252.     background: -webkit-linear-gradient(left, #ff00ff 10%, rgba(255, 255, 255, 0) 42%);
  253.     background: -o-linear-gradient(left, #ff00ff 10%, rgba(255, 255, 255, 0) 42%);
  254.     background: -ms-linear-gradient(left, #ff00ff 10%, rgba(255, 255, 255, 0) 42%);
  255.     background: linear-gradient(to right, #ff00ff 10%, rgba(255, 255, 255, 0) 42%);
  256.     position: relative;
  257.     -webkit-animation: load4 1.4s infinite linear;
  258.     animation: load4 1.4s infinite linear;
  259.   }
  260.   #loader4:before {
  261.     width: 50%;
  262.     height: 50%;
  263.     background: #ff00ff;
  264.     border-radius: 100% 0 0 0;
  265.     position: absolute;
  266.     top: 0;
  267.     left: 0;
  268.     content: ”;
  269.   }
  270.   #loader4:after {
  271.     background: #ffffff;
  272.     width: 75%;
  273.     height: 75%;
  274.     border-radius: 50%;
  275.     content: ”;
  276.     margin: auto;
  277.     position: absolute;
  278.     top: 0;
  279.     left: 0;
  280.     bottom: 0;
  281.     right: 0;
  282.   }
  283.   @-webkit-keyframes load4 {
  284.     0% {
  285.       -webkit-transform: rotate(0deg);
  286.       transform: rotate(0deg);
  287.     }
  288.     100% {
  289.       -webkit-transform: rotate(360deg);
  290.       transform: rotate(360deg);
  291.     }
  292.   }
  293.   @keyframes load4 {
  294.     0% {
  295.       -webkit-transform: rotate(0deg);
  296.       transform: rotate(0deg);
  297.     }
  298.     100% {
  299.       -webkit-transform: rotate(360deg);
  300.       transform: rotate(360deg);
  301.     }
  302.   }
  303.  #load5,
  304.  #loader5 {
  305.    margin: 80px 50px;
  306.    float: left;
  307.    font-size: 25px;
  308.    width: 1em;
  309.    height: 1em;
  310.    border-radius: 50%;
  311.    position: relative;
  312.    text-indent: -9999em;
  313.    -webkit-animation: load5 1.1s infinite ease;
  314.    animation: load5 1.1s infinite ease;
  315.  }
  316.  @-webkit-keyframes load5 {
  317.    0%,
  318.    100% {
  319.       box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 1), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
  320.                   2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
  321.                   0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),
  322.                   -2.6em 0 0 0 rgba(128, 0, 255, 0.5), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7);
  323.    }
  324.    12.5% {
  325.       box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.7), 1.8em -1.8em 0 0 rgba(128, 0, 255, 1),
  326.                   2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
  327.                   0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),
  328.                   -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.5);
  329.    }
  330.    25% {
  331.       box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.5), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7),
  332.                   2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
  333.                   0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),
  334.                   -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
  335.    }
  336.    37.5% {
  337.       box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0em rgba(128, 0, 255, 0.5),
  338.                   2.5em 0em 0 0 rgba(128, 0, 255, 0.7), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
  339.                   0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),
  340.                   -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
  341.    }
  342.    50% {
  343.       box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
  344.                   2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.7),
  345.                   0 2.5em 0 0 rgba(128, 0, 255, 1), -1.8em 1.8em 0 0 rgba(128, 255, 0, 0.2),
  346.                   -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
  347.    }
  348.    62.5% {
  349.        box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
  350.                    2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.5),
  351.                    0 2.5em 0 0 rgba(128, 0, 255, 0.7), -1.8em 1.8em 0 0 rgba(128, 0, 255, 1),
  352.                    -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
  353.    }
  354.    75% {
  355.        box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
  356.                    2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
  357.                    0 2.5em 0 0 rgba(128, 0, 255, 0.5), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.7),
  358.                    -2.6em 0 0 0 rgba(128, 0, 255, 1), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
  359.    }
  360.    87.5% {
  361.        box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
  362.                    2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
  363.                    0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.5),
  364.                    -2.6em 0 0 0 rgba(128, 0, 255, 0.7), -1.8em -1.8em 0 0 rgba(128, 0, 255, 1);
  365.    }
  366.  }
  367.  @keyframes load5 {
  368.    0%,
  369.    100% {
  370.       box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 1), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
  371.                   2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
  372.                   0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),
  373.                   -2.6em 0 0 0 rgba(128, 0, 255, 0.5), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7);
  374.    }
  375.    12.5% {
  376.       box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.7), 1.8em -1.8em 0 0 rgba(128, 0, 255, 1),
  377.                   2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
  378.                   0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),
  379.                   -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.5);
  380.    }
  381.    25% {
  382.       box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.5), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7),
  383.                   2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
  384.                   0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),
  385.                   -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
  386.    }
  387.    37.5% {
  388.       box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0em rgba(128, 0, 255, 0.5),
  389.                   2.5em 0em 0 0 rgba(128, 0, 255, 0.7), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
  390.                   0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),
  391.                   -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
  392.    }
  393.    50% {
  394.       box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
  395.                   2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.7),
  396.                   0 2.5em 0 0 rgba(128, 0, 255, 1), -1.8em 1.8em 0 0 rgba(128, 255, 0, 0.2),
  397.                   -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
  398.    }
  399.    62.5% {
  400.        box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
  401.                    2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.5),
  402.                    0 2.5em 0 0 rgba(128, 0, 255, 0.7), -1.8em 1.8em 0 0 rgba(128, 0, 255, 1),
  403.                    -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
  404.    }
  405.    75% {
  406.        box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
  407.                    2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
  408.                    0 2.5em 0 0 rgba(128, 0, 255, 0.5), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.7),
  409.                    -2.6em 0 0 0 rgba(128, 0, 255, 1), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
  410.    }
  411.    87.5% {
  412.        box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
  413.                    2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
  414.                    0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.5),
  415.                    -2.6em 0 0 0 rgba(128, 0, 255, 0.7), -1.8em -1.8em 0 0 rgba(128, 0, 255, 1);
  416.    }
  417.  }
  418. #loader6 {
  419.   margin: 60px 50px;
  420.   float: left;
  421.   font-size: 90px;
  422.   text-indent: -9999em;
  423.   overflow: hidden;
  424.   width: 1em;
  425.   height: 1em;
  426.   border-radius: 50%;
  427.   position: relative;
  428.   -webkit-animation: load6 1.7s infinite ease;
  429.   animation: load6 1.7s infinite ease;
  430.  }
  431.  @-webkit-keyframes load6 {
  432.     0% {
  433.       -webkit-transform: rotate(0deg);
  434.       transform: rotate(0deg);
  435.       box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
  436.                   -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
  437.                   -0.11em -0.83em 0 -0.477em #ff0000;
  438.       }
  439.     5%,
  440.     95% {
  441.       box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
  442.                   -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
  443.                   -0.11em -0.83em 0 -0.477em #ff0000;
  444.     }
  445.     30% {
  446.       box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.51em -0.66em 0 -0.42em #ff0000,
  447.                   -0.75em -0.36em 0 -0.44em #ff0000, -0.83em -0.03em 0 -0.46em #ff0000,
  448.                   -0.81em 0.21em 0 -0.477em #ff0000;
  449.     }
  450.     55% {
  451.       box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.29em -0.78em 0 -0.42em #ff0000,
  452.                   -0.43em -0.72em 0 -0.44em #ff0000, -0.52em -0.65em 0 -0.46em #ff0000,
  453.                   -0.57em -0.61em 0 -0.477em #ff0000;
  454.     }
  455.     100% {
  456.       -webkit-transform: rotate(360deg);
  457.       transform: rotate(360deg);
  458.       box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
  459.                   -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
  460.                   -0.11em -0.83em 0 -0.477em #ff0000;
  461.     }
  462.  }
  463. @keyframes load6 {
  464.   0% {
  465.     -webkit-transform: rotate(0deg);
  466.     transform: rotate(0deg);
  467.     box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
  468.                 -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
  469.                 -0.11em -0.83em 0 -0.477em #ff0000;
  470.     }
  471.   5%,
  472.   95% {
  473.     box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
  474.                 -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
  475.                 -0.11em -0.83em 0 -0.477em #ff0000;
  476.   }
  477.   30% {
  478.     box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.51em -0.66em 0 -0.42em #ff0000,
  479.                 -0.75em -0.36em 0 -0.44em #ff0000, -0.83em -0.03em 0 -0.46em #ff0000,
  480.                 -0.81em 0.21em 0 -0.477em #ff0000;
  481.   }
  482.   55% {
  483.     box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.29em -0.78em 0 -0.42em #ff0000,
  484.                 -0.43em -0.72em 0 -0.44em #ff0000, -0.52em -0.65em 0 -0.46em #ff0000,
  485.                 -0.57em -0.61em 0 -0.477em #ff0000;
  486.   }
  487.   100% {
  488.     -webkit-transform: rotate(360deg);
  489.     transform: rotate(360deg);
  490.     box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
  491.                 -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
  492.                 -0.11em -0.83em 0 -0.477em #ff0000;
  493.   }
  494. }
  495. #loader7:before,
  496. #loader7:after,
  497. #loader7 {
  498.   border-radius: 50%;
  499.   width: 2.5em;
  500.   height: 2.5em;
  501.   -webkit-animation-fill-mode: both;
  502.   animation-fill-mode: both;
  503.   -webkit-animation: load7 1.8s infinite ease-in-out;
  504.   animation: load7 1.8s infinite ease-in-out;
  505. }
  506. #loader7 {
  507.   margin: 60px 50px;
  508.   float: left;
  509.   font-size: 10px;
  510.   position: relative;
  511.   text-indent: -9999em;
  512.   -webkit-animation-delay: 0.16s;
  513.   animation-delay: 0.16s;
  514. }
  515. #loader7:before {
  516.   left: -3.5em;
  517. }
  518. #loader7:after {
  519.   left: 3.5em;
  520.   -webkit-animation-delay: 0.32s;
  521.   animation-delay: 0.32s;
  522. }
  523. #loader7:before,
  524. #loader7:after {
  525.   content: ”;
  526.   position: absolute;
  527.   top: 0;
  528. }
  529. @-webkit-keyframes load7 {
  530.   0%,
  531.   80%,
  532.   100% {
  533.     box-shadow: 0 2.5em 0 -1.3em #000000;
  534.   }
  535.   40% {
  536.     box-shadow: 0 2.5em 0 0 #000000;
  537.   }
  538. }
  539. @keyframes load7 {
  540.   0%,
  541.   80%,
  542.   100% {
  543.     box-shadow: 0 2.5em 0 -1.3em #000000;
  544.   }
  545.   40% {
  546.     box-shadow: 0 2.5em 0 0 #000000;
  547.   }
  548. }
  549. #loader8 {
  550.   margin: 30px 50px;
  551.   float: left;
  552.   font-size: 10px;
  553.   position: relative;
  554.   text-indent: -9999em;
  555.   border-top: 1.1em solid rgba(255, 128, 0, 0.2);
  556.   border-right: 1.1em solid rgba(255, 128, 0, 0.2);
  557.   border-bottom: 1.1em solid rgba(255, 128, 0, 0.2);
  558.   border-left: 1.1em solid rgba(255, 128, 0, 1);
  559.   -webkit-animation: load8 1.1s infinite linear;
  560.   animation: load8 1.1s infinite linear;
  561. }
  562. #loader8,
  563. #loader8:after {
  564.   border-radius: 50%;
  565.   width: 10em;
  566.   height: 10em;
  567. }
  568. @-webkit-keyframes load8 {
  569.   0% {
  570.     -webkit-transform: rotate(0deg);
  571.     transform: rotate(0deg);
  572.   }
  573.   100% {
  574.     -webkit-transform: rotate(360deg);
  575.     transform: rotate(360deg);
  576.   }
  577. }
  578. @keyframes load8 {
  579.   0% {
  580.     -webkit-transform: rotate(0deg);
  581.     transform: rotate(0deg);
  582.   }
  583.   100% {
  584.     -webkit-transform: rotate(360deg);
  585.     transform: rotate(360deg);
  586.   }
  587. }
  588.   </style>
  589. </head>
  590. <body>
  591.   <div id=“loader1” ></div>
  592.   <div id=“loader2” ></div>
  593.   <div id=“loader3” ></div>
  594.   <div id=“loader4” ></div>
  595.   <div id=“loader5” ></div>
  596.   <div id=“loader6” ></div>
  597.   <div id=“loader7” ></div>
  598.   <div id=“loader8” ></div>
  599. </body>
  600. </html>

 

 

>>原创文章,欢迎转载。转载请注明:转载自惠州市卓优互联科技有限亚博app,谢谢!
>>原文链接地址:CSS3绘制8种超炫的加载动画


关于作者

PINGLUNYIGUANBI。