一款jquery和css3实现的卡通人物动画特效

        之前为大家分享了很多jquery和css3的动画实例。今天给大家带来一款非常炫的jquery和css3实现的卡通人物动画特效。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

1. <div class="wrapper">
   
2.         <div class="border-circle" id="one">
   
3.         </div>
   
4.         <div class="border-circle" id="two">
   
5.         </div>
   
6.         <div class="background-circle">
   
7.             <div class="triangle-light">
   
8.             </div>
   
9.             <div class="body">
   
10.             </div>
    
11.             <span class="shirt-text">W</span> <span class="shirt-text">E</span> <span class="shirt-text">
    
12.                 ♥</span> <span class="shirt-text">S</span> <span class="shirt-text">A</span>
    
13.             <span class="shirt-text">L</span> <span class="shirt-text">E</span> <span class="shirt-text">
    
14.                 S</span>
    
15.             <div class="triangle-dark">
    
16.             </div>
    
17.         </div>
    
18.         <div class="arms">
    
19.         </div>
    
20.         <div class="head">
    
21.             <div class="ear" id="left">
    
22.             </div>
    
23.             <div class="ear" id="right">
    
24.             </div>
    
25.             <div class="hair-main">
    
26.                 <div class="sideburn" id="left">
    
27.                 </div>
    
28.                 <div class="sideburn" id="right">
    
29.                 </div>
    
30.                 <div class="hair-top">
    
31.                 </div>
    
32.                 <div class="hair-back">
    
33.                 </div>
    
34.             </div>
    
35.             <div class="face">
    
36.                 <div class="hair-bottom">
    
37.                 </div>
    
38.                 <div class="nose">
    
39.                 </div>
    
40.                 <div class="eye-shadow" id="left">
    
41.                     <div class="eyebrow">
    
42.                     </div>
    
43.                     <div class="eye-one">
    
44.                         <div class="iris">
    
45.                         </div>
    
46.                     </div>
    
47.                 </div>
    
48.                 <div class="eye-shadow" id="right">
    
49.                     <div class="eyebrow">
    
50.                     </div>
    
51.                     <div class="eye-two">
    
52.                         <div class="iris">
    
53.                         </div>
    
54.                     </div>
    
55.                 </div>
    
56.                 <div class="mouth">
    
57.                 </div>
    
58.                 <div class="shadow-wrapper">
    
59.                     <div class="shadow">
    
60.                     </div>
    
61.                 </div>
    
62.             </div>
    
63.         </div>
    
64.         <span class="music-note" id="one">[        DISCUZ_CODE_4        ]lt;/span> <span class="music-note" id="two">[        DISCUZ_CODE_4        ]lt;/span>
    
65.     </div>

1. body, html{
   
2.   width:100%;
   
3.   height:100%;
   
4.   margin:0;
   
5.   display: table;
   
6.   text-align: center;
   
7.   z-index:0;
   
8. }
   
9. 
   
10. .wrapper{
    
11.   display: table-cell;
    
12.   vertical-align: middle;
    
13.   position: relative;
    
14. }
    
15. .background-circle{
    
16.   width: 100vw;
    
17.   height: 400px;
    
18.   border-radius: 0%;
    
19.   overflow: hidden;
    
20.   z-index:-1;
    
21.   margin: 0 auto;
    
22.   background: #FFE6E1;
    
23.   position: relative;
    
24.   -webkit-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
    
25.   -moz-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
    
26.   -o-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
    
27.   -ms-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
    
28.   animation:grow 0.7s 1 ease;
    
29.   -webkit-animation:grow 0.7s 1 ease;
    
30.   transform-origin: center;
    
31. }
    
32. .border-circle{
    
33.   width: 399px;
    
34.   height: 399px;
    
35.   border-radius: 100%;
    
36.   position: absolute;
    
37.   left: 50%;
    
38.   top: 50%;
    
39.   margin-left: -220px;
    
40.   margin-top: -220px;  
    
41.   border: 10px solid #FCB040;
    
42.   -webkit-transform: scale(0);
    
43.   transform: scale(0);
    
44.   -webkit-transform-origin: center;
    
45.   transform-origin: center;
    
46. }
    
47. .border-circle#one{
    
48.   animation:border-pulse 1s 3.1s 1 ease;
    
49.   animation-fill-mode: forwards;
    
50.   -webkit-animation:border-pulse 1s 3.1s 1 ease;
    
51.   -webkit-animation-fill-mode: forwards;
    
52. }
    
53. .border-circle#two{
    
54.   animation:border-pulse 1s 3.3s 1 ease;
    
55.   animation-fill-mode: forwards;
    
56.   -webkit-animation:border-pulse 1s 3.3s 1 ease;
    
