一款纯css3制作的2015年元旦雪人动画特效教程

在圣诞节或者是元旦的时候，爱编程小编给大家分享一款纯css3实现的雪人动画特效。该实例实现一个雪人跳动的特效，效果图如下：

实现的代码。

html代码：

XML/HTML Code复制内容到剪贴板

1. <span class="text">lolwut<small>-@rsmswlln</small></span>  
2.    <div class="body">  
3.        <div class="hat">  
4.            <div class="ribbon">  
5.            </div>  
6.        </div>  
7.        <div class="face">  
8.        </div>  
9.        <div class="scarf">  
10.        </div>  
11.        <div class="right-arm">  
12.            <div class="hand">  
13.            </div>  
14.        </div>  
15.        <div class="left-arm">  
16.            <div class="hand">  
17.            </div>  
18.        </div>  
19.    </div>  
20.    <div class="puddle">  
21.    </div>  

css代码：

CSS Code复制内容到剪贴板

1. body {   
2.   background: #c0392b;   
3. }   
4. .body {   
5.   width: 250px;   
6.   height: 250px;   
7.   background: #ffffff;   
8.   border-radius: 50%;   
9.   box-shadow: inset -20px -5px 35px rgba(0, 0, 0, 0.2);   
10.   position: absolute;   
11.   rightright: 0;   
12.   left: 0;   
13.   margin: 300px auto;   
14.   animation: jump 1s infinite;   
15. }   
16. .body:before {   
17.   z-index: 2;   
18.   content: "";   
19.   width: 180px;   
20.   height: 180px;   
21.   background: #ffffff;   
22.   border-radius: 50%;   
23.   box-shadow: inset -10px -5px 10px rgba(0, 0, 0, 0.2);   
24.   position: relative;   
25.   display: inline-block;   
26.   top: -120px;   
27.   left: 25px;   
28. }   
29. .body:after {   
30.   content: "";   
31.   width: 140px;   
32.   height: 140px;   
33.   background: #ffffff;   
34.   border-radius: 50%;   
35.   box-shadow: inset -10px -5px 10px rgba(0, 0, 0, 0.2);   
36.   position: relative;   
37.   display: inline-block;   
38.   top: -400px;   
39.   left: 20px;   
40. }   
41. .body > .hat {   
42.   width: 200px;   
43.   height: 15px;   
44.   border-radius: 50%;   
45.   background-color: #111111;   
46.   position: absolute;   
47.   z-index: 4;   
48.   top: -200px;   
49.   left: -15px;   
50. }   
51. .body > .hat:before {   
52.   content: "";   
53.   width: 100px;   
54.   height: 65px;   
55.   background-color: #111111;   
56.   display: inline-block;   
57.   position: relative;   
58.   top: -55px;   
59.   left: 51px;   
60. }   
61. .body > .hat:after {   
62.   z-index: 5;   
63.   content: "";   
64.   display: inline-block;   
65.   position: relative;   
66.   top: -145px;   
67.   left: 51px;   
68.   width: 100px;   
69.   height: 5px;   
70.   border-radius: 50%;   
71.   background-color: #2b2b2b;   
72. }   
73. .body > .hat > .ribbon {   
74.   height: 10px;   
75.   width: 100px;   
76.   background-color: #6d2018;   
77.   position: relative;   
78.   top: -90px;   
79.   left: 51px;   
80.   z-index: 6;   
81. }   
82. .body > .face {   
83.   z-index: 3;   
84.   width: 12px;   
85.   height: 12px;   
86.   background-color: #2c3e50;   
87.   border-radius: 50%;   
88.   position: absolute;   
89.   top: -170px;   
90.   left: 38px;   
91. }   
92. .body > .face:before {   
93.   content: "";   
94.   background-color: transparent;   
95.   display: inline-block;   
96.   position: relative;   
97.   top: 30px;   
98.   left: -45px;   
99.   transform: rotate(-15deg);   
100.   border-top: 12px solid transparent;   
101.   border-bottom: 12px solid transparent;   
102.   border-right: 40px solid #e67e22;   
103. }   
104. .body > .face:after {   
105.   content: "";   
106.   background-color: transparent;   
107.   display: inline-block;   
108.   position: relative;   
109.   top: 0;   
110.   left: -46px;   
111.   transform: rotate(-15deg);   
112.   border-top: 12px solid transparent;   
113.   border-right: 40px solid #bf6516;   
114. }   
115. .body > .scarf {   
116.   z-index: 3;   
117.   width: 150px;   
118.   height: 30px;   
119.   background-color: #2980b9;   
120.   position: absolute;   
121.   top: -110px;   
122.   left: 25px;   
123.   transform: rotate(-15deg);   
124.   border-radius: 20%;   
125. }   
126. .body > .scarf:after {   
127.   content: "";   
128.   width: 75px;   
129.   height: 30px;   
130.   background-color: #2980b9;   
131.   display: inline-block;   
132.   position: relative;   
133.   top: 16px;   
134.   left: 80px;   
135.   transform: rotate(85deg);   
136.   border-radius: 20%;   
137. }   
138. .body > .left-arm,   
139. .body .rightright-arm {   
140.   z-index: 7;   
141.   width: 100px;   
142.   height: 6px;   
143.   background-color: #825a2c;   
144.   position: absolute;   
145.   top: 10px;   
146.   left: -20px;   
147.   transform: rotate(-15deg);   
148.   animation: rub-rightright 0.5s infinite;   
149. }   
150. .body > .left-arm > .hand,   
151. .body .rightright-arm > .hand {   
152.   width: 25px;   
153.   height: 6px;   
154.   background-color: #825a2c;   
155.   position: absolute;   
156.   top: -32px;   
157.   left: -60px;   
158.   transform: rotate(75deg);   
159. }   
160. .body > .left-arm:after,   
161. .body .rightright-arm:after {   
162.   content: "";   
163.   width: 75px;   
164.   height: 6px;   
165.   background-color: #a87439;   
166.   display: inline-block;   
167.   position: relative;   
168.   top: -24px;   
169.   left: -70px;   
170.   transform: rotate(25deg);   
171. }   
172. .body > .left-arm.left-arm,   
173. .body .rightright-arm.left-arm {   
174.   background-color: #a87439;   
175.   animation: rub-left 0.5s infinite;   
176.   top: -15px;   
177.   z-index: 1;   
178. }   
179. .body > .left-arm.left-arm > .hand,   
180. .body .rightright-arm.left-arm > .hand {   
181.   background-color: #a87439;   
182.   top: -14px;   
183.   transform: rotate(45deg);   
184. }   
185. .body > .left-arm.left-arm:after,   
186. .body .rightright-arm.left-arm:after {   
187.   background-color: #825a2c;   
188.   transform: rotate(5deg);   
189.   top: -12px;   
190.   left: -74px;   
191. }   
192. .puddle {   
193.   z-index: -1;   
194.   width: 200px;   
195.   height: 100px;   
196.   background: #2980b9;   
197.   border-radius: 50%;   
198.   position: absolute;   
199.   rightright: 0;   
200.   left: -50px;   
201.   margin: 500px auto;   
202. }   
203. .puddle:after {   
204.   content: "";   
205.   width: 120px;   
206.   height: 80px;   
207.   display: inline-block;   
208.   border-radius: 50%;   
209.   left: 150px;   
210.   position: relative;   
211.   background-color: #2980b9;   
212. }   
213. .text {   
214.   text-align: center;   
215.   font-family: 'Lobster', cursive;   
216.   font-size: 74px;   
217.   display: inline-block;   
218.   transform: rotate(-15deg);   
219.   position: absolute;   
220.   margin: 50px 30px;   
221.   color: #ffffff;   
222.   text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.5);   
223. }   
224. .text > small {   
225.   font-size: 20px;   
226.   display: block;   
227. }   
228. @keyframes rub-left {   
229.   0% {   
230.     margin-left: 0px;   
231.     margin-top: 0;   
232.   }   
233.   50% {   
234.     margin-left: 5px;   
235.     margin-top: 1px;   
236.   }   
237.   100% {   
238.     margin-left: 0px;   
239.     margin-top: 0;   
240.   }   
241. }   
242. @keyframes rub-rightright {   
243.   0% {   
244.     margin-left: 4px;   
245.   }   
246.   50% {   
247.     margin-left: 0px;   
248.   }   
249.   100% {   
250.     margin-left: 4px;   
251.   }   
252. }   
253. @keyframes jump {   
254.   0% {   
255.     margin: 300px auto;   
256.   }   
257.   40% {   
258.     margin: 250px auto;   
259.   }   
260.   80% {   
261.     margin: 300px auto;   
262.   }   
263. }