首頁 > 開發者 > 網站開發

用css3製作旋轉載入動畫的幾種方法

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

以WebKit為核心的瀏覽器，例如Safari和Chrome，對html5有著很好的支援，在移動平台中這兩個瀏覽器對應的就是IOS和Android。最近在開發一個移動平台的web app，那麼就有機會利用css3去實現一些很酷的效果，這些效果原來更多的是利用圖片來實現。最近的一個改進就是利用css3製作旋轉載入動畫。以下將分別介紹幾種實現的方案。

方案1，圖片輔助

傳統做法是直接用動態GIF圖片，這個方案是用PNG圖片加上背景顏色來類比靜止的載入圖片，然後利用css中的animation處理圖片的旋轉。相比傳統方案，這個方案的好處是可以直接通過修改CSS來改變背景色，可以修改大小和旋轉速度。如下是具體的CSS代碼：

 

 
    
  
  1. @-webkit-keyframes rotate { 
    2. 
  
  2.   from {-webkit-transform:rotate(0deg);} 
    3. 
  
  3.   to {-webkit-transform:rotate(360deg);} 
    4. 
  
  4. } 
    5. 
  
  5. p#spinner { 
    6. 
  
  6.   height: 30px; 
    7. 
  
  7.   width: 30px; 
    8. 
  
  8.   overflow: hidden; 
    9. 
  
  9.   background: #000; 
    10. 
  
  10.   -webkit-mask-image: url("data:image/png[...]"); 
    11. 
  
  11.   -webkit-mask-size: 30px 30px; 
    12. 
  
  12.   -webkit-animation-name: rotate; 
    13. 
  
  13.   -webkit-animation-duration: 1.5s; 
    14. 
  
  14.   -webkit-animation-iteration-count: infinite; 
    15. 
  
  15.   -webkit-animation-timing-function: linear; 
    16. 
  
  16. } 
    17.

具體效果查看這裡：Demo1

這個方案，只有safari可以很好地支援。chrome下支援不是很好，所以這是一個不太成熟的方案。

方案2， 純CSS實現

方案的思路是，首先用css渲染12個靜態bar，每個bar間隔30度的角度，給每個bar添加背景變淡的動畫，但是相鄰bar的動畫效果延遲1/12秒，來保證12個bar是按順序變亮然後變暗。從而類比出旋轉的效果。

這個旋轉效果是偽旋轉，所有的bar都沒有真正做到旋轉。

 

 
    
  
  1. @-webkit-keyframes fade { 
    2. 
  
  2.     from {opacity: 1;} 
    3. 
  
  3.     to {opacity: 0.25;} 
    4. 
  
  4. } 
    5. 
  
  5. div.spinner { 
    6. 
  
  6.     position: relative; 
    7. 
  
  7.     width: 30px; 
    8. 
  
  8.     height: 30px; 
    9. 
  
  9.     display: inline-block; 
    10. 
  
  10. } 
    11. 
  
  11. div.spinner div { 
    12. 
  
  12.     width: 20%; 
    13. 
  
  13.     height: 40%; 
    14. 
  
  14.     background: #000; 
    15. 
  
  15.     position: absolute; 
    16. 
  
  16.     left: 100%; 
    17. 
  
  17.     top: 100%; 
    18. 
  
  18.     opacity: 0; 
    19. 
  
  19.     -webkit-animation: fade 1s linear infinite; 
    20. 
  
  20.     -webkit-border-radius: 30px; 
    21. 
  
  21. } 
    22. 
  
  22. div.spinner div.bar1 { 
    23. 
  
  23.     -webkit-transform:rotate(0deg) translate(0, -142%); 
    24. 
  
  24.         -webkit-animation-delay: 0s; 
    25. 
  
  25. } 
    26. 
  
  26. [......] 
    27. 
  
  27. div.spinner div.bar12 { 
    28. 
  
  28.     -webkit-transform:rotate(330deg) translate(0, -142%);  
    29. 
  
  29.     -webkit-animation-delay: -0.0833s; 
    30. 
  
  30. } 
    31.