57.   -webkit-animation-fill-mode: forwards;
    
58. }
    
59. 
    
60. .body{
    
61.   width: 150px;
    
62.   height: 600px;
    
63.   margin: 0 auto;
    
64.   background: #ff5200;
    
65.   border-radius: 10%;
    
66.   position: relative;
    
67.   z-index:2;
    
68.   top: 200px;
    
69.   animation:body-enter 0.7s 0.2s 1 ease;
    
70.   animation-fill-mode: forwards;
    
71.   -webkit-animation:body-enter 0.7s 0.2s 1 ease;
    
72.   -webkit-animation-fill-mode: forwards;
    
73. /*  box-shadow: 2px 3px 4px rgba(0,0,0,.4);
    
74. */}
    
75. 
    
76. .head{
    
77.   width: 156px;
    
78.   height: 220px;
    
79.   z-index:5;
    
80.   border-radius: 100%;
    
81.   background: #FFE4BE;
    
82.   position: absolute;
    
83.   top: 50%;
    
84.   left: 50%;
    
85.   margin-top: -210px;
    
86.   margin-left: -80px;
    
87.   animation:grow 0.7s 0.4s 1 ease, music-move 1s 3.3s infinite alternate ease-in-out;
    
88.   -webkit-animation:grow 0.7s 0.4s 1 ease, music-move 1s 3.3s infinite alternate ease-in-out;
    
89. /*
    
90.   animation:grow 0.7s 0.4s 1 ease;
    
91.   -webkit-animation:grow 0.7s 0.4s 1 ease;
    
92. */
    
93.   transform-origin: bottom;
    
94.   -webkit-transform-origin: bottom;
    
95. }
    
96. 
    
97. .hair-main{
    
98.   width:180px;
    
99.   height: 0px;
    
100.   background:#D8C078;
     
101.   border-radius: 54px 54px 0px 0px;
     
102.   margin-top: -10px;
     
103.   animation:hair-anim 0.7s 0.9s 1 ease;
     
104.   animation-fill-mode: forwards;
     
105.   -webkit-animation:hair-anim 0.7s 0.9s 1 ease;
     
106.   -webkit-animation-fill-mode: forwards;
     
107.   position: relative;
     
108.   z-index: 2;
     
109. }
     
110. 
     
111. .hair-back{
     
112.   width:30px;
     
113.   height: 0px;
     
114.   background: #D8C078;
     
115.   border-radius:40%;
     
116.   right:-90%;
     
117. animation:hairback-anim 0.7s 0.9s 1 ease;
     
118.   animation-fill-mode: forwards;
     
119.   -webkit-animation:hairback-anim 0.7s 0.9s 1 ease;
     
120.   -webkit-animation-fill-mode: forwards;
     
121.   position: relative;
     
122.   z-index: 0;
     
123. }
     
124. .hair-top{
     
125.   width: 128px;
     
126.   height: 70px;
     
127.   opacity: 0;
     
128.   border-top-right-radius: 30px;
     
129.   background: D8C078;
     
130.   position: relative;
     
131.   top: -17px;
     
132.   left: 50%;
     
133.   transform: translateX(-64px);
     
134.   -webkit-transform: translateX(-64px);
     
135.   transform-origin: right;
     
136.   -webkit-transform-origin: right;
     
137.   animation:hair-top-anim 0.7s 1s 1 ease;
     
138.   -webkit-animation:hair-top-anim 0.7s 1s 1 ease;
     
139.   animation-fill-mode: forwards;
     
140.   -webkit-animation-fill-mode: forwards;
     
141. }
     
142. 
     
143. .hair-bottom{
     
144.   width: 54px;
     
145.   height: 50px;
     
146.   opacity: 0;
     
147.   border-bottom-left-radius: 25px;
     
148.   background: #D8C078;
     
149.   position: relative;
     
150.   top: -20px;
     
151.   left: 50%;
     
152.   transform: translateX(-27px);
     
153.   -webkit-transform: translateX(-27px);
     
154.   transform-origin: left;
     
155.   -webkit-transform-origin: left;
     
156.   animation:hair-bottom-anim 0.7s 1.4s 1 ease;
     
157.   -webkit-animation:hair-bottom-anim 0.7s 1.4s 1 ease;
     
158.   animation-fill-mode: forwards;
     
159.   -webkit-animation-fill-mode: forwards;
     
160. }
     
161.   
     
162. .sideburn{
     
163.   width: 8px;
     
164.   height: 25px;
     
165.   background:#D8C078;
     
166.   position: absolute;
     
167.   bottom: -25px;
     
168.   opacity: 0;
     
169.   animation:sideburn-anim 0.7s 0.9s 1 ease;
     
170.   animation-fill-mode: forwards;
     
171.   -webkit-animation:sideburn-anim 0.7s 0.9s 1 ease;
     
172.   -webkit-animation-fill-mode: forwards;
     
173. }
     
