純CSS3怎么打造好看的加載動畫效果

本篇內(nèi)容介紹了“純CSS3怎么打造好看的加載動畫效果”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)主要從事網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)全南,十年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

純css3打造的一款非常炫的加載圖。用在需要一定時間加載的地方非常合適。代碼非常簡單。沒有用任何javascript代碼。純css3實現(xiàn)。先上效果圖：

純CSS3怎么打造好看的加載動畫效果

實現(xiàn)代碼如下：

html代碼：

XML/HTML Code復制內(nèi)容到剪貼板

  1. <div class="content">  

  2.        <div style="width: 970px; margin: auto">  

  3.        </div>  

  4.        <div class="rotate">  

  5.            <span class="triangle base"></span><span class="triangle no1"></span><span class="triangle no2">  

  6.            </span><span class="triangle no3"></span>  

  7.        </div>  

  8.    </div>  

CSS代碼：

CSS Code復制內(nèi)容到剪貼板

  1. body {   

  2.     padding:0;   

  3.     margin:0;      

  4.     background-color: #2a4e66;   

  5.   overflow: hidden;   

  6. }   

  7.   

  8. .content {   

  9.     width:100%;   

  10.     height:100%;   

  11.     top:0;   

  12.     rightright:0;   

  13.     bottombottom:0;   

  14.     left:0;   

  15.     position:absolute;   

  16. }   

  17.   

  18. .rotate {   

  19.     position: absolute;   

  20.     top: 50%;   

  21.     left: 50%;   

  22.     margin: -93px 0 0 -93px;   

  23.     background: transparent;   

  24.     width: 186px;   

  25.     height: 186px;   

  26.     border-radius: 50%;   

  27.     z-index: 20;   

  28. }   

  29.   

  30. .rotate:after {   

  31.     content: '';       

  32.     position: absolute;   

  33.     box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff;   

  34.     width: 186px;   

  35.     height: 186px;   

  36.     border-radius: 50%;   

  37.     z-index: 10;   

  38. }   

  39.   

  40. span.triangle.base {   

  41.     position: absolute;   

  42.     width: 0;    

  43.     height: 0;   

  44.     margin: 46px 0 0 13px;   

  45.     border-left: 80px solid transparent;   

  46.     border-right: 80px solid transparent;                  

  47.     border-top: 140px solid #eeeeee;   

  48.     transform-origin: 50% 50%;   

  49.     z-index: 20;   

  50. }   

  51.   

  52. span.triangle.no1 {   

  53.     position: absolute;   

  54.     margin: 46px 0 0 13px;   

  55.     width: 0;    

  56.     height: 0;    

  57.     border-left: 80px solid transparent;   

  58.     border-right: 80px solid transparent;                  

  59.     border-bottom: 140px solid #eeeeee;   

  60.     transform-origin: 0 100%;   

  61.     z-index: 20;   

  62. }   

  63.   

  64. span.triangle.no2 {   

  65.     position: absolute;   

  66.     margin: 46px 0 0 13px;   

  67.     width: 0;    

  68.     height: 0;    

  69.     border-left: 80px solid transparent;   

  70.     border-right: 80px solid transparent;                  

  71.     border-bottom: 140px solid #eeeeee;   

  72.     transform-origin: 100% 100%;   

  73.     z-index: 20;   

  74. }   

  75.   

  76. span.triangle.no3 {   

  77.     position: absolute;   

  78.     margin: 46px 0 0 13px;   

  79.     width: 0;    

  80.     height: 0;    

  81.     border-left: 80px solid transparent;   

  82.     border-right: 80px solid transparent;                  

  83.     border-bottom: 140px solid #eeeeee;   

  84.     transform-origin: 50% 100%;   

  85.     z-index: 20;   

  86. }   

  87.   

  88. /* Animation */  

  89.   

  90. .rotate {   

  91.     -webkit-animation: rotateTriangle 3s linear infinite;   

  92.     animation: rotateTriangle 3s linear infinite;   

  93. }   

  94.   

  95. @-webkit-keyframes rotateTriangle {   

  96.     from { -webkit-transform: rotate(0deg); }   

  97.     to { -webkit-transform: rotate(60deg); }   

  98. }   

  99. @keyframes rotateTriangle {   

  100.     from { transform: rotate(0deg); }   

  101.     to { transform: rotate(60deg); }   

  102. }   

  103.   

  104. .rotate:after {   

  105.     -webkit-animation: glowAnimation 3s ease infinite;   

  106.     animation: glowAnimation 3s ease infinite;   

  107. }   

  108.   

  109. @-webkit-keyframes glowAnimation {         

  110.     0% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }   

  111.     10% { box-shadow: 0 0 80px #ffffff, 0 0 20px #ffffff, 0 0 2px #ffffff, inset 0 0 4px #ffffff, inset 0 0 8px #ffffff; }   

  112.     100% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }   

  113. }   

  114. @keyframes glowAnimation {   

  115.     0% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }   

  116.     10% { box-shadow: 0 0 80px #ffffff, 0 0 20px #ffffff, 0 0 2px #ffffff, inset 0 0 4px #ffffff, inset 0 0 8px #ffffff; }   

  117.     100% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }   

  118. }   

  119.   

  120. span.triangle.base {   

  121.     -webkit-animation: scaleTriangleBase 3s linear infinite;   

  122.     animation: scaleTriangleBase 3s linear infinite;   

  123. }   

  124.   

  125. @-webkit-keyframes scaleTriangleBase {   

  126.     from { -webkit-transform: translate(0px,-11px) scale(0.5); }   

  127.     to { -webkit-transform: translate(0px,0px) scale(1); }   

  128.     }   

  129. @keyframes scaleTriangleBase {   

  130.     from { transform: translate(0px,-11px) scale(0.5); }   

  131.     to { transform: translate(0px,0px) scale(1); }   

  132. }   

  133.   

  134. span.triangle.no1 {   

  135.     -webkit-animation: scaleTriangleOne 3s linear infinite;   

  136.     animation: scaleTriangleOne 3s linear infinite;   

  137. }   

  138.   

  139. @-webkit-keyframes scaleTriangleOne {   

  140.     from { -webkit-transform: translate(0px,-46px) scale(0.5); }   

  141.     to { -webkit-transform: translate(-80px,0px) scale(0); }   

  142. }   

  143. @keyframes scaleTriangleOne {   

  144.     from { transform: translate(0px,-46px) scale(0.5); }   

  145.     to { transform: translate(-80px,0px) scale(0); }   

  146. }   

  147.   

  148. span.triangle.no2 {   

  149.     -webkit-animation: scaleTriangleTwo 3s linear infinite;   

  150.     animation: scaleTriangleTwo 3s linear infinite;   

  151. }   

  152.   

  153. @-webkit-keyframes scaleTriangleTwo {   

  154.     from { -webkit-transform: translate(0px,-46px) scale(0.5); }   

  155.     to { -webkit-transform: translate(80px,0px) scale(0); }   

  156. }   

  157. @keyframes scaleTriangleTwo {   

  158.     from { transform: translate(0px,-46px) scale(0.5); }   

  159.     to { transform: translate(80px,0px) scale(0); }   

  160. }   

  161.   

  162. span.triangle.no3 {   

  163.     -webkit-animation: scaleTriangleThree 3s linear infinite;   

  164.     animation: scaleTriangleThree 3s linear infinite;   

  165. }   

  166.   

  167. @-webkit-keyframes scaleTriangleThree {   

  168.     from { -webkit-transform: translate(0px,-116px) scale(0.5); }   

  169.     to { -webkit-transform: translate(0px,-280px) scale(0); }   

  170. }   

  171. @keyframes scaleTriangleThree {   

  172.     from { transform: translate(0px,-116px) scale(0.5); }   

  173.     to { transform: translate(0px,-280px) scale(0); }   

  174. }  

“純CSS3怎么打造好看的加載動畫效果”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

網(wǎng)站標題：純CSS3怎么打造好看的加載動畫效果
文章URL：http://bm7419.com/article30/jcioso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、網(wǎng)站設(shè)計、定制開發(fā)、建站公司、網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)