幾個單元素Loading動畫解構

時間 2019-11-18

標籤幾個元素 loading 動畫解構简体版

原文原文鏈接

這個帳號建了也有1個多月，拖延症患者終於下定決心開始寫博。作前端從前至後差很少1年時間，若是文中有什麼紕漏歡迎指出，將來的路還很長~css

第一篇文章用來解構幾個挺不錯的單元素Loading動畫。效果圖以下：html

Demo中每一個動畫不考慮容器都只使用一個div標籤，經過添加陰影和僞元素再加以動畫效果便可實現。下面咱們來逐個對圖中的動畫進行分析。前端

整體HTML解構：css3

<div class="load-container load[index]">web

　　<div class="loader">Loading...</div>
</div>ide

CSS分析：動畫

Demo 1:spa

第一步：首先經過對loader類添加::before和::after兩個僞元素副本，和主元素同樣width爲1em，height爲4em。並設置position:absolute，經過調整TRBL到左右位置，實現以下圖中的排列（注意須要在父元素上設置position:relative，這樣才能根據父元素位置進行定位）。3d

第二步：設置動畫關鍵幀（@keyframes），關於關鍵幀的介紹能夠參考W3C的Animation介紹。設置0%、80%、100%處爲初始狀態即 box-shadow: 0 0 #FFF; height: 4em; 在40%處設置爲拉伸狀態即：box-shadow: 0 -2em #ffffff; height: 5em; 其中使用box-shadow是爲了實現沿水平軸線伸縮的效果。固然其中的長度咱們能夠本身設置，選擇一個合適的伸縮尺度。考慮兼容性可加上內核前綴。code

第三步：將動畫添加至三個元素中，並使用animation-delay屬性設置不一樣的時延以達到依次伸縮的效果。

如下是該Loading動畫的CSS代碼，總的來講仍是很容易實現的。

 1 .load1 .loader,
 2 .load1 .loader:before,
 3 .load1 .loader:after {
 4   background: #FFF;
 5   -webkit-animation: load1 1s infinite ease-in-out;
 6   animation: load1 1s infinite ease-in-out;
 7   width: 1em;
 8   height: 4em;
 9 }
10 .load1 .loader:before,
11 .load1 .loader:after {
12   position: absolute;
13   top: 0;
14   content: '';
15 }
16 .load1 .loader:before {
17   left: -1.5em;
18   -webkit-animation-delay: -0.32s;
19   animation-delay: -0.32s;
20 }
21 .load1 .loader {
22   text-indent: -9999em;
23   margin: 8em auto;
24   position: relative;
25   font-size: 11px;
26   -webkit-animation-delay: -0.16s;
27   animation-delay: -0.16s;
28 }
29 .load1 .loader:after {
30   left: 1.5em;
31 }
32 @-webkit-keyframes load1 {
33   0%,
34   80%,
35   100% {
36     box-shadow: 0 0 #FFF;
37     height: 4em;
38   }
39   40% {
40     box-shadow: 0 -2em #ffffff;
41     height: 5em;
42   }
43 }
44 @keyframes load1 {
45   0%,
46   80%,
47   100% {
48     box-shadow: 0 0 #FFF;
49     height: 4em;
50   }
51   40% {
52     box-shadow: 0 -2em #ffffff;
53     height: 5em;
54   }
55 }

View Code

Demo 2:

第一步：首先一樣新建兩個::before和::after僞元素副本，設置形狀：主元素爲圓形，加1em的box-shadow，即外面的白色圓環。僞元素爲半圓，背景色與容器背景色相同。爲了更直觀地查看整體結構咱們給僞元素加上2px的boder，並將背景調爲半透明，以下圖所示。

第二步：設置關鍵幀，使用CSS Transform屬性，具體介紹可參考Transform。0%處設置爲 transform: rotate(0deg); 100%處設置爲 transform: rotate(360deg);

第三步：將動畫效果加入到兩個僞元素中。在此必定要注意設置它們的transform-origin屬性，即旋轉中心點，這在上面的Transform參考文章中也有提到。由於CSS會默認繞着元素中心點進行旋轉，而在此咱們須要它實現繞主元素中心點進行旋轉變換。