174. 
     
175. .sideburn#left{
     
176.   left: 12px;
     
177. }
     
178. 
     
179. .sideburn#right{
     
180.   right: 12px;
     
181. }
     
182. 
     
183. .face{
     
184.   width: 120px;
     
185.   height: 0px;
     
186.   border-radius: 20%;
     
187.   background: #FFE4BE;
     
188.   position: absolute;
     
189.   top: 40px;
     
190.   left: 20px;
     
191.   animation:hair-anim 0.1s 0.8s 1 linear;
     
192.   animation-fill-mode: forwards;
     
193.   -webkit-animation:hair-anim 0.1s 0.8s 1 linear;
     
194.   -webkit-animation-fill-mode: forwards;
     
195.   z-index: 3;
     
196. }
     
197. .nose{
     
198.   width: 10px;
     
199.   height: 35px;
     
200.   opacity: 1;
     
201.   background: #FFE4BE;
     
202.   border-top-left-radius: 20px;
     
203.   position: absolute;
     
204.   left: 60%;
     
205.   top: 80px;
     
206.   margin-left:-20px;
     
207.   animation:shadow-anim 0.7s 3s 1 ease;
     
208.   animation-fill-mode: forwards;
     
209.   -webkit-animation:shadow-anim 0.7s 3s 1 ease;
     
210.   -webkit-animation-fill-mode: forwards;
     
211.   opacity: 0;
     
212.   z-index: 5;
     
213. }
     
214. .ear{
     
215.   width: 24px;
     
216.   height: 35px;
     
217.   background: #FFE4BE;
     
218.   border-radius: 12px;
     
219.   position: absolute;
     
220.   top: 116px;
     
221.   z-index:3;
     
222.   animation:grow 0.7s 1.3s 1 ease;
     
223.   animation-fill-mode: forwards;
     
224.   -webkit-animation:grow 0.7s 1.3s 1 ease;
     
225.   -webkit-animation-fill-mode: forwards;
     
226.   -webkit-transform: scale(0);
     
227.   transform: scale(0);
     
228. }
     
229. .mouth{
     
230.   width: 56px;
     
231.   height: 23px;
     
232.   border-radius: 0 0 33px 33px;
     
233.   background: white;
     
234.   position: absolute;
     
235.   top: 130px;
     
236.   left: 55%;
     
237.   margin-left: -33px;
     
238.   animation:grow 0.7s 2.6s 1 ease;
     
239.   animation-fill-mode: forwards;
     
240.   -webkit-animation:grow 0.7s 2.6s 1 ease;
     
241.   -webkit-animation-fill-mode: forwards;
     
242.   -webkit-transform: scale(0);
     
243.   transform: scale(0);
     
244. }
     
245. .ear#left{
     
246.   left: -12px;
     
247. }
     
248. .ear#right{
     
249.   right: -12px;
     
250. }
     
251. .eye-shadow{
     
252.   width:40px;
     
253.   height: 10px;
     
254.   border-radius: 0 0 15px 15px;
     
255.   background:rgba(149,36,0,0);
     
256.   position: absolute;
     
257.   top: 70px;
     
258.   animation:grow 0.7s 2s 1 ease;
     
259.   animation-fill-mode: forwards;
     
260.   -webkit-animation:grow 0.7s 2s 1 ease;
     
261.   -webkit-animation-fill-mode: forwards;
     
262.   -webkit-transform: scale(0);
     
263.   transform: scale(0);
     
264. }
     
265. .eye-shadow#left{
     
266.   left:0% ;
     
267.   z-index: 0;
     
268. }
     
269. .eye-shadow#right{
     
270.     right:10% ;
     
271. 
     
272. }
     
273. .eyebrow{
     
274.   width: 40px;
     
275.   height: 2px;
     
276.   background: #D8C078;
     
277.   position: absolute;
     
278.   top: -35px;
     
279.   left: 50%;
     
280.   margin-left: -20px;
     
281.   opacity: 0;
     
282.   -webkit-backface-visibility: hidden;
     
283. }
     
284. .eye-shadow#left .eyebrow{
     
285.   animation:eyebrow-anim-left 0.7s 2.2s 1 ease;
     
286.   animation-fill-mode: forwards;
     
287.   -webkit-animation:eyebrow-anim-left 0.7s 2.2s 1 ease;
     
288.   -webkit-animation-fill-mode: forwards;
     
289. }
     
290. .eye-shadow#right .eyebrow{
     
