纯DOM+CSS3实现简单的小风车动画

用CSS3实现了一个小风车的效果，转转转，挺简单。

效果

代码

1.   
2.   
3.   
4.   
5.       
6.       
7.       
8.     html {   
9.         font-size: 10px;   
10.     }   
11.   
12.     html * {   
13.         -webkit-box-sizing: border-box;   
14.                 box-sizing: border-box;   
15.     }   
16.   
17.     .windmill {   
18.         width: 25rem;   
19.         min-height: 30rem;   
20.         height: auto;   
21.         margin: 3rem auto;   
22.         display: -webkit-box;   
23.         display: -webkit-flex;   
24.         display: -ms-flexbox;   
25.         display: flex;   
26.         -webkit-box-orient: vertical;   
27.         -webkit-box-direction: normal;   
28.         -webkit-flex-direction: column;   
29.             -ms-flex-direction: column;   
30.                 flex-direction: column;   
31.         -webkit-box-pack: start;   
32.         -webkit-justify-content: flex-start;   
33.             -ms-flex-pack: start;   
34.                 justify-content: flex-start;   
35.         -webkit-box-align: center;   
36.         -webkit-align-items: center;   
37.             -ms-flex-align: center;   
38.                 align-items: center;   
39.     }   
40.        
41.   
42.     .windmill-head {   
43.         height: 20rem;   
44.         width: 20rem;   
45.         display: -webkit-box;   
46.         display: -webkit-flex;   
47.         display: -ms-flexbox;   
48.         display: flex;   
49.         -webkit-box-orient: horizontal;   
50.         -webkit-box-direction: normal;   
51.         -webkit-flex-direction: row;   
52.             -ms-flex-direction: row;   
53.                 flex-direction: row;   
54.         -webkit-flex-wrap: wrap;   
55.             -ms-flex-wrap: wrap;   
56.                 flex-wrap: wrap;   
57.         -webkit-justify-content: space-around;   
58.             -ms-flex-pack: distribute;   
59.                 justify-content: space-around;   
60.         -webkit-align-content: space-around;   
61.             -ms-flex-line-pack: distribute;   
62.                 align-content: space-around;   
63.         -webkit-transform: translateZ(0);   
64.                 transform: translateZ(0);   
65.         -webkit-animation: rotate-windmill 1s linear infinite;   
66.                 animation: rotate-windmill 1s linear infinite;   
67.         border-radius: 50%;   
68.         border: 0.1rem solid #DBE526;   
69.         -webkit-transition: border-radius 2s linear;   
70.         transition: border-radius 2s linear;   
71.     }   
72.        
73.   
74.     .wrapper {   
75.         display: -webkit-box;   
76.         display: -webkit-flex;   
77.         display: -ms-flexbox;   
78.         display: flex;   
79.         -webkit-box-orient: vertical;   
80.         -webkit-box-direction: normal;   
81.         -webkit-flex-direction: column;   
82.             -ms-flex-direction: column;   
83.                 flex-direction: column;   
84.         -webkit-flex-wrap: wrap;   
85.             -ms-flex-wrap: wrap;   
86.                 flex-wrap: wrap;   
87.         -webkit-box-pack: justify;   
88.         -webkit-justify-content: space-between;   
89.             -ms-flex-pack: justify;   
90.                 justify-content: space-between;   
91.         height: 135%;   
92.         width: 50%;   
93.         -webkit-box-align: center;   
94.         -webkit-align-items: center;   
95.             -ms-flex-align: center;   
96.                 align-items: center;   
97.     }   
98.        
99.   
100.     .wrapper1 {   
101.         -webkit-transform: rotate(-45deg) translate(5rem);   
102.                 transform: rotate(-45deg) translate(5rem);   
103.         -webkit-transform-origin: right center;   
104.                 transform-origin: right center;   
105.     }   
106.   
107.     .wrapper2 {   
108.         -webkit-transform: rotate(45deg) translate(-5rem);   
109.                 transform: rotate(45deg) translate(-5rem);   
110.         -webkit-transform-origin: left center;   
111.                 transform-origin: left center;   
112.     }   
113.        
114.   
115.     .leaf {   
116.         height: 13rem;   
117.         width: 5rem;   
118.         border-radius: 5rem/ 5rem 5rem 20rem 20rem;   
119.         -webkit-box-shadow: 0.1rem 0.1rem 1rem rgba(64, 56, 56, .35) inset, 0.2rem 0.2rem 0.05rem rgba(0, 0, 0, .65);   
120.                 box-shadow: 0.1rem 0.1rem 1rem rgba(64, 56, 56, .35) inset, 0.2rem 0.2rem 0.05rem rgba(0, 0, 0, .65);   
121.     }   
122.   
123.     .leaf1 {   
124.         border: 0.05rem solid #D1A23A;   
125.         -webkit-transform: rotate(0deg) translate(0);   
126.                 transform: rotate(0deg) translate(0);   
127.         background-color: rgba(230, 0, 100, 5);   
128.         background: -webkit-gradient(linear, left top, left bottom, from(#D02CE4), to(#f5f5f5));   
129.         background: -webkit-linear-gradient(top, #D02CE4, #f5f5f5);   
130.         background: linear-gradient(180deg, #D02CE4, #f5f5f5);   
131.         -webkit-transition: background 2s linear;   
132.         transition: background 2s linear;   
133.     }   
134.   
135.     .leaf2 {   
136.         border: 0.05rem solid #49D13A;   
137.         background-color: rgba(230, 0, 150, 5);   
138.         -webkit-transform: rotate(-180deg) translate(0);   
139.                 transform: rotate(-180deg) translate(0);   
140.         background: -webkit-gradient(linear, left top, left bottom, from(#B91717), to(#f5f5f5));   
141.         background: -webkit-linear-gradient(top, #B91717, #f5f5f5);   
142.         background: linear-gradient(180deg, #B91717, #f5f5f5);   
143.         -webkit-transition: background 2s linear 2s;   
144.         transition: background 2s linear 2s;   
145.     }   
146.   
147.     .leaf3 {   
148.         border: 0.05rem solid #C6079D;   
149.         background-color: rgba(130, 0, 100, 5);   
150.         -webkit-transform: rotate(0deg) translate(0);   
151.                 transform: rotate(0deg) translate(0);   
152.         background: -webkit-gradient(linear, left top, left bottom, from(#1CBA9F), to(#f5f5f5));   
153.         background: -webkit-linear-gradient(top, #1CBA9F, #f5f5f5);   
154.         background: linear-gradient(180deg, #1CBA9F, #f5f5f5);   
155.         -webkit-transition: background 2s linear;   
156.         transition: background 2s linear;   
157.         -webkit-transition: background 2s linear 4s;   
158.         transition: background 2s linear 4s;   
159.     }   
160.   
161.     .leaf4 {   
162.         border: 0.05rem solid #3A5FD1;   
163.         background-color: rgba(230, 100, 100, 5);   
164.         -webkit-transform: rotate(-180deg) translate(0);   
165.                 transform: rotate(-180deg) translate(0);   
166.         background: -webkit-gradient(linear, left top, left bottom, from(#335642), to(#f5f5f5));   
167.         background: -webkit-linear-gradient(top, #335642, #f5f5f5);   
168.         background: linear-gradient(180deg, #335642, #f5f5f5);   
169.         -webkit-transition: background 2s linear 6s;   
170.         transition: background 2s linear 6s;   
171.     }   
172.        
173.   
174.     .windmill-pillar {   
175.         -webkit-transform: translateZ(0);   
176.                 transform: translateZ(0);   
177.         width: 3rem;   
178.         height: 20rem;   
179.         background: #FFF;   
180.         -webkit-transform: translateY(-52%);   
181.                 transform: translateY(-52%);   
182.         position: relative;   
183.         z-index: -2;   
184.         border-radius: 50% 50% 0 0;   
185.         -webkit-animation: cd 2s linear infinite;   
186.                 animation: cd 2s linear infinite;   
187.     }   
188.   
189.     @-webkit-keyframes rotate-windmill {   
190.         0% {   
191.             -webkit-transform: rotate(0);   
192.                     transform: rotate(0);   
193.         }   
194.         100% {   
195.             -webkit-transform: rotate(360deg);   
196.                     transform: rotate(360deg);   
197.         }   
198.     }   
199.   
200.     @keyframes rotate-windmill {   
201.         0% {   
202.             -webkit-transform: rotate(0);   
203.                     transform: rotate(0);   
204.         }   
205.         100% {   
206.             -webkit-transform: rotate(360deg);   
207.                     transform: rotate(360deg);   
208.         }   
209.     }   
210.   
211.     @-webkit-keyframes cd {   
212.         0% {   
213.             background: #F5F5F5;   
214.         }   
215.         50% {   
216.             background: #E1CB82;   
217.         }   
218.         75% {   
219.             background: #F1F358;   
220.         }   
221.         100% {   
222.             background: #FFFC00;   
223.         }   
224.     }   
225.   
226.     @keyframes cd {   
227.         0% {   
228.             background: #F5F5F5;   
229.         }   
230.         50% {   
231.             background: #E1CB82;   
232.         }   
233.         75% {   
234.             background: #F1F358;   
235.         }   
236.         100% {   
237.             background: #FFFC00;   
238.         }   
239.     }   
240.       
241.   
242.   
243.   
244.       
245.           
246.               
247.