CSS实现横向粒子变动加载动画

ttx9n

这篇文章主要介绍了CSS实现横向粒子变动加载动画的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了CSS实现横向粒子变动加载动画的对应代码，供大家参考，具体内容如下

此处用到了CSS3动画animation属性的animation-fill-mode属性和animation-delay属性。

 ● animation-fill-mode属性规定动画在播放之前或之后，其动画效果是否可见。
        none：不改变默认行为。
        forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
        backwards：在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧
中定义）。
       both： 向前和向后填充模式都被应用。   

 ●  animation-delay属性定义动画何时开始。该属性允许负值，示例中延迟0.16s执行动画。         

CSS Code复制内容到剪贴板

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

 以上就是本文的全部内容，希望对大家学习CSS样式进行加载有所帮助。

i3x3r3

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

pb_tjc

的沙发水电费水电费

64000928

谢谢分享，先下来用用

thywok

8888888888888888

j__j33p

刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷

黑白键

很不错的玩意

雪龙Ui79

人都不在了啊 啊

thywok

哈哈哈哈哈哈

u6h2m4

搞个免费的用用