291.   animation:eyebrow-anim-right 0.7s 2.2s 1 ease, eyebrow-raise 2s 6.6s infinite alternate ease-in-out;
     
292.   animation-fill-mode: forwards;
     
293.   -webkit-animation:eyebrow-anim-right 0.7s 2.2s 1 ease, eyebrow-raise 2s 6.6s infinite alternate ease-in-out;
     
294.   -webkit-animation-fill-mode: forwards;
     
295. }
     
296. .eye-one{overflow:hidden;
     
297.   width: 40px;
     
298.   height: 20px;
     
299.   border-radius: 100%;
     
300.   background: white;
     
301.   position: relative;
     
302.   top: -18px;
     
303.   padding:1px;
     
304. 
     
305.   animation:grow 0.7s 2.2s 1 ease, eye-blink 4s 4.4s infinite linear;
     
306.   animation-fill-mode: forwards;
     
307.   -webkit-animation:grow 0.7s 2.2s 1 ease, eye-blink 4s 4.4s infinite linear;
     
308.   -webkit-animation-fill-mode: forwards;
     
309.   -webkit-transform: scale(0);
     
310.   transform: scale(0);
     
311.   -webkit-transform-origin: bottom;
     
312.   transform-origin: bottom;
     
313. 
     
314. }
     
315. .eye-two{overflow:hidden;
     
316.   width: 40px;
     
317.   height: 20px;
     
318.   border-radius: 100%;
     
319.   background: white;
     
320.   position: relative;
     
321.   top: -18px;
     
322.   padding:1px;
     
323. 
     
324.   animation:grow 0.7s 2.2s 1 ease, eye-blink 4s 4.4s infinite linear;
     
325.   animation-fill-mode: forwards;
     
326.   -webkit-animation:grow 0.7s 2.2s 1 ease, eye-blink 4s 4.4s infinite linear;
     
327.   -webkit-animation-fill-mode: forwards;
     
328.   -webkit-transform: scale(0);
     
329.   transform: scale(0);
     
330.   -webkit-transform-origin: bottom;
     
331.   transform-origin: bottom;
     
332. 
     
333. }
     
334. .iris{
     
335.   width: 20px;
     
336.   height: 20px;
     
337.   border-radius: 100%;
     
338.   background: skyblue;
     
339.   border:1px solid rgba(0,0,0,.2);
     
340. }
     
341. .shadow-wrapper{
     
342.   width: 98px;
     
343.   height: 260px;
     
344.   position: absolute;
     
345.   left: -20px;
     
346.   bottom: -84px;
     
347.   overflow: hidden;
     
348. }
     
349. .shadow{
     
350.   width: 98px;
     
351.   height: 190px;
     
352.   border-radius: 20%;
     
353.   background: rgba(149,36,0,0.05);
     
354.   position: absolute;
     
355.   z-index: 4;
     
356.   opacity: 0;
     
357.   animation:shadow-anim 1s 2.8s 1 ease;
     
358.   animation-fill-mode: forwards;
     
359.   -webkit-animation:shadow-anim 1s 2.8s 1 ease;
     
360.   -webkit-animation-fill-mode: forwards;
     
361. }
     
362. .triangle-light{
     
363.   width: 400px;
     
364.   height: 600px;
     
365.   background: #FFFFFF;
     
366.   opacity: 0.2;
     
367.   position: absolute;
     
368.   right: -65%;
     
369.   animation: triangle-light-anim 1s 2.8s 1 ease;
     
370.   animation-fill-mode: forwards;
     
371.   -webkit-animation: triangle-light-anim 1s 2.8s 1 ease;
     
372.   -webkit-animation-fill-mode: forwards;
     
373.   -webkit-transform: translate(200px,0px);
     
374.   transform: translate(200px,0px);
     
375. }
     
376. .triangle-dark{
     
377.   width: 400px;
     
378.   height: 600px;
     
379.   background: #000000;
     
380.   opacity: 0.2;
     
381.   position: absolute;
     
382.   left: -60%;
     
383.   z-index:-1;
     
384.   top: 30%;
     
385.   animation: triangle-dark-anim 1s 3s 1 ease;
     
386.   animation-fill-mode: forwards;
     
387.   -webkit-animation: triangle-dark-anim 1s 3s 1 ease;
     
388.   -webkit-animation-fill-mode: forwards;
     
389.   -webkit-transform: translate(-200px,0px);
     
390.   transform: translate(-200px,0px);
     
391. }
     
392. .music-note{
     
393.   position: absolute;
     
394.   font-size: 150px;
     
395.   color: #FCB040;
     
396.   width: 1px;
     
397.   left: 50%;
     
398.   opacity: 0;
     
399. }
     
