怎么用CSS3实现进度加载动画

本篇内容主要讲解“怎么用CSS3实现进度加载动画”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用CSS3实现进度加载动画”吧!

先看看效果图：

CSS Code复制内容到剪贴板

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.   

到此，相信大家对“怎么用CSS3实现进度加载动画”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！