具體效果查看這裡：Demo2

safari和chrome都能很好地渲染這個效果，並且也很容易定義實際大小，因為所有的bar的高度，寬度有是用百分比來定義的。缺點也很明顯，需要定義12個bar，並且每個bar都要定義獨立的css，相對來說html和css的代碼量有點多。

方案3，這個方案類似sencha touch中實現的效果

方案的基本思想是：首先利用html和css呈現4個bar，再通過css的虛擬元素: before和：after定義每個bar的前後內容，這樣使得由原始的4個bar產生12個bar的效果，其次通過css設定讓12個bar的透明度逐漸遞減，最後應用css3中旋轉動畫達到實際loading的效果。

 

 
    
  
  1. .x-loading-spinner { 
    2. 
  
  2.     font-size: 250%; 
    3. 
  
  3.     height: 1em; 
    4. 
  
  4.     width: 1em; 
    5. 
  
  5.     position: relative; 
    6. 
  
  6.     -webkit-transform-origin: 0.5em 0.5em; 
    7. 
  
  7. } 
    8. 
  
  8. .x-loading-spinner > span, .x-loading-spinner > span:before, .x-loading-spinner > span:after { 
    9. 
  
  9.     display: block; 
    10. 
  
  10.     position: absolute; 
    11. 
  
  11.     width: 0.1em; 
    12. 
  
  12.     height: 0.25em; 
    13. 
  
  13.     top: 0; 
    14. 
  
  14.     -webkit-transform-origin: 0.05em 0.5em; 
    15. 
  
  15.     -webkit-border-radius: 0.05em; 
    16. 
  
  16.     border-radius: 0.05em; 
    17. 
  
  17.     content: " "; 
    18. 
  
  18. } 
    19. 
  
  19. .x-loading-spinner > span.x-loading-top { 
    20. 
  
  20.     background-color: rgba(170, 170, 170, 0.99); 
    21. 
  
  21. } 
    22. 
  
  22. .x-loading-spinner > span.x-loading-top::after { 
    23. 
  
  23.     background-color: rgba(170, 170, 170, 0.9); 
    24. 
  
  24. } 
    25. 
  
  25. .x-loading-spinner > span.x-loading-left::before { 
    26. 
  
  26.     background-color: rgba(170, 170, 170, 0.8); 
    27. 
  
  27. } 
    28. 
  
  28. .x-loading-spinner > span.x-loading-left { 
    29. 
  
  29.     background-color: rgba(170, 170, 170, 0.7); 
    30. 
  
  30. } 
    31. 
  
  31. .x-loading-spinner > span.x-loading-left::after { 
    32. 
  
  32.     background-color: rgba(170, 170, 170, 0.6); 
    33. 
  
  33. } 
    34. 
  
  34. .x-loading-spinner > span.x-loading-bottom::before { 
    35. 
  
  35.     background-color: rgba(170, 170, 170, 0.5); 
    36. 
  
  36. } 
    37. 
  
  37. .x-loading-spinner > span.x-loading-bottom { 
    38. 
  
  38.     background-color: rgba(170, 170, 170, 0.4); 
    39. 
  
  39. } 
    40. 
  
  40. .x-loading-spinner > span.x-loading-bottom::after { 
    41. 
  
  41.     background-color: rgba(170, 170, 170, 0.35); 
    42. 
  
  42. } 
    43. 
  
  43. .x-loading-spinner > span.x-loading-right::before { 
    44. 
  
  44.     background-color: rgba(170, 170, 170, 0.3); 
    45. 
  
  45. } 
    46. 
  
  46. .x-loading-spinner > span.x-loading-right { 
    47. 
  
  47.     background-color: rgba(170, 170, 170, 0.25); 
    48. 
  
  48. } 
    49. 
  
  49. .x-loading-spinner > span.x-loading-right::after { 
    50. 
  
  50.     background-color: rgba(170, 170, 170, 0.2); 
    51. 
  
  51. } 
    52. 
  
  52. .x-loading-spinner > span.x-loading-top::before { 
    53. 
  
  53.     background-color: rgba(170, 170, 170, 0.15); 
    54. 
  
  54. } 
    55. 
  
  55. .x-loading-spinner > span { 
    56. 
  
  56.     left: 50%; 
    57. 
  
  57.     margin-left: -0.05em; 
    58. 
  
  58. } 
    59. 
  
  59. .x-loading-spinner > span.x-loading-top { 
    60. 
  
  60.     -webkit-transform: rotate(0deg); 
    61. 
  
  61.     -moz-transform: rotate(0deg); 
    62. 
  
  62. } 
    63. 
  
  63. .x-loading-spinner > span.x-loading-right { 
    64. 
  
  64.     -webkit-transform: rotate(90deg); 
    65. 
  
  65.     -moz-transform: rotate(90deg); 
    66. 
  
  66. } 
    67. 
  
  67. .x-loading-spinner > span.x-loading-bottom { 
    68. 
  
  68.     -webkit-transform: rotate(180deg); 
    69. 
  
  69.     -moz-transform: rotate(180deg); 
    70. 
  
  70. } 
    71. 
  
  71. .x-loading-spinner > span.x-loading-left { 
    72. 
  
  72.     -webkit-transform: rotate(270deg); 
    73. 
  
  73.     -moz-transform: rotate(270deg); 
    74. 
  
  74. } 
    75. 
  
  75. .x-loading-spinner > span::before { 
    76. 
  
  76.     -webkit-transform: rotate(30deg); 
    77. 
  
  77.     -moz-transform: rotate(30deg); 
    78. 
  
  78. } 
    79. 
  
  79. .x-loading-spinner > span::after { 
    80. 
  
  80.     -webkit-transform: rotate(-30deg); 
    81. 
  
  81.     -moz-transform: rotate(-30deg); 
    82. 
  
  82. } 
    83. 
  
  83. .x-loading-spinner { 
    84. 
  
  84.     -webkit-animation-name: x-loading-spinner-rotate; 
    85. 
  
  85.     -webkit-animation-duration: 0.5s; 
    86. 
  
  86.     -webkit-animation-iteration-count: infinite; 
    87. 
  
  87.     -webkit-animation-timing-function: linear; 
    88. 
  
  88. } 
    89. 
  
  89.  
    90. 
  
  90. @-webkit-keyframes x-loading-spinner-rotate { 
    91. 
  
  91.     from { 
    92. 
  
  92.     -webkit-transform: rotate(30deg); 
    93. 
  
  93.     } 
    94. 
  
  94.     to { 
    95. 
  
  95.     -webkit-transform: rotate(330deg); 
    96. 
  
  96.     } 
    97. 
  
  97. } 
    98.

具體效果查看這裡：Demo3

這個方案是3個方案中應用css技術最徹底的一個，html的代碼最少，並且也真正做到了旋轉效果。缺點是不易擴充，chrome瀏覽器支援不是很理想。

綜上分析，方案1瀏覽器支援不好，但是實現簡單，方案2的html代碼太多，但擴充好，瀏覽器支援不錯，方案3的擴充性不好，瀏覽器支援也不好，但是較好地利用了css的特性。

如果開發案頭web系統，推薦方案2，如果是mobile系統，則方案2和方案3各有優勢。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css3 pdf css3 transition css3 text animation effects css3 missing manual css3 background image html5 css3 templates dreamweaver css3 animated buttons
相關文章
H5 中html 頁面存為圖片並長按 儲存
Citrix NetScaler產品學習筆記之一：Citrix NetScaler概述

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More