400. .music-note#one{
     
401.   margin-left: -250px;
     
402.   top: 50%;
     
403.   animation: note-anim 2s 3.5s infinite ease;
     
404.   animation-fill-mode: forwards;
     
405.   -webkit-animation: note-anim 2s 3.5s infinite ease;
     
406.   -webkit-animation-fill-mode: forwards;
     
407. }
     
408. .music-note#two{
     
409.   margin-left: 150px;
     
410.   top: 30%;
     
411.   animation: note-anim 2s 4.3s infinite ease;
     
412.   animation-fill-mode: forwards;
     
413.   -webkit-animation: note-anim 2s 4.3s infinite ease;
     
414.   -webkit-animation-fill-mode: forwards;
     
415. }
     
416. .shirt-text{
     
417.   z-index:3;
     
418.   font-family: 'Helvetica Neue', sans-serif;
     
419.   font-weight: 100;
     
420.   color: white;
     
421.   position: relative;
     
422.   top: -300px;
     
423.   font-size:20px;
     
424.   display: inline-block;
     
425.   -webkit-text-stroke: 2px;
     
426.   -webkit-transform: translate(0px,100px);
     
427.   transform: translate(0px,100px);
     
428.   animation-fill-mode: forwards !important;
     
429.   -webkit-animation-fill-mode: forwards !important;
     
430. }
     
431. .shirt-text:nth-of-type(1){
     
432.   animation: text-anim 0.7s 3s 1 ease;
     
433.   -webkit-animation: text-anim 0.7s 3s 1 ease;
     
434. }
     
435. .shirt-text:nth-of-type(2){
     
436.   animation: text-anim 0.7s 3.1s 1 ease;
     
437.   -webkit-animation: text-anim 0.7s 3.1s 1 ease;
     
438. }
     
439. .shirt-text:nth-of-type(3){
     
440.     color: red;
     
441. 
     
442.   animation: text-anim 0.7s 3.2s 1 ease;
     
443.   -webkit-animation: text-anim 0.7s 3.2s 1 ease;
     
444. }
     
445. .shirt-text:nth-of-type(4){
     
446.   animation: text-anim 0.7s 3.3s 1 ease;
     
447.   -webkit-animation: text-anim 0.7s 3.3s 1 ease;
     
448. }
     
449. .shirt-text:nth-of-type(5){
     
450.   animation: text-anim 0.7s 3.4s 1 ease;
     
451.   -webkit-animation: text-anim 0.7s 3.4s 1 ease;
     
452. }
     
453. .shirt-text:nth-of-type(6){
     
454.   animation: text-anim 0.7s 3.4s 1 ease;
     
455.   -webkit-animation: text-anim 0.7s 3.4s 1 ease;
     
456. }
     
457. .shirt-text:nth-of-type(7){
     
458.   animation: text-anim 0.7s 3.4s 1 ease;
     
459.   -webkit-animation: text-anim 0.7s 3.4s 1 ease;
     
460. }
     
461. .shirt-text:nth-of-type(8){
     
462.   animation: text-anim 0.7s 3.4s 1 ease;
     
463.   -webkit-animation: text-anim 0.7s 3.4s 1 ease;
     
464. }
     
465. 
     
466. .arms{
     
467.   position:relative;
     
468.     width:200px;
     
469.         height:50px;
     
470.   z-index:0;
     
471. margin: 0 auto;
     
472.   border-radius:20%;
     
473.   background: #ff5200;
     
474.   top: -200px;
     
475.   animation:body-enter 0.7s 0.2s 1 ease;
     
476.   animation-fill-mode: forwards;
     
477.   -webkit-animation:body-enter 0.7s 0.2s 1 ease;
     
478.   -webkit-animation-fill-mode: forwards;
     
479. 
     
480. }  
     
481. @keyframes grow
     
482. {
     
483. 0% {  
     
484.   -webkit-transform: scale(0) translateZ(0);
     
485.   transform: scale(0) translateZ(0);
     
486. }
     
487. 60% {  
     
488.   -webkit-transform: scale(1.15) translateZ(0);
     
489.   transform: scale(1.15) translateZ(0);
     
490. }
     
491. 80% {  
     
492.   -webkit-transform: scale(0.95) translateZ(0);
     
493.   transform: scale(0.95) translateZ(0);
     
494. }
     
495. 100% {
     
496.   -webkit-transform: scale(1) translateZ(0);
     
497.   transform: scale(1) translateZ(0);
     
498. }
     
499. }
     
500. 
     
501. @-webkit-keyframes grow /* Safari and Chrome */
     
