---CSS3繪製8種超炫的加載動畫

時間  2019-11-06
標籤 css3 css 繪製 加載 動畫 欄目 CSS 简体版
原文   原文鏈接

   CSS3繪製8種超炫的加載動畫css

    逛前端開發網站的時候，偶爾發現一組很是炫酷的CSS3加載動畫，遂火燒眉毛的作個Demo保存下來。html

        這些加載動畫用到了CSS3的旋轉transform屬性，顏色透明度設置和僞元素操做等CSS技術。奇妙的組合，產生了意想不到的效果。前端

        1.上下起伏波動的加載動畫：css3

        

 

  1. #loader1,web

  2. #loader1:before,函數

  3. #loader1:after {動畫

  4. background: #f2fa08;網站

  5. -webkit-animation: load1 1s infinite ease-in-out;3d

  6. animation: load1 1s infinite ease-in-out;code

  7. width: 1em;

  8. height: 4em;

  9. }

  10. #loader1:before,

  11. #loader1:after {

  12. position: absolute;

  13. top: 0;

  14. content: '';

  15. }

  16. #loader1:before {

  17. left: -1.5em;

  18. }

  19. #loader1 {

  20. text-indent: -9999em;

  21. margin: 50px 50px;

  22. position: relative;

  23. float: left;

  24. font-size: 11px;

  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()：用來移動元素，能夠根據X軸和Ｙ軸座標從新定位元素位置。在此基礎上有兩個擴展函數：translateX()和translateY()。

     scale()：用來縮小或放大元素，能夠使用元素尺寸發生變化。在此基礎上有兩個擴展函數：scaleX()和scaleY()。            rotate()：用來旋轉元素。

     skew()：用來讓元素傾斜。在此基礎上有兩個擴展函數：skewX()和skewY()。

     matrix()：定義矩陣變形，基於X軸和Y軸座標從新定位元素位置。
 ● 3D transform經常使用的transform-function的功能:
      translate3d()：移元素元素，用來指定一個3D變形移動位移量。
      translate()：指定3Ｄ位移在Ｚ軸的位移量。
      scale3d()：用來縮放一個元素。
      scaleZ():指定Z軸的縮放向量。
      rotate3d()：指定元素具備一個三維旋轉的角度。
      rotateX()、rotateY()和rotateZ()：讓元素具備一個旋轉角度。
      perspective()：指定一個透視投影矩陣。
      matrix3d()：定義矩陣變形。

  ● transform-origin屬性用來設置變換的原點。示例中表明旋轉中心。

       

 

  1. #loader2,

  2. #loader2:before,

  3. #loader2:after {

  4. border-radius: 50%;

  5. }

  6. #loader2:before,

  7. #loader2:after {

  8. position: absolute;

  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-size: 11px;

  25. text-indent: -99999em;

  26. margin: 20px 20px;

  27. position: relative;

  28. float: left;

  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.大小不一的粒子旋轉加載動畫：

       

 

  1. #load3,

  2. #loader3 {

  3. font-size: 20px;

  4. margin: 80px 50px;

  5. float: left;

  6. width: 1em;

  7. height: 1em;

  8. border-radius: 50%;

  9. position: relative;

  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.蛇形旋轉加載動畫：

      

 

  1. #loader4 {

  2. font-size: 10px;

  3. margin: 20px 20px;

  4. float: left;

  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 right, #ff00ff 10%, rgba(255, 255, 255, 0) 42%);

  15. position: relative;

  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. position: absolute;

  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. margin: auto;

  36. position: absolute;

  37. top: 0;

  38. left: 0;

  39. bottom: 0;

  40. right: 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.大小相同，顏色深淺不一的粒子旋轉動畫：

 

   它是運用CSS3的border-radius圓角屬性、box-shadow陰影屬性等屬性製做出來的。

 

   animation屬性設置的參數：

       ● 設置對象所應用的動畫名稱：load5。

       ● 設置對象動畫的持續時間：1.1s。

       ● 設置對象動畫的過渡類型：

             ease：動畫以低速開始，而後加快，在結束前變慢。

             linear：勻速。

             ease-in：動畫以低速開始。

             ease-out：動畫以低速結束。

             ease-in-out：動畫以低速開始和結束，相對於ease緩慢，速度更均勻。

             step-start：按keyframes設置逐幀顯示，第一幀爲keyframes設置的第一幀。

             step-end：按keyframes設置逐幀顯示，第一幀爲樣式的初始值。

             steps(<number>[, [ start | end ] ]?)：把keyframes裏設置的一幀等分爲幾幀，start爲第一次顯示第一幀，end第一次顯示樣式的初始值，例如：steps(4,start)。

             cubic-bezier(<number>, <number>, <number>, <number>)：在 cubic-bezier 函數中本身的值。可能的值是從 0 到 1 的數值。貝茲曲線限制了首尾兩控制點的位置，經過調整中間兩控制點的位置能夠靈活獲得經常使用的動畫效果。

        ● 設置對象動畫的循環次數：infinite（無限循環）。

       將動畫運行整個過程的分爲0%，12.5%，25%，37.5%，50%，62.5%，75%，87.5%，100%這8個階段，在不一樣的階段運用顏色的透明度製做出不一樣的陰影效果。

     

 

  1. #load5,

  2. #loader5 {

  3. margin: 80px 50px;

  4. float: left;

  5. font-size: 25px;

  6. width: 1em;

  7. height: 1em;

  8. border-radius: 50%;

  9. position: relative;

  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.粒子旋轉伸縮加載動畫：

 

      運用CSS3的旋轉Transform屬性和動畫的執行百分比製做而成。

      

 

  1. #loader6 {

  2. margin: 60px 50px;

  3. float: left;

  4. font-size: 90px;

  5. text-indent: -9999em;

  6. overflow: hidden;

  7. width: 1em;

  8. height: 1em;

  9. border-radius: 50%;

  10. position: relative;

  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.橫向粒子變更加載動畫：

 

      此處用到了CSS3動畫animation屬性的animation-fill-mode屬性和animation-delay屬性。
    ● animation-fill-mode屬性規定動畫在播放以前或以後，其動畫效果是否可見。
        none：不改變默認行爲。

        forwards：當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。

        backwards：在animation-delay所指定的一段時間內，在動畫顯示以前，應用開始屬性值（在第一個關鍵幀

