本篇內(nèi)容主要講解“怎么用CSS3實(shí)現(xiàn)進(jìn)度加載動(dòng)畫(huà)”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“怎么用CSS3實(shí)現(xiàn)進(jìn)度加載動(dòng)畫(huà)”吧!

成都創(chuàng)新互聯(lián)公司主營(yíng)溪湖網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都APP應(yīng)用開(kāi)發(fā),溪湖h5微信小程序定制開(kāi)發(fā)搭建,溪湖網(wǎng)站營(yíng)銷(xiāo)推廣歡迎溪湖等地區(qū)企業(yè)咨詢(xún)

先看看效果圖：

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

1. #loader1,     

2. #loader1:before,     

3. #loader1:after {     

4.    background: #f2fa08;     

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.  #loader1:before,     

11.  #loader1:after {     

12.    position: absolute;     

13.    top: 0;     

14.    content: '';     

15.  }     

16.  #loader1:before {     

17.    left: -1.5em;     

18.  }     

19.  #loader1 {     

20.    text-indent: -9999em;     

21.    margin: 50px 50px;     

22.    position: relative;     

23.    float: left;     

24.    font-size: 11px;     

25.    -webkit-animation-delay: 0.16s;     

26.    animation-delay: 0.16s;     

27.  }     

28.  #loader1:after {     

29.    left: 1.5em;     

30.    -webkit-animation-delay: 0.32s;     

31.    animation-delay: 0.32s;     

32.  }     

33.  @-webkit-keyframes load1 {     

34.    0%,     

35.    80%,     

36.    100% {     

37.      box-shadow: 0 0 #f2fa08;     

38.      height: 4em;     

39.    }     

40.    40% {     

41.      box-shadow: 0 -2em #f2fa08;     

42.      height: 5em;     

43.    }     

44.  }     

45.  @keyframes load1 {     

46.    0%,     

47.    80%,     

48.    100% {     

49.      box-shadow: 0 0 #f2ff08;     

50.      height: 4em;     

51.    }     

52.    40% {     

53.      box-shadow: 0 -2em #f2ff08;     

54.      height: 5em;     

55.    }     

56.  }     

57.   

到此，相信大家對(duì)“怎么用CSS3實(shí)現(xiàn)進(jìn)度加載動(dòng)畫(huà)”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！