502. {
     
503. 0% {  
     
504.   -webkit-transform: scale(0) translateZ(0);
     
505.   transform: scale(0) translateZ(0);
     
506. }
     
507. 60% {  
     
508.   -webkit-transform: scale(1.15) translateZ(0);
     
509.   transform: scale(1.15) translateZ(0);
     
510. }
     
511. 80% {  
     
512.   -webkit-transform: scale(0.95) translateZ(0);
     
513.   transform: scale(0.95) translateZ(0);
     
514. }
     
515. 100% {
     
516.   -webkit-transform: scale(1) translateZ(0);
     
517.   transform: scale(1) translateZ(0);
     
518. }
     
519. }
     
520. 
     
521. @keyframes body-enter
     
522. {
     
523. 0% {
     
524.   -webkit-transform: translateY(200px) translateZ(0);
     
525.   transform: translateY(200px) translateZ(0);
     
526. }
     
527. 60% {  
     
528.   -webkit-transform: translateY(-20px) translateZ(0);
     
529.   transform: translateY(-20px) translateZ(0);
     
530. }
     
531. 80% {  
     
532.   -webkit-transform: translateY(30px) translateZ(0);
     
533.   transform: translateY(30px) translateZ(0);
     
534. }
     
535. 100% {  
     
536.   -webkit-transform: translateY(0px) translateZ(0);
     
537.   transform: translateY(0px) translateZ(0);
     
538. }
     
539. }
     
540. 
     
541. @-webkit-keyframes body-enter /* Safari and Chrome */
     
542. {
     
543. 0% {
     
544.   -webkit-transform: translateY(200px) translateZ(0);
     
545.   transform: translateY(200px) translateZ(0);
     
546. }
     
547. 60% {  
     
548.   -webkit-transform: translateY(-20px) translateZ(0);
     
549.   transform: translateY(-20px) translateZ(0);
     
550. }
     
551. 80% {  
     
552.   -webkit-transform: translateY(30px) translateZ(0);
     
553.   transform: translateY(30px) translateZ(0);
     
554. }
     
555. 100% {  
     
556.   -webkit-transform: translateY(0px) translateZ(0);
     
557.   transform: translateY(0px) translateZ(0);
     
558. }
     
559. }
     
560. @keyframes hairback-anim
     
561. {
     
562. 0% {  
     
563.   height:0px;
     
564.   -webkit-transform: translateY(137px) translateZ(0);
     
565.   transform: translateY(137px) translateZ(0);
     
566.     z-index:0;
     
567. }
     
568. 100% {
     
569.   height: 237px;
     
570.   -webkit-transform: translateY(0px) translateZ(0);
     
571.   transform: translateY(0px) translateZ(0);
     
572.   z-index:0;
     
573. }
     
574. }
     
575. 
     
576. @-webkit-keyframes hairback-anim /* Safari and Chrome */
     
577. {
     
578. 0% {  
     
579.   height:0px;
     
580.   -webkit-transform: translateY(137px) translateZ(0);
     
581.   transform: translateY(137px) translateZ(0);
     
582. }
     
583. 100% {
     
584.   height: 237px;
     
585.   -webkit-transform: translateY(0px) translateZ(0);
     
586.   transform: translateY(0px) translateZ(0);
     
587. }
     
588. }
     
589. @keyframes hair-anim
     
590. {
     
591. 0% {  
     
592.   height:0px;
     
593.   -webkit-transform: translateY(137px) translateZ(0);
     
594.   transform: translateY(137px) translateZ(0);
     
595. }
     
596. 100% {
     
597.   height: 137px;
     
598.   -webkit-transform: translateY(0px) translateZ(0);
     
599.   transform: translateY(0px) translateZ(0);
     
600. }
     
601. }
     
602. 
     
603. @-webkit-keyframes hair-anim /* Safari and Chrome */
     
604. {
     
605. 0% {  
     
606.   height:0px;
     
607.   -webkit-transform: translateY(137px) translateZ(0);
     
608.   transform: translateY(137px) translateZ(0);
     
609. }
     
610. 100% {
     
611.   height: 137px;
     
612.   -webkit-transform: translateY(0px) translateZ(0);
     
613.   transform: translateY(0px) translateZ(0);
     
614. }
     
615. }
     
616. 
     
617. @keyframes sideburn-anim
     
618. {
     
619. 0% {
     
620.   opacity: 0;
     
621.   -webkit-transform: translateY(-25px) translateZ(0);
     
622.   transform: translateY(-25px) translateZ(0);
     
623. }
     
624. 100% {
     
625.   opacity: 1;
     
626.   -webkit-transform: translateY(0px) translateZ(0);
     
627.   transform: translateY(0px) translateZ(0);
     
628. }
     
629. }
     
630. 
     
