CSS3实现粒子旋转伸缩加载动画

本文运用CSS3的旋转Transform属性和动画的执行百分比制作而成，很特别的CSS3实现粒子旋转伸缩加载动画，具体内容如下
 

CSS Code复制内容到剪贴板

1. #loader6 {     
2.   margin: 60px 50px;     
3.   float: left;     
4.   font-size: 90px;     
5.   text-indent: -9999em;     
6.   overflow: hidden;     
7.   width: 1em;     
8.   height: 1em;     
9.   border-radius: 50%;     
10.   position: relative;     
11.   -webkit-animation: load6 1.7s infinite ease;     
12.   animation: load6 1.7s infinite ease;     
13.  }     
14.  @-webkit-keyframes load6 {     
15.     0% {     
16.       -webkit-transform: rotate(0deg);     
17.       transform: rotate(0deg);     
18.       box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,     
19.                   -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,     
20.                   -0.11em -0.83em 0 -0.477em #ff0000;     
21.       }     
22.     5%,     
23.     95% {     
24.       box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,     
25.                   -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,     
26.                   -0.11em -0.83em 0 -0.477em #ff0000;     
27.     }     
28.     30% {     
29.       box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.51em -0.66em 0 -0.42em #ff0000,     
30.                   -0.75em -0.36em 0 -0.44em #ff0000, -0.83em -0.03em 0 -0.46em #ff0000,     
31.                   -0.81em 0.21em 0 -0.477em #ff0000;     
32.     }     
33.     55% {     
34.       box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.29em -0.78em 0 -0.42em #ff0000,     
35.                   -0.43em -0.72em 0 -0.44em #ff0000, -0.52em -0.65em 0 -0.46em #ff0000,     
36.                   -0.57em -0.61em 0 -0.477em #ff0000;     
37.     }     
38.     100% {     
39.       -webkit-transform: rotate(360deg);     
40.       transform: rotate(360deg);     
41.       box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,     
42.                   -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,     
43.                   -0.11em -0.83em 0 -0.477em #ff0000;     
44.     }     
45.  }     
46. @keyframes load6 {     
47.   0% {     
48.     -webkit-transform: rotate(0deg);     
49.     transform: rotate(0deg);     
50.     box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,     
51.                 -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,     
52.                 -0.11em -0.83em 0 -0.477em #ff0000;     
53.     }     
54.   5%,     
55.   95% {     
56.     box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,     
57.                 -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,     
58.                 -0.11em -0.83em 0 -0.477em #ff0000;     
59.   }     
60.   30% {     
61.     box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.51em -0.66em 0 -0.42em #ff0000,     
62.                 -0.75em -0.36em 0 -0.44em #ff0000, -0.83em -0.03em 0 -0.46em #ff0000,     
63.                 -0.81em 0.21em 0 -0.477em #ff0000;     
64.   }     
65.   55% {     
66.     box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.29em -0.78em 0 -0.42em #ff0000,     
67.                 -0.43em -0.72em 0 -0.44em #ff0000, -0.52em -0.65em 0 -0.46em #ff0000,     
68.                 -0.57em -0.61em 0 -0.477em #ff0000;     
69.   }     
70.   100% {     
71.     -webkit-transform: rotate(360deg);     
72.     transform: rotate(360deg);     
73.     box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,     
74.                 -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,     
75.                 -0.11em -0.83em 0 -0.477em #ff0000;     
76.   }     
77. }     

以上就是本文的全部内容，希望对大家学习CSS样式编写有所帮助，制作出更多精彩的加载动画效果。