如下爲Demo2的CSS代碼：

 1 .load2 .loader,
 2 .load2 .loader:before,
 3 .load2 .loader:after {
 4   border-radius: 50%;
 5 }
 6 .load2 .loader:before,
 7 .load2 .loader:after {
 8   position: absolute;
 9   content: '';
10 }
11 .load2 .loader:before {
12   width: 5.2em;
13   height: 10.2em;
14   background: #0dcecb;
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 .load2 .loader {
24   font-size: 11px;
25   text-indent: -99999em;
26   margin: 5em auto;
27   position: relative;
28   width: 10em;
29   height: 10em;
30   box-shadow: inset 0 0 0 1em #FFF;
31 }
32 .load2 .loader:after {
33   width: 5.2em;
34   height: 10.2em;
35   background: #0dcecb;
36   border-radius: 0 10.2em 10.2em 0;
37   top: -0.1em;
38   left: 5.1em;
39   -webkit-transform-origin: 0px 5.1em;
40   transform-origin: 0px 5.1em;
41   -webkit-animation: load2 2s infinite ease;
42   animation: load2 2s infinite ease;
43 }
44 @-webkit-keyframes load2 {
45   0% {
46     -webkit-transform: rotate(0deg);
47     transform: rotate(0deg);
48   }
49   100% {
50     -webkit-transform: rotate(360deg);
51     transform: rotate(360deg);
52   }
53 }
54 @keyframes load2 {
55   0% {
56     -webkit-transform: rotate(0deg);
57     transform: rotate(0deg);
58   }
59   100% {
60     -webkit-transform: rotate(360deg);
61     transform: rotate(360deg);
62   }
63 }

View Code

Demo 3:

第一步：主元素爲一個從左至右漸變的圓形，以下圖所示。在此使用了linear-gradient，該屬性已獲得廣泛兼容，若是須要兼容老版本的IE，可考慮使用濾鏡（filter）實現。

第二步：添加::before和::after僞元素副本，從下方左圖中能夠看出，僞元素一個爲半徑稍小的圓形，背景色與容器顏色相同，一個爲1/4扇形，顏色爲白色。最終效果如右圖所示。

第三步：接下來的事就瓜熟蒂落了，設置關鍵幀加入旋轉效果便可。

CSS代碼以下：

 1 .load3 .loader {
 2   font-size: 10px;
 3   margin: 5em auto;
 4   text-indent: -9999em;
 5   width: 11em;
 6   height: 11em;
 7   border-radius: 50%;
 8   background: #ffffff;
 9   background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
10   background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
11   background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
12   background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
13   background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
14   position: relative;
15   -webkit-animation: load3 1.4s infinite linear;
16   animation: load3 1.4s infinite linear;
17 }
18 .load3 .loader:before {
19   width: 50%;
20   height: 50%;
21   background: #FFF;
22   border-radius: 100% 0 0 0;
23   position: absolute;
24   top: 0;
25   left: 0;
26   content: '';
27 }
28 .load3 .loader:after {
29   background: #0dcecb;
30   width: 75%;
31   height: 75%;
32   border-radius: 50%;
33   content: '';
34   margin: auto;
35   position: absolute;
36   top: 0;
37   left: 0;
38   bottom: 0;
39   right: 0;
40 }
41 @-webkit-keyframes load3 {
42   0% {
43     -webkit-transform: rotate(0deg);
44     transform: rotate(0deg);
45   }
46   100% {
47     -webkit-transform: rotate(360deg);
48     transform: rotate(360deg);
49   }
50 }
51 @keyframes load3 {
52   0% {
53     -webkit-transform: rotate(0deg);
54     transform: rotate(0deg);
55   }
56   100% {
57     -webkit-transform: rotate(360deg);
58     transform: rotate(360deg);
59   }
60 }

View Code

Demo 4:

第一步：此效果只須要一個主元素，隨後在動畫中加入數個box-shadow便可。從下圖能夠看到主元素爲1個小圓形，將其周圍分爲8個區域，每一個地方可存放一個box-shadow副本（咱們徹底能夠把box-shadow創造出的陰影看作主元素的拷貝，就像text-shadow那樣）。

第二步：定義關鍵幀，在0%、12.5%、25%、37.5%、50%、62.5%、75%、87.5%、100%處設置box-shadow的大小，讓其順時針或者逆時針逐個增大。

第三步：加入動畫效果。

CSS代碼以下：

 1 .load4 .loader {
 2   font-size: 20px;
 3   margin: 5em auto;
 4   width: 1em;
 5   height: 1em;
 6   border-radius: 50%;
 7   position: relative;
 8   text-indent: -9999em;
 9   -webkit-animation: load4 1.3s infinite linear;
10   animation: load4 1.3s infinite linear;
11 }
12 @-webkit-keyframes load4 {
13   0%,
14   100% {
15     box-shadow: 0em -3em 0em 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 0em #ffffff;
16   }
17   12.5% {
18     box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 0.2em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
19   }
20   25% {
21     box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 0.2em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
22   }
23   37.5% {
24     box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 0.2em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
25   }
26   50% {
27     box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 0.2em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
28   }
29   62.5% {
30     box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 -0.5em #ffffff;
31   }
32   75% {
33     box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0 0em #ffffff;
34   }
35   87.5% {
36     box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 0.2em #ffffff;
37   }
38 }
39 @keyframes load4 {
40   0%,
41   100% {
42     box-shadow: 0em -3em 0em 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 0em #ffffff;
43   }
44   12.5% {
45     box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 0.2em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
46   }
47   25% {
48     box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 0.2em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
49   }
50   37.5% {
51     box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 0.2em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
52   }
53   50% {
54     box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 0.2em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
55   }
56   62.5% {
57     box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 -0.5em #ffffff;
58   }
59   75% {
60     box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0 0em #ffffff;
61   }
62   87.5% {
63     box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 0.2em #ffffff;
64   }
65 }

View Code

Demo 5:

跟Demo 4很是相似，只是將設置box-shadow的大小改成設置其顏色透明度。

附上代碼：

 1 .load5 .loader {
 2   margin: 4em auto;
 3   font-size: 25px;
 4   width: 1em;
 5   height: 1em;
 6   border-radius: 50%;
 7   position: relative;
 8   text-indent: -9999em;
 9   -webkit-animation: load5 1.1s infinite ease;
10   animation: load5 1.1s infinite ease;
11 }
12 @-webkit-keyframes load5 {
13   0%,
14   100% {
15     box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
16   }
17   12.5% {
18     box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
19   }
20   25% {
21     box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
22   }
23   37.5% {
24     box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
25   }
26   50% {
27     box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
28   }
29   62.5% {
30     box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
31   }
32   75% {
33     box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
34   }
35   87.5% {
36     box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
37   }
38 }
39 @keyframes load5 {
40   0%,
41   100% {
42     box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
43   }
44   12.5% {
45     box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
46   }
47   25% {
48     box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
49   }
50   37.5% {
51     box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
52   }
53   50% {
54     box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
55   }
56   62.5% {
57     box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
58   }
59   75% {
60     box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
61   }
62   87.5% {
63     box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
64   }
65 }

View Code

Demo 6:

第一步：運用Demo 四、5的思路，在關鍵幀中給主元素建立5個box-shadow副本。

第二步：在0%、5%、95%、100%處五個副本處於重疊狀態，再在30%、55%處設置其分離狀態，並加入transform的旋轉效果便可實現小球的加速、減速模擬。咱們沒必要在關鍵幀中定義太多節點，由於CSS會自動去處理中間的過渡狀態。

第三步：將動畫加入到主元素中。

CSS代碼以下：

 1 .load6 .loader {
 2   font-size: 90px;
 3   text-indent: -9999em;
 4   overflow: hidden;
 5   width: 1em;
 6   height: 1em;
 7   border-radius: 50%;
 8   margin: 0.8em auto;
 9   position: relative;
10   -webkit-animation: load6 1.7s infinite ease;
11   animation: load6 1.7s infinite ease;
12 }
13 @-webkit-keyframes load6 {
14   0% {
15     -webkit-transform: rotate(0deg);
16     transform: rotate(0deg);
17     box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;
18   }
19   5%,
20   95% {
21     box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;
22   }
23   30% {
24     box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.51em -0.66em 0 -0.42em #ffffff, -0.75em -0.36em 0 -0.44em #ffffff, -0.83em -0.03em 0 -0.46em #ffffff, -0.81em 0.21em 0 -0.477em #ffffff;
25   }
26   55% {
27     box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.29em -0.78em 0 -0.42em #ffffff, -0.43em -0.72em 0 -0.44em #ffffff, -0.52em -0.65em 0 -0.46em #ffffff, -0.57em -0.61em 0 -0.477em #ffffff;
28   }
29   100% {
30     -webkit-transform: rotate(360deg);
31     transform: rotate(360deg);
32     box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;
33   }
34 }
35 @keyframes load6 {
36   0% {
37     -webkit-transform: rotate(0deg);
38     transform: rotate(0deg);
39     box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;
40   }
41   5%,
42   95% {
43     box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;
44   }
45   30% {
46     box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.51em -0.66em 0 -0.42em #ffffff, -0.75em -0.36em 0 -0.44em #ffffff, -0.83em -0.03em 0 -0.46em #ffffff, -0.81em 0.21em 0 -0.477em #ffffff;
47   }
48   55% {
49     box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.29em -0.78em 0 -0.42em #ffffff, -0.43em -0.72em 0 -0.44em #ffffff, -0.52em -0.65em 0 -0.46em #ffffff, -0.57em -0.61em 0 -0.477em #ffffff;
50   }
51   100% {
52     -webkit-transform: rotate(360deg);
53     transform: rotate(360deg);
54     box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0 -0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0 -0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;
55   }
56 }

View Code

Demo 7:

第一眼看着相似於Demo 1和Demo 4的結合，實現方法其實不止一種。一種思路是建立兩個僞元素而後給三個元素都建立box-shadow，控制陰影大小和動畫時延便可；另外一種思路是像前幾個例子同樣只須要對主元素建立兩個box-shadow副本，並在關鍵幀中對各節點設置對應大小。Demo中使用的是前一種方法。

附上CSS代碼：

 1 .load7 .loader:before,
 2 .load7 .loader:after,
 3 .load7 .loader {
 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 .load7 .loader {
13   margin: 8em auto;
14   font-size: 10px;
15   position: relative;
16   text-indent: -9999em;
17   -webkit-animation-delay: -0.16s;
18   animation-delay: -0.16s;
19 }
20 .load7 .loader:before {
21   left: -3.5em;
22   -webkit-animation-delay: -0.32s;
23   animation-delay: -0.32s;
24 }
25 .load7 .loader:after {
26   left: 3.5em;
27 }
28 .load7 .loader:before,
29 .loader:after {
30   content: '';
31   position: absolute;
32   top: 0;
33 }
34 @-webkit-keyframes load7 {
35   0%,
36   80%,
37   100% {
38     box-shadow: 0 2.5em 0 -1.3em #ffffff;
39   }
40   40% {
41     box-shadow: 0 2.5em 0 0 #FFF;
42   }
43 }
44 @keyframes load7 {
45   0%,
46   80%,
47   100% {
48     box-shadow: 0 2.5em 0 -1.3em #ffffff;
49   }
50   40% {
51     box-shadow: 0 2.5em 0 0 #FFF;
52   }
53 }

View Code

Demo 8:

相信有了Demo 2的例子不少朋友都會立刻想到建立兩個僞元素交替覆蓋的方法，不過其實也不用那麼複雜，咱們只須要對主元素的border-top、border-right、border-bottom、border-left分別進行設置便可，相似於CSS三角形的製做原理。

附上CSS代碼：

 1 .load8 .loader {
 2   margin: 6em auto;
 3   font-size: 10px;
 4   position: relative;
 5   text-indent: -9999em;
 6   border-top: 1.1em solid rgba(255, 255, 255, 0.2);
 7   border-right: 1.1em solid rgba(255, 255, 255, 0.2);
 8   border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
 9   border-left: 1.1em solid #ffffff;
10   -webkit-animation: load8 1.1s infinite linear;
11   animation: load8 1.1s infinite linear;
12 }
13 .load8 .loader,
14 .load8 .loader:after {
15   border-radius: 50%;
16   width: 10em;
17   height: 10em;
18 }
19 @-webkit-keyframes load8 {
20   0% {
21     -webkit-transform: rotate(0deg);
22     transform: rotate(0deg);
23   }
24   100% {
25     -webkit-transform: rotate(360deg);
26     transform: rotate(360deg);
27   }
28 }
29 @keyframes load8 {
30   0% {
31     -webkit-transform: rotate(0deg);
32     transform: rotate(0deg);
33   }
34   100% {
35     -webkit-transform: rotate(360deg);
36     transform: rotate(360deg);
37   }
38 }

View Code

最後的最後，恰好今天是七夕，不論是人是犬都祝福你們節日快樂啦！

再附一圖，哈哈哈 ~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。