631. @-webkit-keyframes sideburn-anim /* Safari and Chrome */
     
632. {
     
633. 0% {
     
634.   opacity: 0;
     
635.   -webkit-transform: translateY(-25px) translateZ(0);
     
636.   transform: translateY(-25px) translateZ(0);
     
637. }
     
638. 100% {
     
639.   opacity: 1;
     
640.   -webkit-transform: translateY(0px) translateZ(0);
     
641.   transform: translateY(0px) translateZ(0);
     
642. }
     
643. }
     
644. 
     
645. @keyframes hair-top-anim
     
646. {
     
647. 0% {
     
648.   opacity: 0;
     
649.   -webkit-transform:translate(-64px, 30px) translateZ(0);
     
650.   transform:translate(-64px, 30px) translateZ(0);
     
651. }
     
652. 60% {  
     
653.   opacity: 1;
     
654.   -webkit-transform: rotate(0deg) translate(-64px, 30px) translateZ(0);
     
655.   transform: rotate(0deg) translate(-64px, 30px) translateZ(0);
     
656. }
     
657. 80% {  
     
658.   opacity: 1;
     
659.   -webkit-transform: rotate(10deg) translate(-64px, -5px) translateZ(0);
     
660.   transform: rotate(10deg) translate(-64px, -5px) translateZ(0);
     
661. }
     
662. 100% {  
     
663.   opacity: 1;
     
664.   -webkit-transform: rotate(0deg) translate(-64px, 0px) translateZ(0);
     
665.   transform: rotate(0deg) translate(-64px, 0px) translateZ(0);
     
666. }
     
667. }
     
668. 
     
669. @-webkit-keyframes hair-top-anim /* Safari and Chrome */
     
670. {
     
671. 0% {
     
672.   opacity: 0;
     
673.   -webkit-transform:translate(-64px, 30px) translateZ(0);
     
674.   transform:translate(-64px, 30px) translateZ(0);
     
675. }
     
676. 60% {  
     
677.   opacity: 1;
     
678.   -webkit-transform: rotate(0deg) translate(-64px, 30px) translateZ(0);
     
679.   transform: rotate(0deg) translate(-64px, 30px) translateZ(0);
     
680. }
     
681. 80% {  
     
682.   opacity: 1;
     
683.   -webkit-transform: rotate(10deg) translate(-64px, -5px) translateZ(0);
     
684.   transform: rotate(10deg) translate(-64px, -5px) translateZ(0);
     
685. }
     
686. 100% {  
     
687.   opacity: 1;
     
688.   -webkit-transform: rotate(0deg) translate(-64px, 0px) translateZ(0);
     
689.   transform: rotate(0deg) translate(-64px, 0px) translateZ(0);
     
690. }
     
691. }
     
692. 
     
693. @keyframes hair-bottom-anim
     
694. {
     
695. 0% {
     
696.   opacity: 0;
     
697.   -webkit-transform:translate(-27px, -40px) translateZ(0);
     
698.   transform:translate(-27px, -40px) translateZ(0);
     
699. }
     
700. 60% {  
     
701.   opacity: 1;
     
702.   -webkit-transform: rotate(0deg) translate(-27px, -40px) translateZ(0);
     
703.   transform: rotate(0deg) translate(-27px, -40px) translateZ(0);
     
704. }
     
705. 80% {  
     
706.   opacity: 1;
     
707.   -webkit-transform: rotate(10deg) translate(-27px, 5px) translateZ(0);
     
708.   transform: rotate(10deg) translate(-27px, 5px) translateZ(0);
     
709. }
     
710. 100% {  
     
711.   opacity: 1;
     
712.   -webkit-transform: rotate(0deg) translate(-27px, 0px) translateZ(0);
     
713.   transform: rotate(0deg) translate(-27px, 0px) translateZ(0);
     
714. }
     
715. }
     
716. 
     
717. @-webkit-keyframes hair-bottom-anim /* Safari and Chrome */
     
718. {
     
719. 0% {
     
720.   opacity: 0;
     
721.   -webkit-transform:translate(-27px, -40px) translateZ(0);
     
722.   transform:translate(-27px, -40px) translateZ(0);
     
723. }
     
724. 60% {  
     
725.   opacity: 1;
     
726.   -webkit-transform: rotate(0deg) translate(-27px, -40px) translateZ(0);
     
727.   transform: rotate(0deg) translate(-27px, -40px) translateZ(0);
     
728. }
     
729. 80% {  
     
730.   opacity: 1;
     
731.   -webkit-transform: rotate(10deg) translate(-27px, 5px) translateZ(0);
     
732.   transform: rotate(10deg) translate(-27px, 5px) translateZ(0);
     
733. }
     
734. 100% {  
     
735.   opacity: 1;
     
736.   -webkit-transform: rotate(0deg) translate(-27px, 0px) translateZ(0);
     
737.   transform: rotate(0deg) translate(-27px, 0px) translateZ(0);
     
738. }
     
739. }
     
