css3動畫-加載中...
阿新 • • 發佈：2017-09-28
方法 不同的 open line transform image eight .cn mat 
寫幾個簡單的加載中動畫吧。
像前面三種都是相當於幾個不同的點輪流來播放同一動畫：變大變小。css3裏面有一個用於尺度變換的方法：scale(x,y)：定義 2D 縮放轉換，改變元素的寬度和高度。
第四種就是一個小球從上往下跌落，再彈回去，在上面的時候速度最小，下面的時候速度最大。由於該小球只進行了上下的移動，所以我們可以運用：translateY(n)：定義 2D 轉換，沿著 Y 軸移動元素，從而實現小球沿Y方向來回移動。
廢話不多說了，上代碼。
首先，第一個加載中的動畫：
1 <div id="loading1"> 2 <div class="demo1"html Code></div> 3 <div class="demo1"></div> 4 <div class="demo1"></div> 5 <div class="demo1"></div> 6 <div class="demo1"></div> 7 </div>
1 .demo1 { 2 width: 4px; 3 height: 4px; 4 border-radiuscss Code: 2px; 5 background: #68b2ce; 6 float: left; 7 margin: 0 3px; 8 animation: demo1 linear 1s infinite; 9 -webkit-animation: demo1 linear 1s infinite; 10 } 11 .demo1:nth-child(1){ 12 animation-delay:0s; 13 } 14 .demo1:nth-child(2){ 15 animation-delay:0.15s; 16 } 17 .demo1:nth-child(3){ 18 animation-delay:0.3s; 19 } 20 .demo1:nth-child(4){ 21 animation-delay:0.45s; 22 } 23 .demo1:nth-child(5){ 24 animation-delay:0.6s; 25 } 26 @keyframes demo1 27 { 28 0%,60%,100% {transform: scale(1);} 29 30% {transform: scale(2.5);} 30 } 31 @-webkit-keyframes demo1 32 { 33 0%,60%,100% {transform: scale(1);} 34 30% {transform: scale(2.5);} 35 }
第二個動畫和第一個動畫大同小異，第一個動畫是將小球整體變大變小，第二動畫則是將小方塊的高度變大變小，而寬度不變：
1 <div id="loading2"> 2 <div class="demo2"></div> 3 <div class="demo2"></div> 4 <div class="demo2"></div> 5 <div class="demo2"></div> 6 <div class="demo2"></div> 7 </div>html Code
1 .demo2 { 2 width: 4px; 3 height: 6px; 4 background: #68b2ce; 5 float: left; 6 margin: 0 3px; 7 animation: demo2 linear 1s infinite; 8 -webkit-animation: demo2 linear 1s infinite; 9 } 10 .demo2:nth-child(1){ 11 animation-delay:0s; 12 } 13 .demo2:nth-child(2){ 14 animation-delay:0.15s; 15 } 16 .demo2:nth-child(3){ 17 animation-delay:0.3s; 18 } 19 .demo2:nth-child(4){ 20 animation-delay:0.45s; 21 } 22 .demo2:nth-child(5){ 23 animation-delay:0.6s; 24 } 25 @keyframes demo2 26 { 27 0%,60%,100% {transform: scale(1);} 28 30% {transform: scaleY(3);} 29 } 30 @-webkit-keyframes demo2 31 { 32 0%,60%,100% {transform: scale(1);} 33 30% {transform: scaleY(3);} 34 }css Code
第三個動畫就需要將小球的位置定位一下，讓幾個小球整體上看起來圍成一個圓，然後就像第一個一樣使小球變大變小：
1 <div id="loading3"> 2 <div class="demo3"></div> 3 <div class="demo3"></div> 4 <div class="demo3"></div> 5 <div class="demo3"></div> 6 <div class="demo3"></div> 7 <div class="demo3"></div> 8 <div class="demo3"></div> 9 <div class="demo3"></div> 10 </div>html Code
1 #loading3 { 2 position: relative; 3 width: 50px; 4 height: 50px; 5 } 6 .demo3 { 7 width: 4px; 8 height: 4px; 9 border-radius: 2px; 10 background: #68b2ce; 11 position: absolute; 12 animation: demo3 linear 0.8s infinite; 13 -webkit-animation: demo3 linear 0.8s infinite; 14 } 15 .demo3:nth-child(1){ 16 left: 24px; 17 top: 2px; 18 animation-delay:0s; 19 } 20 .demo3:nth-child(2){ 21 left: 40px; 22 top: 8px; 23 animation-delay:0.1s; 24 } 25 .demo3:nth-child(3){ 26 left: 47px; 27 top: 24px; 28 animation-delay:0.1s; 29 } 30 .demo3:nth-child(4){ 31 left: 40px; 32 top: 40px; 33 animation-delay:0.2s; 34 } 35 .demo3:nth-child(5){ 36 left: 24px; 37 top: 47px; 38 animation-delay:0.4s; 39 } 40 .demo3:nth-child(6){ 41 left: 8px; 42 top: 40px; 43 animation-delay:0.5s; 44 } 45 .demo3:nth-child(7){ 46 left: 2px; 47 top: 24px; 48 animation-delay:0.6s; 49 } 50 .demo3:nth-child(8){ 51 left: 8px; 52 top: 8px; 53 animation-delay:0.7s; 54 } 55 56 @keyframes demo3 57 { 58 0%,40%,100% {transform: scale(1);} 59 20% {transform: scale(3);} 60 } 61 @-webkit-keyframes demo3 62 { 63 0%,40%,100% {transform: scale(1);} 64 20% {transform: scale(3);} 65 }css Code
接下來是第四個動畫：
1 <div id="loading5"> 2 <div class="demo5"></div> 3 </div>
1 #loading5 { 2 width: 20px; 3 height: 100px; 4 border-bottom: 1px solid #68b2ce; 5 } 6 .demo5 { 7 width: 20px; 8 height: 20px; 9 border-radius: 10px; 10 background: #68b2ce; 11 animation: demo5 cubic-bezier(0.5,0.01,0.9,1) 0.6s infinite alternate; 12 -webkit-animation: demo5 cubic-bezier(0.5,0.01,0.9,1) 0.6s infinite alternate; 13 } 14 @keyframes demo5 15 { 16 0%{ 17 transform:translateY(0px); 18 -webkit-transform:translateY(0px); 19 } 20 100% { 21 transform:translateY(80px); 22 -webkit-transform:translateY(80px); 23 } 24 } 25 @-webkit-keyframes demo5 26 { 27 0%{ 28 transform:translateY(0px); 29 -webkit-transform:translateY(0px); 30 } 31 100% { 32 transform:translateY(80px); 33 -webkit-transform:translateY(80px); 34 } 35 }css Code
以上就是這幾個簡單的加載中小動畫的內容了。
css3動畫-加載中...