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

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

成都创新互联公司主营溪湖网站建设的网络公司,主营网站建设方案,成都APP应用开发,溪湖h5微信小程序定制开发搭建,溪湖网站营销推广欢迎溪湖等地区企业咨询

先看看效果图：

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实现进度加载动画”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

新闻名称：怎么用CSS3实现进度加载动画
链接分享：https://www.cdcxhl.com/article2/johcoc.html

成都网站建设公司_创新互联，为您提供关键词优化、ChatGPT、外贸网站建设、、品牌网站制作、商城网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联