740. 
     
741. @keyframes music-move
     
742. {
     
743. 0% {
     
744.   -webkit-transform: rotate(0deg) translateZ(0);
     
745.   transform: rotate(0deg) translateZ(0);
     
746. }
     
747. 33% {  
     
748.   -webkit-transform: rotate(-5deg) translateZ(0);
     
749.   transform: rotate(-5deg) translateZ(0);
     
750. }
     
751. 66% {  
     
752.   -webkit-transform: rotate(5deg) translateZ(0);
     
753.   transform: rotate(5deg) translateZ(0);
     
754. }
     
755. 100% {  
     
756.   -webkit-transform: rotate(0deg) translateZ(0);
     
757.   transform: rotate(0deg) translateZ(0);
     
758. }
     
759. }
     
760. 
     
761. @-webkit-keyframes music-move /* Safari and Chrome */
     
762. {
     
763. 0% {
     
764.   -webkit-transform: rotate(0deg) translateZ(0);
     
765.   transform: rotate(0deg) translateZ(0);
     
766. }
     
767. 33% {  
     
768.   -webkit-transform: rotate(-5deg) translateZ(0);
     
769.   transform: rotate(-5deg) translateZ(0);
     
770. }
     
771. 66% {  
     
772.   -webkit-transform: rotate(5deg) translateZ(0);
     
773.   transform: rotate(5deg) translateZ(0);
     
774. }
     
775. 100% {  
     
776.   -webkit-transform: rotate(0deg) translateZ(0);
     
777.   transform: rotate(0deg) translateZ(0);
     
778. }
     
779. }
     
780. 
     
781. @keyframes eyebrow-anim-right
     
782. {
     
783. 0% {
     
784.   opacity: 0;
     
785.   -webkit-transform: translateY(-25px) translateZ(0);
     
786.   transform: translateY(-25px) translateZ(0);
     
787. }
     
788. 70% {
     
789.   opacity: 1;
     
790.   -webkit-transform: translateY(5px) translateZ(0);
     
791.   transform: translateY(5px) translateZ(0);
     
792. }  
     
793. 100% {
     
794.   opacity: 1;
     
795.   -webkit-transform: rotate(9deg) translateY(0px) translateZ(0);
     
796.   transform: rotate(9deg) translateY(0px) translateZ(0);
     
797. }
     
798. }
     
799. 
     
800. @-webkit-keyframes eyebrow-anim-right /* Safari and Chrome */
     
801. {
     
802. 0% {
     
803.   opacity: 0;
     
804.   -webkit-transform: translateY(-25px) translateZ(0);
     
805.   transform: translateY(-25px) translateZ(0);
     
806. }
     
807. 70% {
     
808.   opacity: 1;
     
809.   -webkit-transform: translateY(5px) translateZ(0);
     
810.   transform: translateY(5px) translateZ(0);
     
811. }
     
812. 100% {
     
813.   opacity: 1;
     
814.   -webkit-transform: rotate(9deg) translateY(0px) translateZ(0);
     
815.   transform: rotate(9deg) translateY(0px) translateZ(0);
     
816. }
     
817. }
     
818. @keyframes eyebrow-raise
     
819. {
     
820. 0% {
     
821.   top:-35px;
     
822. }
     
823. 80% {
     
824.   top:-35px;
     
825. 
     
826. }
     
827. 100% {
     
828.   top:-45px;
     
829. }
     
830. }
     
831. 
     
832. @-webkit-keyframes eyebrow-raise /* Safari and Chrome */
     
833. {
     
834. 0% {
     
835.   top:-35px;
     
836. }
     
837. 80% {
     
838.   top:-35px;
     
839. 
     
840. }
     
841. 100% {
     
842. 一款jquery和css3实现的卡通人物动画特效

     2. 一款jquery和css3实现的卡通人物动画特效

     3. Cufon, jQuery和CSS3实现的超强飞出菜单

     4. Cufon, jQuery和CSS3实现的超强飞出菜单

     5. 一款基于jquery和css3的头像恶搞特效

     6. 使用jQuery和CSS3实现一个数字时钟

     7. 使用jQuery和CSS3实现一个数字时钟

     8. 分享Jquery+CSS3实现的3D下拉菜单特效

     9. 一款基于jquery和css3的响应式二级导航菜单

     10. 一款基于css3和jquery实现的动画弹出层

     本文来源：https://www.51html5.com/a1395.html

     点击展开全部