使用HTML和CSS3绘制基本卡通图案的示例分享

纯HTML+CSS实现阿童木头像
先上最终效果图：

在里面主要用的了CSS中的几个属性：position—定位；border-radius—圆角；box-shadow—阴 影；background（linear-gradient）—渐变；transform—旋转和变换；animation —动画，技术点不是很多，主要是细心和耐心。还是直接上最终源码吧。由于考虑浏览器的CSS兼容性，代码比较多。

1.     
2.     
3.     
4.         
5.         
6.         
7.         * {    
8.             margin: 0;    
9.             padding: 0;    
10.         }    
11.     
12.         .outer-circle {    
13.             position: absolute;    
14.             top: 32px;    
15.             left: 44px;    
16.             width: 289px;    
17.             height: 289px;    
18.             border: 4px solid #75BD4F;    
19.             -moz-border-radius: 50%;    
20.             -webkit-border-radius: 50%;    
21.             border-radius: 50%;    
22.         }    
23.     
24.         .inner-circle {    
25.             position: relative;    
26.             width: 269px;    
27.             height: 269px;    
28.             border: 10px solid #F5F910;    
29.             -moz-border-radius: 50%;    
30.             -webkit-border-radius: 50%;    
31.             border-radius: 50%;    
32.             background-color: #73BF43;    
33.         }    
34.     
35.         .inner-circle div {    
36.             position: absolute;    
37.         }    
38.     
39.         .inner-circle-light {    
40.             top: 41px;    
41.             left: 35px;    
42.             -moz-box-shadow: 26px 26px 29px 37px #fff;    
43.             -webkit-box-shadow: 26px 26px 29px 37px #fff;    
44.             box-shadow: 26px 26px 29px 37px #fff;    
45.         }    
46.     
47.         .header-top {    
48.             top: 11px;    
49.             rightright: 2px;    
50.             z-index: 100;    
51.             width: 180px;    
52.             height: 90px;    
53.             -moz-border-radius: 90px 90px 0 0;    
54.             -webkit-border-radius: 90px 90px 0 0;    
55.             border-radius: 90px 90px 0 0;    
56.             background-color: #000;    
57.             -moz-transform: rotate(32deg);    
58.             -ms-transform: rotate(32deg);    
59.             -o-transform: rotate(32deg);    
60.             -webkit-transform: rotate(32deg);    
61.             transform: rotate(32deg);    
62.         }    
63.     
64.         .header-left {    
65.             top: -20px;    
66.             left: 37px;    
67.             width: 114px;    
68.             height: 228px;    
69.             -moz-border-radius: 228px 0 0 228px;    
70.             -webkit-border-radius: 228px 0 0 228px;    
71.             border-radius: 228px 0 0 228px;    
72.             background-color: #000;    
73.             -moz-transform: rotate(26deg);    
74.             -ms-transform: rotate(26deg);    
75.             -o-transform: rotate(26deg);    
76.             -webkit-transform: rotate(26deg);    
77.             transform: rotate(26deg);    
78.         }    
79.     
80.         .hair-left-1 {    
81.             top: 15px;    
82.             left: 53px;    
83.             z-index: 55;    
84.             width: 85px;    
85.             height: 23px;    
86.             -webkit-border-top-left-radius: 30px 180px;    
87.             border-top-left-radius: 30px 180px;    
88.             -webkit-border-bottom-left-radius: 30px 80px;    
89.             border-bottom-left-radius: 30px 80px;    
90.             background-color: #000;    
91.             -moz-transform: rotate(-74deg) skew(-42deg, 23deg);    
92.             -ms-transform: rotate(-74deg) skew(-42deg, 23deg);    
93.             -o-transform: rotate(-74deg) skew(-42deg, 23deg);    
94.             -webkit-transform: rotate(-74deg) skew(-42deg, 23deg);    
95.             transform: rotate(-74deg) skew(-42deg, 23deg);    
96.         }    
97.     
98.         .hair-left-2 {    
99.             top: -20px;    
100.             left: 99px;    
101.             z-index: 60;    
102.             width: 49px;    
103.             height: 37px;    
104.             background-color: #000;    
105.             -moz-transform: rotate(-51deg) skew(-43deg, 0deg);    
106.             -ms-transform: rotate(-51deg) skew(-43deg, 0deg);    
107.             -o-transform: rotate(-51deg) skew(-43deg, 0deg);    
108.             -webkit-transform: rotate(-51deg) skew(-43deg, 0deg);    
109.             transform: rotate(-51deg) skew(-43deg, 0deg);    
110.         }    
111.     
112.         .hair-rightright-1 {    
113.             top: 70px;    
114.             rightright: 1px;    
115.             z-index: 60;    
116.             width: 81px;    
117.             height: 85px;    
118.             -webkit-border-top-rightright-radius: 26px 120px;    
119.             border-top-rightright-radius: 26px 120px;    
120.             background-color: black;    
121.             -moz-transform: rotate(1deg) skew(-51deg, 0deg);    
122.             -ms-transform: rotate(1deg) skew(-51deg, 0deg);    
123.             -o-transform: rotate(1deg) skew(-51deg, 0deg);    
124.             -webkit-transform: rotate(1deg) skew(-51deg, 0deg);    
125.             transform: rotate(1deg) skew(-51deg, 0deg);    
126.         }    
127.     
128.         .hair-rightright-2 {    
129.             width: 60px;    
130.             height: 10px;    
131.             -webkit-border-bottom-left-radius: 100%;    
132.             border-bottom-left-radius: 100%;    
133.             background-color: rgba(0,0,0,0.2);    
134.         }    
135.     
136.         .hair-light-1 {    
137.             top: 30px;    
138.             rightright: 45px;    
139.             z-index: 105;    
140.             width: 57px;    
141.             height: 17px;    
142.             -moz-border-radius: 100%;    
143.             -webkit-border-radius: 100%;    
144.             border-radius: 100%;    
145.             background-color: white;    
146.             -moz-transform: rotate(39deg);    
147.             -ms-transform: rotate(39deg);    
148.             -o-transform: rotate(39deg);    
149.             -webkit-transform: rotate(39deg);    
150.             transform: rotate(39deg);    
151.         }    
152.     
153.         .hair-light-1-over {    
154.             top: 32px;    
155.             rightright: 38px;    
156.             z-index: 105;    
157.             width: 83px;    
158.             height: 21px;    
159.             -moz-border-radius: 100%;    
160.             -webkit-border-radius: 100%;    
161.             border-radius: 100%;    
162.             background-color: black;    
163.             -moz-transform: rotate(41deg);    
164.             -ms-transform: rotate(41deg);    
165.             -o-transform: rotate(41deg);    
166.             -webkit-transform: rotate(41deg);    
167.             transform: rotate(41deg);    
168.         }    
169.     
170.         .hair-light-2 {    
171.             top: 16px;    
172.             rightright: 104px;    
173.             z-index: 105;    
174.             width: 4px;    
175.             height: 2px;    
176.             -moz-border-radius: 2px;    
177.             -webkit-border-radius: 2px;    
178.             border-radius: 2px;    
179.             background-color: white;    
180.             -moz-transform: rotate(10deg);    
181.             -ms-transform: rotate(10deg);    
182.             -o-transform: rotate(10deg);    
183.             -webkit-transform: rotate(10deg);    
184.             transform: rotate(10deg);    
185.         }    
186.     
187.         .ear {    
188.             top: 141px;    
189.             rightright: 36px;    
190.             z-index: 110;    
191.             width: 49px;    
192.             height: 48px;    
193.             border: 2px solid #000;    
194.             border-bottom-width: 1px;    
195.             -moz-border-radius: 50%;    
196.             -webkit-border-radius: 50%;    
197.             border-radius: 50%;    
198.             background-color: #F6C6B0;    
199.             -moz-box-shadow: -4px 0 0 0 #de9876 inset;    
200.             -webkit-box-shadow: -4px 0 0 0 #de9876 inset;    
201.             box-shadow: -4px 0 0 0 #de9876 inset;    
202.             -moz-transform: rotate(56deg) scaleY(1.4);    
203.             -ms-transform: rotate(56deg) scaleY(1.4);    
204.             -o-transform: rotate(56deg) scaleY(1.4);    
205.             -webkit-transform: rotate(56deg) scaleY(1.4);    
206.             transform: rotate(56deg) scaleY(1.4);    
207.         }    
208.     
209.         .ear-inner-1 {    
210.             top: 22px;    
211.             left: 22px;    
212.             z-index: 70;    
213.             width: 9px;    
214.             height: 5px;    
215.             border-top: 1px solid #110b00;    
216.             -moz-border-radius: 50%;    
217.             -webkit-border-radius: 50%;    
218.             border-radius: 50%;    
219.             -moz-transform: rotate(-6deg);    
220.             -ms-transform: rotate(-6deg);    
221.             -o-transform: rotate(-6deg);    
222.             -webkit-transform: rotate(-6deg);    
223.             transform: rotate(-6deg);    
224.         }    
225.     
226.         .ear-inner-2 {    
227.             top: 19px;    
228.             left: 18px;    
229.             width: 14px;    
230.             height: 7px;    
231.             border-top: 2px solid #110b00;    
232.             -moz-border-radius: 50%;    
233.             -webkit-border-radius: 50%;    
234.             border-radius: 50%;    
235.             -moz-box-shadow: 0px 2px 0 0 #de9876 inset;    
236.             -webkit-box-shadow: 0px 2px 0 0 #de9876 inset;    
237.             box-shadow: 0px 2px 0 0 #de9876 inset;    
238.             -moz-transform: rotate(-91deg);    
239.             -ms-transform: rotate(-91deg);    
240.             -o-transform: rotate(-91deg);    
241.             -webkit-transform: rotate(-91deg);    
242.             transform: rotate(-91deg);    
243.         }    
244.     
245.         .ear-light {    
246.             top: 21px;    
247.             rightright: 34px;    
248.             z-index: 105;    
249.             width: 17px;    
250.             height: 6px;    
251.             -moz-border-radius: 100%;    
252.             -webkit-border-radius: 100%;    
253.             border-radius: 100%;    
254.             background-color: #FFF;    
255.             -moz-transform: rotate(89deg);    
256.             -ms-transform: rotate(89deg);    
257.             -o-transform: rotate(89deg);    
258.             -webkit-transform: rotate(89deg);    
259.             transform: rotate(89deg);    
260.         }    
261.     
262.         .ear-over {    
263.             bottombottom: -44px;    
264.             left: -33px;    
265.             z-index: 55;    
266.             width: 69px;    
267.             height: 59px;    
268.             -moz-border-radius: 50%;    
269.             -webkit-border-radius: 50%;    
270.             border-radius: 50%;    
271.             background-color: #f6c6b0;    
272.             -moz-transform: rotate(26deg);    
273.             -ms-transform: rotate(26deg);    
274.             -o-transform: rotate(26deg);    
275.             -webkit-transform: rotate(26deg);    
276.             transform: rotate(26deg);    
277.         }    
278.     
279.         .face-main {    
280.             top: 30px;    
281.             left: 35px;    
282.             z-index: 50;    
283.             width: 180px;    
284.             height: 188px;    
285.             -moz-border-radius: 90px;    
286.             -webkit-border-radius: 90px;    
287.             border-radius: 90px;    
288.             background-color: #F6C6B0;    
289.             -moz-box-shadow: 3px -3px 0 0 #fff inset;    
290.             -webkit-box-shadow: 3px -3px 0 0 #fff inset;    
291.             box-shadow: 3px -3px 0 0 #fff inset;    
292.         }    
293.     
294.         .face-top {    
295.             top: 61px;    
296.             rightright: 75px;    
297.             z-index: 105;    
298.             width: 111px;    
299.             height: 46px;    
300.             -moz-border-radius: 50% 50% 26px 0;    
301.             -webkit-border-radius: 50% 50% 26px 0;    
302.             border-radius: 50% 50% 26px 0;    
303.             background-color: #f6c6b0;    
304.             -moz-transform: rotate(37deg);    
305.             -ms-transform: rotate(37deg);    
306.             -o-transform: rotate(37deg);    
307.             -webkit-transform: rotate(37deg);    
308.             transform: rotate(37deg);    
309.         }    
310.     
311.         .face-rightright-1 {    
312.             top: 115px;    
313.             rightright: 71px;    
314.             z-index: 105;    
315.             width: 68px;    
316.             height: 62px;    
317.             -moz-border-radius: 100% 0 0;    
318.             -webkit-border-radius: 100% 0 0;    
319.             border-radius: 100% 0 0;    
320.             background-color: #f6c6b0;    
321.             -moz-transform: rotate(99deg);    
322.             -ms-transform: rotate(99deg);    
323.             -o-transform: rotate(99deg);    
324.             -webkit-transform: rotate(99deg);    
325.             transform: rotate(99deg);    
326.         }    
327.     
328.         .face-bottombottom-1 {    
329.             bottombottom: 42px;    
330.             left: 45px;    
331.             z-index: 40;    
332.             width: 72px;    
333.             height: 52px;    
334.             -webkit-border-bottom-left-radius: 70px 40px;    
335.             -webkit-border-top-left-radius: 14px 11px;    
336.             border-top-left-radius: 14px 11px;    
337.             border-bottom-left-radius: 70px 40px;    
338.             background-color: #000;    
339.         }    
340.     
341.         .face-bottombottom-1-over {    
342.             bottombottom: 45px;    
343.             left: 48px;    
344.             z-index: 55;    
345.             width: 69px;    
346.             height: 47px;    
347.             -webkit-border-bottom-left-radius: 70px 40px;    
348.             -webkit-border-top-left-radius: 14px 11px;    
349.             border-top-left-radius: 14px 11px;    
350.             border-bottom-left-radius: 70px 40px;    
351.             background-color: #f6c6b0;    
352.             -moz-box-shadow: 3px 0px 0 0 #fff inset;    
353.             -webkit-box-shadow: 3px 0px 0 0 #fff inset;    
354.             box-shadow: 3px 0px 0 0 #fff inset;    
355.         }    
356.     
357.         .face-bottombottom-2 {    
358.             rightright: 97px;    
359.             bottombottom: 44px;    
360.             z-index: 55;    
361.             width: 43px;    
362.             height: 31px;    
363.             -webkit-border-bottom-rightright-radius: 70px 40px;    
364.             border-bottom-rightright-radius: 70px 40px;    
365.             background-color: #000;    
366.             -moz-transform: rotate(-4deg) skew(-49deg, 0deg);    
367.             -ms-transform: rotate(-4deg) skew(-49deg, 0deg);    
368.             -o-transform: rotate(-4deg) skew(-49deg, 0deg);    
369.             -webkit-transform: rotate(-4deg) skew(-49deg, 0deg);    
370.             transform: rotate(-4deg) skew(-49deg, 0deg);    
371.         }    
372.     
373.         .face-bottombottom-2-over {    
374.             rightright: 99px;    
375.             bottombottom: 46px;    
376.             z-index: 56;    
377.             width: 43px;    
378.             height: 31px;    
379.             -webkit-border-bottom-rightright-radius: 70px 40px;    
380.             border-bottom-rightright-radius: 70px 40px;    
381.             background-color: #f6c6b0;    
382.             -moz-box-shadow: -6px 2px 0 0 #de9876 inset;    
383.             -webkit-box-shadow: -6px 2px 0 0 #de9876 inset;    
384.             box-shadow: -6px 2px 0 0 #de9876 inset;    
385.             -moz-transform: rotate(-3deg) skew(-49deg, 0deg);    
386.             -ms-transform: rotate(-3deg) skew(-49deg, 0deg);    
387.             -o-transform: rotate(-3deg) skew(-49deg, 0deg);    
388.             -webkit-transform: rotate(-3deg) skew(-49deg, 0deg);    
389.             transform: rotate(-3deg) skew(-49deg, 0deg);    
390.         }    
391.     
392.         .face-light-1 {    
393.             rightright: 127px;    
394.             bottombottom: 95px;    
395.             z-index: 150;    
396.             width: 6px;    
397.             height: 6px;    
398.             -moz-border-radius: 50%;    
399.             -webkit-border-radius: 50%;    
400.             border-radius: 50%;    
401.             background-color: #fff;    
402.         }    
403.     
404.         .face-light-2 {    
405.             bottombottom: 82px;    
406.             left: 58px;    
407.             z-index: 150;    
408.             width: 4px;    
409.             height: 4px;    
410.             -moz-border-radius: 50%;    
411.             -webkit-border-radius: 50%;    
412.             border-radius: 50%;    
413.             background-color: #fff;    
414.         }    
415.     
416.         .chin {    
417.             bottombottom: 39px;    
418.             left: 111px;    
419.             z-index: 70;    
420.             width: 11px;    
421.             height: 12px;    
422.             border: 2px solid #000;    
423.             border-top-color: #f6c6b0;    
424.             border-left-color: #f6c6b0;    
425.             -webkit-border-bottom-rightright-radius: 6px;    
426.             border-bottom-rightright-radius: 6px;    
427.             background-color: #f6c6b0;    
428.             -moz-transform: rotate(34deg) skew(-9deg, 0deg);    
429.             -ms-transform: rotate(34deg) skew(-9deg, 0deg);    
430.             -o-transform: rotate(34deg) skew(-9deg, 0deg);    
431.             -webkit-transform: rotate(34deg) skew(-9deg, 0deg);    
432.             transform: rotate(34deg) skew(-9deg, 0deg);    
433.         }    
434.     
435.         .eye-rightright {    
436.             top: 97px;    
437.             left: 103px;    
438.             z-index: 110;    
439.             width: 39px;    
440.             height: 67px;    
441.             border: 1px solid #000;    
442.             border-top-width: 2px;    
443.             -moz-border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px;    
444.             -webkit-border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px;    
445.             border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px;    
446.             background-color: #F8FAF7;    
447.             -moz-box-shadow: 0px 5px 0 0 #d5d9e2 inset;    
448.             -webkit-box-shadow: 0px 5px 0 0 #d5d9e2 inset;    
449.             box-shadow: 0px 5px 0 0 #d5d9e2 inset;    
450.         }    
451.     
452.         .eye-rightright-inner {    
453.             rightright: 0;    
454.             bottombottom: 3px;    
455.             z-index: 115;    
456.             width: 30px;    
457.             height: 52px;    
458.             -moz-border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px;    
459.             -webkit-border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px;    
460.             border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px;    
461.             background-color: #000;    
462.         }    
463.     
464.         .eye-rightright-light1 {    
465.             top: 19px;    
466.             rightright: 0;    
467.             z-index: 120;    
468.             width: 19px;    
469.             height: 10px;    
470.             -moz-border-radius: 100%;    
471.             -webkit-border-radius: 100%;    
472.             border-radius: 100%;    
473.             background-color: #FFF;    
474.             -moz-animation: eye-flash 0.2s linear 0.1s infinite normal;    
475.             -o-animation: eye-flash 0.2s linear 0.1s infinite normal;    
476.             -webkit-animation: eye-flash 0.2s linear 0.1s infinite normal;    
477.             -moz-transform: rotate(41deg);    
478.             -ms-transform: rotate(41deg);    
479.             -o-transform: rotate(41deg);    
480.             -webkit-transform: rotate(41deg);    
481.             transform: rotate(41deg);    
482.             animation: eye-flash 0.2s linear 0.1s infinite normal;    
483.         }    
484.     
485.         @-webkit-keyframes eye-flash {    
486.             0% {    
487.                 top: 19px;    
488.             }    
489.     
490.             100% {    
491.                 top: 21px;    
492.             }    
493.         }    
494.     
495.         @-moz-keyframes eye-flash {    
496.             0% {    
497.                 top: 19px;    
498.             }    
499.     
500.             100% {    
501.                 top: 20px;    
502.             }    
503.         }    
504.     
505.         @-ms-keyframes eye-flash {    
506.             0% {    
507.                 top: 19px;    
508.             }    
509.     
510.             100% {    
511.                 top: 20px;    
512.             }    
513.         }    
514.     
515.         @keyframes eye-flash {    
516.             0% {    
517.                 top: 19px;    
518.             }    
519.     
520.             100% {    
521.                 top: 20px;    
522.             }    
523.         }    
524.     
525.         .eye-rightright-light2 {    
526.             bottombottom: 8px;    
527.             left: 9px;    
528.             z-index: 120;    
529.             width: 14px;    
530.             height: 7px;    
531.             -webkit-border-bottom-rightright-radius: 100%;    
532.             border-bottom-rightright-radius: 100%;    
533.             background-color: #FFF;    
534.             -moz-transform: rotate(-39deg);    
535.             -ms-transform: rotate(-39deg);    
536.             -o-transform: rotate(-39deg);    
537.             -webkit-transform: rotate(-39deg);    
538.             transform: rotate(-39deg);    
539.         }    
540.     
541.         .eye-rightright-eyelash1 {    
542.             top: 9px;    
543.             left: -3px;    
544.             width: 2px;    
545.             height: 4px;    
546.             background-color: #000;    
547.             -moz-transform: rotate(-54deg);    
548.             -ms-transform: rotate(-54deg);    
549.             -o-transform: rotate(-54deg);    
550.             -webkit-transform: rotate(-54deg);    
551.             transform: rotate(-54deg);    
552.         }    
553.     
554.         .eye-rightright-eyelash2 {    
555.             top: 1px;    
556.             left: 1px;    
557.             width: 2px;    
558.             height: 5px;    
559.             background-color: #000;    
560.             -moz-transform: rotate(-33deg);    
561.             -ms-transform: rotate(-33deg);    
562.             -o-transform: rotate(-33deg);    
563.             -webkit-transform: rotate(-33deg);    
564.             transform: rotate(-33deg);    
565.         }    
566.     
567.         .eye-rightright-eyelash3 {    
568.             top: -8px;    
569.             left: 8px;    
570.             width: 2px;    
571.             height: 7px;    
572.             background-color: #000;    
573.             -moz-transform: rotate(-21deg);    
574.             -ms-transform: rotate(-21deg);    
575.             -o-transform: rotate(-21deg);    
576.             -webkit-transform: rotate(-21deg);    
577.             transform: rotate(-21deg);    
578.         }    
579.     
580.         .eye-rightright-eyelash4 {    
581.             top: -6px;    
582.             left: 21px;    
583.             width: 2px;    
584.             height: 6px;    
585.             background-color: #000;    
586.             -moz-transform: rotate(11deg);    
587.             -ms-transform: rotate(11deg);    
588.             -o-transform: rotate(11deg);    
589.             -webkit-transform: rotate(11deg);    
590.             transform: rotate(11deg);    
591.         }    
592.     
593.         .eye-rightright-eyelash5 {    
594.             top: 1px;    
595.             rightright: 8px;    
596.             width: 2px;    
597.             height: 6px;    
598.             background-color: #000;    
599.             -moz-transform: rotate(14deg);    
600.             -ms-transform: rotate(14deg);    
601.             -o-transform: rotate(14deg);    
602.             -webkit-transform: rotate(14deg);    
603.             transform: rotate(14deg);    
604.         }    
605.     
606.         .eye-left {    
607.             top: 114px;    
608.             left: 45px;    
609.             z-index: 110;    
610.             width: 19px;    
611.             height: 63px;    
612.             border: 1px solid #000;    
613.             border-top-width: 2px;    
614.             -moz-border-radius: 29px 28px 33px / 97px 111px 40px 90px;    
615.             -webkit-border-radius: 29px 28px 33px / 97px 111px 40px 90px;    
616.             border-radius: 29px 28px 33px / 97px 111px 40px 90px;    
617.             background-color: #F8FAF7;    
618.             -moz-box-shadow: 0px 6px 0 0 #d5d9e2 inset;    
619.             -webkit-box-shadow: 0px 6px 0 0 #d5d9e2 inset;    
620.             box-shadow: 0px 6px 0 0 #d5d9e2 inset;    
621.             -moz-transform: rotate(-9deg);    
622.             -ms-transform: rotate(-9deg);    
623.             -o-transform: rotate(-9deg);    
624.             -webkit-transform: rotate(-9deg);    
625.             transform: rotate(-9deg);    
626.         }    
627.     
628.         .eye-left-inner {    
629.             rightright: 0;    
630.             bottombottom: 1px;    
631.             z-index: 115;    
632.             width: 15px;    
633.             height: 46px;    
634.             -moz-border-radius: 49px 44px 29px 58px / 143px 83px 45px 122px;    
635.             -webkit-border-radius: 49px 44px 29px 58px / 143px 83px 45px 122px;    
636.             border-radius: 49px 44px 29px 58px / 143px 83px 45px 122px;    
637.             background-color: #000;    
638.         }    
639.     
640.         .eye-left-light1 {    
641.             top: 19px;    
642.             rightright: 1px;    
643.             z-index: 120;    
644.             width: 7px;    
645.             height: 18px;    
646.             -moz-border-radius: 100%;    
647.             -webkit-border-radius: 100%;    
648.             border-radius: 100%;    
649.             background-color: #FFF;    
650.             -moz-animation: eye-flash 0.2s linear 0.1s infinite normal;    
651.             -o-animation: eye-flash 0.2s linear 0.1s infinite normal;    
652.             -webkit-animation: eye-flash 0.2s linear 0.1s infinite normal;    
653.             -moz-transform: rotate(-9deg);    
654.             -ms-transform: rotate(-9deg);    
655.             -o-transform: rotate(-9deg);    
656.             -webkit-transform: rotate(-9deg);    
657.             transform: rotate(-9deg);    
658.             animation: eye-flash 0.2s linear 0.1s infinite normal;    
659.         }    
660.     
661.         .eye-left-light2 {    
662.             bottombottom: 6px;    
663.             left: 4px;    
664.             z-index: 120;    
665.             width: 11px;    
666.             height: 4px;    
667.             -webkit-border-bottom-rightright-radius: 100%;    
668.             border-bottom-rightright-radius: 100%;    
669.             background-color: #FFF;    
670.             -moz-transform: rotate(-45deg);    
671.             -ms-transform: rotate(-45deg);    
672.             -o-transform: rotate(-45deg);    
673.             -webkit-transform: rotate(-45deg);    
674.             transform: rotate(-45deg);    
675.         }    
676.     
677.         .eye-left-eyelash1 {    
678.             top: 7px;    
679.             left: -1px;    
680.             width: 2px;    
681.             height: 4px;    
682.             background-color: #000;    
683.             -moz-transform: rotate(-49deg);    
684.             -ms-transform: rotate(-49deg);    
685.             -o-transform: rotate(-49deg);    
686.             -webkit-transform: rotate(-49deg);    
687.             transform: rotate(-49deg);    
688.         }    
689.     
690.         .eye-left-eyelash2 {    
691.             top: -1px;    
692.             left: 2px;    
693.             width: 2px;    
694.             height: 5px;    
695.             background-color: #000;    
696.             -moz-transform: rotate(-28deg);    
697.             -ms-transform: rotate(-28deg);    
698.             -o-transform: rotate(-28deg);    
699.             -webkit-transform: rotate(-28deg);    
700.             transform: rotate(-28deg);    
701.         }    
702.     
703.         .eye-left-eyelash3 {    
704.             top: -6px;    
705.             left: 7px;    
706.             width: 2px;    
707.             height: 5px;    
708.             background-color: #000;    
709.             -moz-transform: rotate(-4deg);    
710.             -ms-transform: rotate(-4deg);    
711.             -o-transform: rotate(-4deg);    
712.             -webkit-transform: rotate(-4deg);    
713.             transform: rotate(-4deg);    
714.         }    
715.     
716.         .eye-left-eyelash4 {    
717.             top: -4px;    
718.             left: 13px;    
719.             width: 2px;    
720.             height: 4px;    
721.             background-color: #000;    
722.             -moz-transform: rotate(25deg);    
723.             -ms-transform: rotate(25deg);    
724.             -o-transform: rotate(25deg);    
725.             -webkit-transform: rotate(25deg);    
726.             transform: rotate(25deg);    
727.         }    
728.     
729.         .eye-left-eyelash5 {    
730.             top: 3px;    
731.             rightright: 0;    
732.             width: 2px;    
733.             height: 4px;    
734.             background-color: #000;    
735.             -moz-transform: rotate(41deg);    
736.             -ms-transform: rotate(41deg);    
737.             -o-transform: rotate(41deg);    
738.             -webkit-transform: rotate(41deg);    
739.             transform: rotate(41deg);    
740.         }    
741.     
742.         .rightright-eyebrow {    
743.             top: 68px;    
744.             left: 92px;    
745.             z-index: 110;    
746.             width: 66px;    
747.             height: 36px;    
748.             border: 2px solid #000;    
749.             border-width: 2px 1px 0px 1px;    
750.             -moz-border-radius: 45px 51px 0 0;    
751.             -webkit-border-radius: 45px 51px 0 0;    
752.             border-radius: 45px 51px 0 0;    
753.             background-color: transparent;    
754.             -moz-transform: skew(-6deg, 16deg);    
755.             -ms-transform: skew(-6deg, 16deg);    
756.             -o-transform: skew(-6deg, 16deg);    
757.             -webkit-transform: skew(-6deg, 16deg);    
758.             transform: skew(-6deg, 16deg);    
759.         }    
760.     
761.         .rightright-eyebrow-over {    
762.             top: 21px;    
763.             rightright: -5px;    
764.             z-index: 115;    
765.             width: 13px;    
766.             height: 20px;    
767.             background-color: #f6c6b0;    
768.         }    
769.     
770.         .left-eyebrow {    
771.             top: 89px;    
772.             left: 36px;    
773.             z-index: 100;    
774.             width: 30px;    
775.             height: 68px;    
776.             border: 2px solid #000;    
777.             border-width: 2px 1px 0px 1px;    
778.             -moz-border-radius: 100%;    
779.             -webkit-border-radius: 100%;    
780.             border-radius: 100%;    
781.             background-color: transparent;    
782.             -moz-transform: rotate(-2deg);    
783.             -ms-transform: rotate(-2deg);    
784.             -o-transform: rotate(-2deg);    
785.             -webkit-transform: rotate(-2deg);    
786.             transform: rotate(-2deg);    
787.         }    
788.     
789.         .left-eyebrow-over {    
790.             top: 17px;    
791.             rightright: -9px;    
792.             z-index: 105;    
793.             width: 39px;    
794.             height: 55px;    
795.             -moz-border-radius: 21px 12px 0 17px;    
796.             -webkit-border-radius: 21px 12px 0 17px;    
797.             border-radius: 21px 12px 0 17px;    
798.             background-color: #f6c6b0;    
799.             -moz-transform: rotate(-13deg);    
800.             -ms-transform: rotate(-13deg);    
801.             -o-transform: rotate(-13deg);    
802.             -webkit-transform: rotate(-13deg);    
803.             transform: rotate(-13deg);    
804.         }    
805.     
806.         .nose {    
807.             top: 172px;    
808.             left: 63px;    
809.             z-index: 115;    
810.             width: 21px;    
811.             height: 16px;    
812.             border: 2px solid #000;    
813.             -moz-border-radius: 50%;    
814.             -webkit-border-radius: 50%;    
815.             border-radius: 50%;    
816.             -moz-box-shadow: 3px 1px 0 0 #fff inset;    
817.             -webkit-box-shadow: 3px 1px 0 0 #fff inset;    
818.             box-shadow: 3px 1px 0 0 #fff inset;    
819.         }    
820.     
821.         .nose-over {    
822.             top: -1px;    
823.             rightright: -11px;    
824.             z-index: 115;    
825.             width: 19px;    
826.             height: 14px;    
827.             background-color: #f6c6b0;    
828.             -moz-transform: rotate(31deg);    
829.             -ms-transform: rotate(31deg);    
830.             -o-transform: rotate(31deg);    
831.             -webkit-transform: rotate(31deg);    
832.             transform: rotate(31deg);    
833.         }    
834.     
835.         .nose-tip {    
836.             top: -7px;    
837.             left: 13px;    
838.             width: 2px;    
839.             height: 6px;    
840.             background-color: #000;    
841.             -moz-transform: rotate(14deg);    
842.             -ms-transform: rotate(14deg);    
843.             -o-transform: rotate(14deg);    
844.             -webkit-transform: rotate(14deg);    
845.             transform: rotate(14deg);    
846.         }    
847.     
848.         .mouth {    
849.             bottombottom: 61px;    
850.             left: 72px;    
851.             z-index: 110;    
852.             width: 46px;    
853.             height: 47px;    
854.             border: 2px solid #000;    
855.             border-width: 0 1px 2px 0;    
856.             -moz-border-radius: 32px 29px 23px 48px / 47px 82px 52px 75px;    
857.             -webkit-border-radius: 32px 29px 23px 48px / 47px 82px 52px 75px;    
858.             border-radius: 32px 29px 23px 48px / 47px 82px 52px 75px;    
859.             background-color: #92222E;    
860.             -moz-transform: rotate(1deg) skew(0deg, 39deg);    
861.             -ms-transform: rotate(1deg) skew(0deg, 39deg);    
862.             -o-transform: rotate(1deg) skew(0deg, 39deg);    
863.             -webkit-transform: rotate(1deg) skew(0deg, 39deg);    
864.             transform: rotate(1deg) skew(0deg, 39deg);    
865.         }    
866.     
867.         .mouth-over-1 {    
868.             bottombottom: 0;    
869.             left: -4px;    
870.             z-index: 115;    
871.             width: 37px;    
872.             height: 58px;    
873.             border-right: 1px solid #000;    
874.             -moz-border-radius: 38px 13px 10px 77px / 47px 82px 52px 73px;    
875.             -webkit-border-radius: 38px 13px 10px 77px / 47px 82px 52px 73px;    
876.             border-radius: 38px 13px 10px 77px / 47px 82px 52px 73px;    
877.             background-color: #f6c6b0;    
878.             -moz-transform: rotate(38deg) skew(0deg, 6deg);    
879.             -ms-transform: rotate(38deg) skew(0deg, 6deg);    
880.             -o-transform: rotate(38deg) skew(0deg, 6deg);    
881.             -webkit-transform: rotate(38deg) skew(0deg, 6deg);    
882.             transform: rotate(38deg) skew(0deg, 6deg);    
883.         }    
884.     
885.         .mouth-over-2 {    
886.             bottombottom: 38px;    
887.             left: 30px;    
888.             z-index: 150;    
889.             width: 7px;    
890.             height: 19px;    
891.             background-color: #f6c6b0;    
892.             -moz-transform: rotate(-233deg);    
893.             -ms-transform: rotate(-233deg);    
894.             -o-transform: rotate(-233deg);    
895.             -webkit-transform: rotate(-233deg);    
896.             transform: rotate(-233deg);    
897.         }    
898.     
899.         .mouth-over-3 {    
900.             bottombottom: -9px;    
901.             left: 11px;    
902.             z-index: 115;    
903.             width: 27px;    
904.             height: 9px;    
905.             border-top: 2px solid #000;    
906.             -moz-border-radius: 100%;    
907.             -webkit-border-radius: 100%;    
908.             border-radius: 100%;    
909.             background-color: #f6c6b0;    
910.             -moz-transform: rotate(-4deg);    
911.             -ms-transform: rotate(-4deg);    
912.             -o-transform: rotate(-4deg);    
913.             -webkit-transform: rotate(-4deg);    
914.             transform: rotate(-4deg);    
915.         }    
916.     
917.         .mouth-over-4 {    
918.             bottombottom: -6px;    
919.             left: -1px;    
920.             z-index: 150;    
921.             width: 7px;    
922.             height: 15px;    
923.             background-color: #f6c6b0;    
924.             -moz-transform: rotate(-226deg);    
925.             -ms-transform: rotate(-226deg);    
926.             -o-transform: rotate(-226deg);    
927.             -webkit-transform: rotate(-226deg);    
928.             transform: rotate(-226deg);    
929.         }    
930.     
931.         .mouth-tip {    
932.             bottombottom: 39px;    
933.             left: 41px;    
934.             z-index: 120;    
935.             width: 2px;    
936.             height: 3px;    
937.             background-color: #000;    
938.             -moz-transform: rotate(-51deg);    
939.             -ms-transform: rotate(-51deg);    
940.             -o-transform: rotate(-51deg);    
941.             -webkit-transform: rotate(-51deg);    
942.             transform: rotate(-51deg);    
943.         }    
944.     
945.         .mouth-inner {    
946.             bottombottom: 50px;    
947.             left: 107px;    
948.             z-index: 115;    
949.             width: 10px;    
950.             height: 18px;    
951.             -moz-border-radius: 10px 0 4px 6px / 8px 2px 8px 9px;    
952.             -webkit-border-radius: 10px 0 4px 6px / 8px 2px 8px 9px;    
953.             border-radius: 10px 0 4px 6px / 8px 2px 8px 9px;    
954.             background-color: #ed675c;    
955.             -moz-transform: rotate(6deg);    
956.             -ms-transform: rotate(6deg);    
957.             -o-transform: rotate(6deg);    
958.             -webkit-transform: rotate(6deg);    
959.             transform: rotate(6deg);    
960.         }    
961.     
962.         .name-lable {    
963.             bottombottom: -9px;    
964.             left: -8px;    
965.             z-index: 150;    
966.             width: 280px;    
967.             color: #005aa9;    
968.             text-align: center;    
969.             font-weight: bold;    
970.             font-style: italic;    
971.             font-size: 50px;    
972.             font-family: Times New Roman;    
973.         }    
974.     
975.         .name-lable-light {    
976.             top: 30px;    
977.             width: 100%;    
978.             height: 0;    
979.             -moz-box-shadow: 0 0 3px 3px #fff;    
980.             -webkit-box-shadow: 0 0 3px 3px #fff;    
981.             box-shadow: 0 0 3px 3px #fff;    
982.         }    
983.     
984.         @-webkit-keyframes input-flash {    
985.             0% {    
986.                 border-color: #ccc;    
987.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
988.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
989.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
990.             }    
991.     
992.             100% {    
993.                 border-color: rgba(82,168,236,0.8);    
994.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
995.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
996.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
997.             }    
998.         }    
999.     
1000.         @-moz-keyframes input-flash {    
1001.             0% {    
1002.                 border-color: #ccc;    
1003.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
1004.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
1005.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
1006.             }    
1007.     
1008.             100% {    
1009.                 border-color: rgba(82,168,236,0.8);    
1010.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
1011.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
1012.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
1013.             }    
1014.         }    
1015.     
1016.         @-ms-keyframes input-flash {    
1017.             0% {    
1018.                 border-color: #ccc;    
1019.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
1020.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
1021.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
1022.             }    
1023.     
1024.             100% {    
1025.                 border-color: rgba(82,168,236,0.8);    
1026.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
1027.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
1028.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
1029.             }    
1030.         }    
1031.     
1032.         @keyframes input-flash {    
1033.             0% {    
1034.                 border-color: #ccc;    
1035.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
1036.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
1037.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);    
1038.             }    
1039.     
1040.             100% {    
1041.                 border-color: rgba(82,168,236,0.8);    
1042.                 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
1043.                 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
1044.                 box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 10px rgba(82,168,236,0.6);    
1045.             }    
1046.         }    
1047.         
1048.     
1049.     
1050.     "width: 400px; height: 359px; position: relative; margin: 50px auto;">    
1051.         "outer-circle">    
1052.                 
1053.             "inner-circle">    
1054.                     
1055.                 "inner-circle-light">    
1056.                 "header-top">    
1057.                     
1058.                 "hair-left-1">    
1059.                 "hair-left-2">    
1060.                 "hair-light-1">    
1061.                 "hair-light-1-over">    
1062.                 "hair-light-2">    
1063.                 "hair-right-1">    
1064.                     "hair-right-2">    
1065.                         
1066.                     
1067.                 "header-left">    
1068.                     
1069.                 "face-main">    
1070.                 "face-light-1">    
1071.                 "face-light-2">    
1072.                 "face-top">    
1073.                 "face-right-1">    
1074.                 "face-bottom-1">    
1075.                 "face-bottom-1-over">    
1076.                 "face-bottom-2">    
1077.                 "face-bottom-2-over">    
1078.                 "chin">    
1079.                 "ear">    
1080.                         
1081.                     "ear-inner-1">    
1082.                     "ear-inner-2">    
1083.                     "ear-over">    
1084.                     "ear-light">    
1085.                     
1086.                 "eye-left">    
1087.                         
1088.                     "eye-left-inner">    
1089.                     "eye-left-light1">    
1090.                     "eye-left-light2">    
1091.                     "eye-left-eyelash1">    
1092.                     "eye-left-eyelash2">    
1093.                     "eye-left-eyelash3">    
1094.                     "eye-left-eyelash4">    
1095.                     "eye-left-eyelash5">    
1096.                     
1097.                 "eye-right">    
1098.                         
1099.                     "eye-right-inner">    
1100.                     "eye-right-light1">    
1101.                     "eye-right-light2">    
1102.                     "eye-right-eyelash1">    
1103.                     "eye-right-eyelash2">    
1104.                     "eye-right-eyelash3">    
1105.                     "eye-right-eyelash4">    
1106.                     "eye-right-eyelash5">    
1107.                     
1108.                 "right-eyebrow">    
1109.                         
1110.                     "right-eyebrow-over">    
1111.                     
1112.                 "left-eyebrow">    
1113.                         
1114.                     "left-eyebrow-over">    
1115.                     
1116.                 "nose">    
1117.                         
1118.                     "nose-tip">    
1119.                     "nose-over">    
1120.                     
1121.                 "mouth">    
1122.                         
1123.                     "mouth-over-1">    
1124.                     "mouth-over-2">    
1125.                     "mouth-over-3">    
1126.                     "mouth-over-4">    
1127.                     "mouth-tip">    
1128.                     
1129.                 "mouth-inner">    
1130.                 "name-lable">    
1131.                     ASTRO BOY    
1132.                     "name-lable-light">    
1133.                     
1134.                 
1135.             
1136.         
1137.     
1138.     

使用CSS3画出一个叮当猫
如果你经常使用PS或者Flash的话，应该就会知道画个叮当猫是很容易 的事，至少我是这么觉得。但是，用CSS3画出来确实是第一次接触，所以很乐意去尝试一下，对于我这种菜鸟，确实是帮助不少，至少懂得如何去画一个简单的 人物形象出来，再加上一些动画效果，就活了，那就更好玩了！OK，开始之前，先把效果图晒一下：

PS:说实话，我觉得挺可爱的，小时候经常看多啦A梦，突然感觉很亲切，很童真，瞬间年轻了好多，哈哈！热烈的笑脸

首先，先把HTML结构搭建好：