中定義）。

       both： 向前和向後填充模式都被應用。

     ●  animation-delay屬性定義動畫什麼時候開始。該屬性容許負值，示例中延遲0.16s執行動畫。

         

 

  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. margin: 60px 50px;

  14. float: left;

  15. font-size: 10px;

  16. position: relative;

  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. position: absolute;

  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.圓環旋轉加載動畫：

 

      

 

  1. #loader8 {

  2. margin: 30px 50px;

  3. float: left;

  4. font-size: 10px;

  5. position: relative;

  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：

 

     

 

  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.  

  64. #loader2,

  65. #loader2:before,

  66. #loader2:after {

  67. border-radius: 50%;

  68. }

  69. #loader2:before,

  70. #loader2:after {

  71. position: absolute;

  72. content: '';

  73. }

  74. #loader2:before {

  75. width: 5.2em;

  76. height: 10.2em;

  77. background: #ffffff;

  78. border-radius: 10.2em 0 0 10.2em;

  79. top: -0.1em;

  80. left: -0.1em;

  81. -webkit-transform-origin: 5.2em 5.1em;

  82. transform-origin: 5.2em 5.1em;

  83. -webkit-animation: load2 2s infinite ease 1.5s;

  84. animation: load2 2s infinite ease 1.5s;

  85. }

  86. #loader2 {

  87. font-size: 11px;

  88. text-indent: -99999em;

  89. margin: 20px 20px;

  90. position: relative;

  91. float: left;

  92. width: 10em;

  93. height: 10em;

  94. box-shadow: inset 0 0 0 1em #ff0f88;

  95. }

  96. #loader2:after {

  97. width: 5.2em;

  98. height: 10.2em;

  99. background: #ffffff;

  100. border-radius: 0 10.2em 10.2em 0;

  101. top: -0.1em;

  102. left: 5.1em;

  103. -webkit-transform-origin: 0px 5.1em;

  104. transform-origin: 0px 5.1em;

  105. -webkit-animation: load2 2s infinite ease;

  106. animation: load2 2s infinite ease;

  107. }

  108. @-webkit-keyframes load2 {

  109. 0% {

  110. -webkit-transform: rotate(0deg);

  111. transform: rotate(0deg);

  112. }

  113. 100% {

  114. -webkit-transform: rotate(360deg);

  115. transform: rotate(360deg);

  116. }

  117. }

  118. @keyframes load2 {

  119. 0% {

  120. -webkit-transform: rotate(0deg);

  121. transform: rotate(0deg);

  122. }

  123. 100% {

  124. -webkit-transform: rotate(360deg);

  125. transform: rotate(360deg);

  126. }

  127. }

  128.  

  129. #load3,

  130. #loader3 {

  131. font-size: 20px;

  132. margin: 80px 50px;

  133. float: left;

  134. width: 1em;

  135. height: 1em;

  136. border-radius: 50%;

  137. position: relative;

  138. text-indent: -9999em;

  139. -webkit-animation: load3 1.3s infinite linear;

  140. animation: load3 1.3s infinite linear;

  141. }

  142. @-webkit-keyframes load3 {

  143. 0%,

  144. 100% {

  145. box-shadow: 0em -3em 0 0.2em #aaff00, 2em -2em 0 0em #aaff00,

  146. 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,

  147. 0em 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,

  148. -3em 0 0 -0.5em #aaff00, -2em -2em 0 0em #aaff00;

  149. }

  150. 12.5% {

  151. box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 0.2em #aaff00,

  152. 3em 0 0 0 #aaff00, 2em 2em 0 -0.5em #aaff00,

  153. 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,

  154. -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;

  155. }

  156. 25% {

  157. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 0em #aaff00,

  158. 3em 0 0 0.2em #aaff00, 2em 2em 0 0 #aaff00,

  159. 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,

  160. -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;

  161. }

  162. 37.5% {

  163. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,

  164. 3em 0 0 0 #aaff00, 2em 2em 0 0.2em #aaff00,

  165. 0 3em 0 0 #aaff00, -2em 2em 0 -0.5em #aaff00,

  166. -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;

  167. }

  168. 50% {

  169. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,

  170. 3em 0 0 -0.5em #aaff00, 2em 2em 0 0 #aaff00,

  171. 0 3em 0 0.2em #aaff00, -2em 2em 0 0 #aaff00,

  172. -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;

  173. }

  174. 62.5% {

  175. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,

  176. 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,

  177. 0 3em 0 0 #aaff00, -2em 2em 0 0.2em #aaff00,

  178. -3em 0 0 0 #aaff00, -2em -2em 0 -0.5em #aaff00;

  179. }

  180. 75% {

  181. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,

  182. 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,

  183. 0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,

  184. -3em 0 0 0.2em #aaff00, -2em -2em 0 0 #aaff00;

  185. }

  186. 87.5% {

  187. box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 -0.5em #aaff00,

  188. 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,

  189. 0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,

  190. -3em 0 0 0 #aaff00, -2em -2em 0 0.2em #aaff00;

  191. }

  192. }

  193. @keyframes load3 {

  194. 0%,

  195. 100% {

  196. box-shadow: 0 -3em 0 0.2em #aaff00, 2em -2em 0 0 #aaff00,

  197. 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,

  198. 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,

  199. -3em 0 0 -0.5em #aaff00, -2em -2em 0 0 #aaff00;

  200. }

  201. 12.5% {

  202. box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 0.2em #aaff00,

  203. 3em 0 0 0 #aaff00, 2em 2em 0 -0.5em #aaff00,

  204. 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,

  205. -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;

  206. }

  207. 25% {

  208. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 0 #aaff00,

  209. 3em 0 0 0.2em #aaff00, 2em 2em 0 0 #aaff00,

  210. 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,

  211. -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;

  212. }

  213. 37.5% {

  214. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,

  215. 3em 0 0 0 #aaff00, 2em 2em 0 0.2em #aaff00,

  216. 0 3em 0 0 #aaff00, -2em 2em 0 -0.5em #aaff00,

  217. -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;

  218. }

  219. 50% {

  220. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,

  221. 3em 0 0 -0.5em #aaff00, 2em 2em 0 0 #aaff00,

  222. 0 3em 0 0.2em #aaff00, -2em 2em 0 0 #aaff00,

  223. -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;

  224. }

  225. 62.5% {

  226. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,

  227. 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,

  228. 0 3em 0 0 #aaff00, -2em 2em 0 0.2em #aaff00,

  229. -3em 0 0 0 #aaff00, -2em -2em 0 -0.5em #aaff00;

  230. }

  231. 75% {

  232. box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,

  233. 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,

  234. 0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,

  235. -3em 0 0 0.2em #aaff00, -2em -2em 0 0 #aaff00;

  236. }

  237. 87.5% {

  238. box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 -0.5em #aaff00,

  239. 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,

  240. 0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,

  241. -3em 0 0 0 #aaff00, -2em -2em 0 0.2em #aaff00;

  242. }

  243. }

  244.  

  245. #loader4 {

  246. font-size: 10px;

  247. margin: 20px 20px;

  248. float: left;

  249. text-indent: -9999em;

  250. width: 11em;

  251. height: 11em;

  252. border-radius: 50%;

  253. background: #ffffff;

  254. background: -moz-linear-gradient(left, #ff00ff 10%, rgba(255, 255, 255, 0) 42%);

  255. background: -webkit-linear-gradient(left, #ff00ff 10%, rgba(255, 255, 255, 0) 42%);

  256. background: -o-linear-gradient(left, #ff00ff 10%, rgba(255, 255, 255, 0) 42%);

  257. background: -ms-linear-gradient(left, #ff00ff 10%, rgba(255, 255, 255, 0) 42%);

  258. background: linear-gradient(to right, #ff00ff 10%, rgba(255, 255, 255, 0) 42%);

  259. position: relative;

  260. -webkit-animation: load4 1.4s infinite linear;

  261. animation: load4 1.4s infinite linear;

  262. }

  263. #loader4:before {

  264. width: 50%;

  265. height: 50%;

  266. background: #ff00ff;

  267. border-radius: 100% 0 0 0;

  268. position: absolute;

  269. top: 0;

  270. left: 0;

  271. content: '';

  272. }

  273. #loader4:after {

  274. background: #ffffff;

  275. width: 75%;

  276. height: 75%;

  277. border-radius: 50%;

  278. content: '';

  279. margin: auto;

  280. position: absolute;

  281. top: 0;

  282. left: 0;

  283. bottom: 0;

  284. right: 0;

  285. }

  286. @-webkit-keyframes load4 {

  287. 0% {

  288. -webkit-transform: rotate(0deg);

  289. transform: rotate(0deg);

  290. }

  291. 100% {

  292. -webkit-transform: rotate(360deg);

  293. transform: rotate(360deg);

  294. }

  295. }

  296. @keyframes load4 {

  297. 0% {

  298. -webkit-transform: rotate(0deg);

  299. transform: rotate(0deg);

  300. }

  301. 100% {

  302. -webkit-transform: rotate(360deg);

  303. transform: rotate(360deg);

  304. }

  305. }

  306.  

  307. #load5,

  308. #loader5 {

  309. margin: 80px 50px;

  310. float: left;

  311. font-size: 25px;

  312. width: 1em;

  313. height: 1em;

  314. border-radius: 50%;

  315. position: relative;

  316. text-indent: -9999em;

  317. -webkit-animation: load5 1.1s infinite ease;

  318. animation: load5 1.1s infinite ease;

  319. }

  320. @-webkit-keyframes load5 {

  321. 0%,

  322. 100% {

  323. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 1), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),

  324. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  325. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),

  326. -2.6em 0 0 0 rgba(128, 0, 255, 0.5), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7);

  327. }

  328. 12.5% {

  329. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.7), 1.8em -1.8em 0 0 rgba(128, 0, 255, 1),

  330. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  331. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),

  332. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.5);

  333. }

  334. 25% {

  335. 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),

  336. 2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  337. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),

  338. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  339. }

  340. 37.5% {

  341. 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),

  342. 2.5em 0em 0 0 rgba(128, 0, 255, 0.7), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  343. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),

  344. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  345. }

  346. 50% {

  347. 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),

  348. 2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.7),

  349. 0 2.5em 0 0 rgba(128, 0, 255, 1), -1.8em 1.8em 0 0 rgba(128, 255, 0, 0.2),

  350. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  351. }

  352. 62.5% {

  353. 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),

  354. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.5),

  355. 0 2.5em 0 0 rgba(128, 0, 255, 0.7), -1.8em 1.8em 0 0 rgba(128, 0, 255, 1),

  356. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  357. }

  358. 75% {

  359. 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),

  360. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  361. 0 2.5em 0 0 rgba(128, 0, 255, 0.5), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.7),

  362. -2.6em 0 0 0 rgba(128, 0, 255, 1), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  363. }

  364. 87.5% {

  365. 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),

  366. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  367. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.5),

  368. -2.6em 0 0 0 rgba(128, 0, 255, 0.7), -1.8em -1.8em 0 0 rgba(128, 0, 255, 1);

  369. }

  370. }

  371. @keyframes load5 {

  372. 0%,

  373. 100% {

  374. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 1), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),

  375. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  376. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),

  377. -2.6em 0 0 0 rgba(128, 0, 255, 0.5), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7);

  378. }

  379. 12.5% {

  380. box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.7), 1.8em -1.8em 0 0 rgba(128, 0, 255, 1),

  381. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  382. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),

  383. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.5);

  384. }

  385. 25% {

  386. 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),

  387. 2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  388. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),

  389. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  390. }

  391. 37.5% {

  392. 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),

  393. 2.5em 0em 0 0 rgba(128, 0, 255, 0.7), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  394. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),

  395. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  396. }

  397. 50% {

  398. 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),

  399. 2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.7),

  400. 0 2.5em 0 0 rgba(128, 0, 255, 1), -1.8em 1.8em 0 0 rgba(128, 255, 0, 0.2),

  401. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  402. }

  403. 62.5% {

  404. 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),

  405. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.5),

  406. 0 2.5em 0 0 rgba(128, 0, 255, 0.7), -1.8em 1.8em 0 0 rgba(128, 0, 255, 1),

  407. -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  408. }

  409. 75% {

  410. 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),

  411. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  412. 0 2.5em 0 0 rgba(128, 0, 255, 0.5), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.7),

  413. -2.6em 0 0 0 rgba(128, 0, 255, 1), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);

  414. }

  415. 87.5% {

  416. 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),

  417. 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),

  418. 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.5),

  419. -2.6em 0 0 0 rgba(128, 0, 255, 0.7), -1.8em -1.8em 0 0 rgba(128, 0, 255, 1);

  420. }

  421. }

  422.  

  423. #loader6 {

  424. margin: 60px 50px;

  425. float: left;

  426. font-size: 90px;

  427. text-indent: -9999em;

  428. overflow: hidden;

  429. width: 1em;

  430. height: 1em;

  431. border-radius: 50%;

  432. position: relative;

  433. -webkit-animation: load6 1.7s infinite ease;

  434. animation: load6 1.7s infinite ease;

  435. }

  436. @-webkit-keyframes load6 {

  437. 0% {

  438. -webkit-transform: rotate(0deg);

  439. transform: rotate(0deg);

  440. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,

  441. -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,

  442. -0.11em -0.83em 0 -0.477em #ff0000;

  443. }

  444. 5%,

  445. 95% {

  446. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,

  447. -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,

  448. -0.11em -0.83em 0 -0.477em #ff0000;

  449. }

  450. 30% {

  451. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.51em -0.66em 0 -0.42em #ff0000,

  452. -0.75em -0.36em 0 -0.44em #ff0000, -0.83em -0.03em 0 -0.46em #ff0000,

  453. -0.81em 0.21em 0 -0.477em #ff0000;

  454. }

  455. 55% {

  456. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.29em -0.78em 0 -0.42em #ff0000,

  457. -0.43em -0.72em 0 -0.44em #ff0000, -0.52em -0.65em 0 -0.46em #ff0000,

  458. -0.57em -0.61em 0 -0.477em #ff0000;

  459. }

  460. 100% {

  461. -webkit-transform: rotate(360deg);

  462. transform: rotate(360deg);

  463. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,

  464. -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,

  465. -0.11em -0.83em 0 -0.477em #ff0000;

  466. }

  467. }

  468. @keyframes load6 {

  469. 0% {

  470. -webkit-transform: rotate(0deg);

  471. transform: rotate(0deg);

  472. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,

  473. -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,

  474. -0.11em -0.83em 0 -0.477em #ff0000;

  475. }

  476. 5%,

  477. 95% {

  478. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,

  479. -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,

  480. -0.11em -0.83em 0 -0.477em #ff0000;

  481. }

  482. 30% {

  483. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.51em -0.66em 0 -0.42em #ff0000,

  484. -0.75em -0.36em 0 -0.44em #ff0000, -0.83em -0.03em 0 -0.46em #ff0000,

  485. -0.81em 0.21em 0 -0.477em #ff0000;

  486. }

  487. 55% {

  488. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.29em -0.78em 0 -0.42em #ff0000,

  489. -0.43em -0.72em 0 -0.44em #ff0000, -0.52em -0.65em 0 -0.46em #ff0000,

  490. -0.57em -0.61em 0 -0.477em #ff0000;

  491. }

  492. 100% {

  493. -webkit-transform: rotate(360deg);

  494. transform: rotate(360deg);

  495. box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,

  496. -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,

  497. -0.11em -0.83em 0 -0.477em #ff0000;

  498. }

  499. }

  500.  

  501. #loader7:before,

  502. #loader7:after,

  503. #loader7 {

  504. border-radius: 50%;

  505. width: 2.5em;

  506. height: 2.5em;

  507. -webkit-animation-fill-mode: both;

  508. animation-fill-mode: both;

  509. -webkit-animation: load7 1.8s infinite ease-in-out;

  510. animation: load7 1.8s infinite ease-in-out;

  511. }

  512. #loader7 {

  513. margin: 60px 50px;

  514. float: left;

  515. font-size: 10px;

  516. position: relative;

  517. text-indent: -9999em;

  518. -webkit-animation-delay: 0.16s;

  519. animation-delay: 0.16s;

  520. }

  521. #loader7:before {

  522. left: -3.5em;

  523. }

  524. #loader7:after {

  525. left: 3.5em;

  526. -webkit-animation-delay: 0.32s;

  527. animation-delay: 0.32s;

  528. }

  529. #loader7:before,

  530. #loader7:after {

  531. content: '';

  532. position: absolute;

  533. top: 0;

  534. }

  535. @-webkit-keyframes load7 {

  536. 0%,

  537. 80%,

  538. 100% {

  539. box-shadow: 0 2.5em 0 -1.3em #000000;

  540. }

  541. 40% {

  542. box-shadow: 0 2.5em 0 0 #000000;

  543. }

  544. }

  545. @keyframes load7 {

  546. 0%,

  547. 80%,

  548. 100% {

  549. box-shadow: 0 2.5em 0 -1.3em #000000;

  550. }

  551. 40% {

  552. box-shadow: 0 2.5em 0 0 #000000;

  553. }

  554. }

  555.  

  556. #loader8 {

  557. margin: 30px 50px;

  558. float: left;

  559. font-size: 10px;

  560. position: relative;

  561. text-indent: -9999em;

  562. border-top: 1.1em solid rgba(255, 128, 0, 0.2);

  563. border-right: 1.1em solid rgba(255, 128, 0, 0.2);

  564. border-bottom: 1.1em solid rgba(255, 128, 0, 0.2);

  565. border-left: 1.1em solid rgba(255, 128, 0, 1);

  566. -webkit-animation: load8 1.1s infinite linear;

  567. animation: load8 1.1s infinite linear;

  568. }

  569. #loader8,

  570. #loader8:after {

  571. border-radius: 50%;

  572. width: 10em;

  573. height: 10em;

  574. }

  575. @-webkit-keyframes load8 {

  576. 0% {

  577. -webkit-transform: rotate(0deg);

  578. transform: rotate(0deg);

  579. }

  580. 100% {

  581. -webkit-transform: rotate(360deg);

  582. transform: rotate(360deg);

  583. }

  584. }

  585. @keyframes load8 {

  586. 0% {

  587. -webkit-transform: rotate(0deg);

  588. transform: rotate(0deg);

  589. }

  590. 100% {

  591. -webkit-transform: rotate(360deg);

  592. transform: rotate(360deg);

  593. }

  594. }

  595. </style>

  596. </head>

  597. <body>

  598. <div id="loader1" ></div>

  599. <div id="loader2" ></div>

  600. <div id="loader3" ></div>

  601. <div id="loader4" ></div>

  602. <div id="loader5" ></div>

  603. <div id="loader6" ></div>

  604. <div id="loader7" ></div>

  605. <div id="loader8" ></div>

  606. </body>

  607. </html>

 

        參考文檔：

         http://www.webhek.com/misc/css-loaders

         http://www.w3cplus.com/css3/transform-origin.html

         http://www.w3school.com.cn/css3/css3_animation.asp

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程