曾經以為，loading的制作需要一些比較高深的web動畫技術，后來發現大多數loading都可以用“障眼法”做出來。比如一個旋轉的圓圈，並不都是將gif圖放進去，有些就是畫個靜止圖像，然后讓它旋轉就完了。gif圖也可以，但是加載時間比較長。
CSS的animation可以做出大多數的loading，比如：
loading1：
1、HTML：
1 <div id="ddr"> 2 <div class="ddr ddr1"></div> 3 <div class="ddr ddr2"></div> 4 <div class="ddr ddr3"></div> 5 <div class="ddr ddr4"></div> 6 <div class="ddr ddr5"></div> 7 </div>
2、CSS：
1 #ddr{ 2 margin: 0 auto; 3 width: 70px; 4 height: 120px; 5 } 6 .ddr{ 7 width: 10px; 8 height: 120px; 9 float: left; 10 margin: 2px; 11 background-color: #00ff00; 12 animation: loading 1s infinite ease-in-out;/*animation：動畫名稱 持續時間 動畫速度曲線 延遲 執行多少次 是否正反方向輪流播放*/ 13 } 14 .ddr2{ 15 animation-delay: -0.9s;/*定義開始執行的地方，負號表示直接從第900ms開始執行*/ 16 } 17 .ddr3{ 18 animation-delay: -0.8s; 19 } 20 .ddr4{ 21 animation-delay: -0.7s; 22 } 23 .ddr5{ 24 animation-delay: -0.6s; 25 } 26 @keyframes loading { 27 0%,40%,100%{ /*定義每幀的動作*/ 28 -webkit-transform: scaleY(0.5); 29 } 30 20%{ 31 -webkit-transform: scaleY(1); 32 } 33 }
loading2：
1、HTML：
1 <div id="circle"></div>
2、CSS：
1 #circle{ 2 margin: 20px auto; 3 width: 100px; 4 height: 100px; 5 border: 5px white solid; 6 border-left-color: #ff5500; 7 border-right-color:#0c80fe; 8 border-radius: 100%; 9 animation: loading1 1s infinite linear; 10 } 11 @keyframes loading1{ 12 from{transform: rotate(0deg)}to{transform: rotate(360deg)} 13 }
loading3：
1、HTML：
1 <div id="loader3"> 2 <div id="loader3-inner"></div> 3 </div>
2、CSS：
1 #loader3{ 2 box-sizing: border-box; 3 position: relative; 4 margin-left: 48%; 5 transform: rotate(180deg); 6 width: 50px; 7 height: 50px; 8 border: 10px groove rgb(170, 18, 201); 9 border-radius: 50%; 10 animation: loader-3 1s ease-out alternate infinite;/* alternate表示則動畫會在奇數次數（1、3、5 等等）正常播放，而在偶數次數（2、4、6 等等）反向播放 */ 11 } 12 #loader3-inner{ 13 box-sizing: border-box; 14 width: 100%; 15 height: 100%; 16 border: 0 inset rgb(170, 18, 201); 17 border-radius: 50%; 18 animation: border-zoom 1s ease-out alternate infinite; 19 } 20 @keyframes loader-3 { 21 0%{ 22 transform: rotate(0deg); 23 } 24 100%{ 25 transform: rotate(-360deg); 26 } 27 } 28 @keyframes border-zoom { 29 0%{ 30 border-width: 0px; 31 } 32 100%{ 33 border-width: 10px; 34 } 35 }
loading4：
1、HTML：
1 <div id="loading4"> 2 <div id="loader4" class="heart"></div> 3 </div>
2、CSS：
1 #loading4{ 2 width: 100%; 3 height: 100px; 4 } 5 #loader4{ 6 position: relative; 7 margin-left: calc(50% - 25px); 8 width: 50px; 9 height: 50px; 10 animation: loader-4 1s ease-in-out alternate infinite; 11 } 12 .heart:before{ 13 position: absolute; 14 left: 11px; 15 content: ""; 16 width: 50px; 17 height: 80px; 18 transform: rotate(45deg); 19 background-color: rgb(230, 6, 6); 20 border-radius: 50px 50px 0 0; 21 } 22 .heart:after{ 23 position: absolute; 24 right: 11px; 25 content: ""; 26 width: 50px; 27 height: 80px; 28 background-color: rgb(230, 6, 6); 29 transform: rotate(-45deg); 30 border-radius: 50px 50px 0 0; 31 } 32 @keyframes loader-4 { 33 0%{ 34 transform: scale(0.2); 35 opacity: 0.5; 36 } 37 100%{ 38 transform: scale(1); 39 opacity: 1; 40 } 41 }
環形進度條：
0、原理：
(1)、
如圖，先畫一個正方形，這個正方形就是環形loading的軌道（現在還不是），再將一個圓放在上面，充當遮蔽物。
(2)、
CSS3有個clip屬性，可以裁剪圖像，將上面的圓裁為一半，假如這個圓的右半部分一直看不見，旋轉左邊這個半圓，會出現怎樣的效果呢？
(3)、
如圖，就是這種效果，這時候再加一個遮罩，就形成了下面這種效果：
(4)、
再將最下面的正方形變成圓形（變成真正的軌道），旋轉橙色部分的圓環，底部青色的就會露出來，就形成了進度條的效果
(5)、
這是左邊的一半，將右邊的一半補齊：
(6)、
中間白色部分是mask，加上相應的文字，調整顏色就ok啦！
(7)、
1、HTML:
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <link rel="stylesheet" href="progress.css"> 10 </head> 11 12 <body> 13 <div class="circle"> 14 <div class="preLeft"> 15 <div class="left"></div> 16 </div> 17 <div class="preRight"> 18 <div class="right"></div> 19 </div> 20 </div> 21 <div class="mask"> 22 <span class="progress">0</span>% 23 </div> 24 <script src="progress.js"></script> 25 </body> 26 27 </html>
2、CSS:
1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 .circle { 6 width: 200px; 7 height: 200px; 8 border-radius: 50%; 9 box-shadow: 0 0 7px 0px inset; 10 background:linear-gradient(#9ED110, #50B517, #179067, #476EAF, #9f49ac, #CC42A2, #FF3BA7, #FF5800, #FF8100, #FEAC00, #FFCC00, #EDE604); 11 filter: blur(8px); 12 transform: scale(1.1); 13 -webkit-mask: radial-gradient(black 30px, #0000 90px); 14 } 15 .preLeft{ 16 position: absolute; 17 top: 0; 18 left: 0; 19 width: 200px; 20 height: 200px; 21 clip: rect(0, 100px, auto, 0); 22 } 23 .left{ 24 position: absolute; 25 top: 0; 26 left: 0; 27 width: 200px; 28 height: 200px; 29 border-radius: 50%; 30 box-shadow: 0 0 3px 0px inset; 31 background: #fff; 32 transform: rotate(0deg); 33 clip: rect(0, 100px, auto, 0); 34 } 35 .preRight{ 36 position: absolute; 37 top: 0; 38 left: 0; 39 width: 200px; 40 height: 200px; 41 clip: rect(0, auto, auto, 100px); 42 } 43 .right { 44 position: absolute; 45 top: 0; 46 left: 0; 47 width: 200px; 48 height: 200px; 49 border-radius: 50%; 50 box-shadow: 0 0 3px 0px inset; 51 background:#fff; 52 transform: rotate(0deg); 53 clip: rect(0, auto, auto, 100px); 54 } 55 .mask { 56 width: 150px; 57 height: 150px; 58 position: absolute; 59 left: 25px; 60 top: 25px; 61 border-radius: 50%; 62 /* box-shadow: 0 0 5px 0px; */ 63 background: #FFF; 64 text-align: center; 65 line-height: 150px; 66 }
3、JS:
1 function init() { 2 let left = document.getElementsByClassName('left')[0]; 3 let right = document.getElementsByClassName('right')[0]; 4 let progress = document.getElementsByClassName('progress')[0]; 5 let value = 0; 6 let timer = setInterval(() => { 7 if (progress.innerHTML < 100) { 8 progress.innerHTML = value++; 9 if (value <= 50) { 10 right.style.transform = 'rotate(' + (value * 3.6) + 'deg)'; 11 } else if (value <= 100) { 12 left.style.transform = 'rotate(' + ((value - 50) * 3.6) + 'deg)'; 13 } 14 } else { 15 clearInterval(timer); 16 } 17 }, 100); 18 } 19 window.onload = function () { 20 init(); 21 };
-
逢年過節，百度或者谷歌都會在首頁播放一段動畫，比如元宵節：
這個動畫不僅僅是gif圖，有時候是一張長長的包含所有幀的圖片：
仿照animation一幀一楨的思路，可以將這張圖片做成動畫：
1 #picHolder{ 2 /* 圖片樣式 */ 3 position: absolute; 4 top: 17%; 5 left: 50%; 6 width: 270px; 7 height: 129px; 8 margin-left:-135px; 9 background-image: url("../../../Library_image/tangyuan.png"); 10 background-repeat: no-repeat; 11 background-position-x: 0; 12 cursor: pointer; 13 }
1 function animation () { 2 /* 定時移動圖片，使觀眾看到不同的幀 */ 3 var po = 0 4 var i = 0 5 var holder = document.getElementById('picHolder') 6 setInterval(function () { 7 po += -270 8 i++ 9 holder.style.backgroundPositionX = po + 'px' 10 if (i >= 31) { 11 i = 0 12 po = 270 13 } 14 }, 100) 15 } 16 window.onload = function () { 17 animation() 18 }
不過有時候他們又會放上一張gif圖，不懂他們的套路