純CSS3實現loading正在加載。。。

時間 2019-11-12

標籤 css3 css 實現 loading 正在加載欄目 CSS 简体版

原文原文鏈接

　　場景分析：隨着我司專職前端切圖人員離職，切圖的活從新落到咱們小組團隊成員的平常任務list裏面，加上咱們小組 7個前端基本都是後臺轉的前端（趕鴨子上架前端如今需求量大沒辦法）加上本身也將就一年不切圖了（有人專職切圖就是好啊，論切圖的重要性），平常效率大打折扣。這不來需求了不會切圖了html

　　UI讓作個動效，嗯就是這個看着簡單的動效好吧花了將近一下午前端

　　廢話很少說開幹上代碼先：web

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>純CSS3實現loading正在加載。。。</title>
 6 </head>
 7 <style>
 8 .waiting {
 9   position: relative;
10   width: 69px;
11   height: 35px;
12   line-height: 35px;
13   background: #E4F1FD;
14   border-radius: 20px;
15   margin-top: 15px;
16   margin-left: 15px;
17   color: #FFAF32;
18 }
19 /*這個是每一個點的本身的塊*/
20 .waiting li {
21     position: absolute; 
22     top: 13px; 
23     width: 10px; 
24     height: 10px;
25     line-height: 10px;
26     list-style: none;
27     -webkit-animation: bounce_waiting 1.2s linear infinite;
28     -webkit-transform: scale(0); 
29     -webkit-border-radius: 5px;
30     animation: bounce_waiting 1.2s linear infinite;
31     transform: scale(0); 
32     border-radius: 5px; 
33 }
34 .waiting li:first-child { 
35     left: 15px; 
36     -webkit-animation-delay: 0.48s; 
37     animation-delay: .48s; 
38 }
39 .waiting li:nth-child(2) { 
40     left: 30px; 
41     -webkit-animation-delay: 0.6s; 
42     animation-delay: 0.6s; 
43 }
44 .waiting li:nth-child(3) { 
45     left: 45px; 
46     -webkit-animation-delay: 0.72s; 
47     animation-delay: 0.72s; 
48 }
49 
50 /*定義動畫函數，從1倍減少到0*/
51 @-webkit-keyframes bounce_waiting { 
52      0% {
53         -webkit-transform:scale(1);
54         background-color:#FFAF32;
55     }
56      100% {
57         -webkit-transform:scale(0);
58         background-color:#ffffff;
59     }
60 }
61 @keyframes bounce_waiting { 
62      0% {
63         transform:scale(1);
64         background-color:#FFAF32;
65     }
66      100% {
67         transform:scale(0);
68         background-color:#ffffff;
69     }
70 }
71 </style>
72 <body>
73     <div class="waiting">
74         <ul>
75             <Li></Li>
76             <Li></Li>
77             <Li></Li>
78         </ul>
79     </div>
80 </body>
81 </html>

　　從代碼裏咱們能夠看到其實實現原理很簡單函數

　　用到了CSS3的 transform animation 屬性嗯就是這樣動畫

　　運用CSS3的animation 和 transform 屬性咱們其實能夠實現不少簡單的動效後續有相似的再繼續分享～　　spa

相關標籤/搜索

每日一句

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