超可爱 纯CSS3实现的小猪、小老鼠、小牛

       利用纯CSS3绘制一些人物、动物、风景已经不是一件新鲜的事情了，主要是利用CSS3可以让直线变成任意的曲线，于是简单的矢量图形绘制对CSS3来说就小菜一碟了。今天要分享一下超级可爱的纯CSS3实现的小猪、小老鼠、小牛，先看靓照：

我们可以在这里查看这三个小动物的DEMO演示。

接下来我们逐个来贴出实现这三个小动物的CSS代码

一、小猪

HTML代码：

1. <div id="pig">
   
2.     <div id="pig_head"></div>
   
3. 
   
4.     <div id="pig_ear_left"></div>
   
5.     <div id="pig_ear_right"></div>
   
6. 
   
7.     <div id="pig_eye_left"></div>
   
8.     <div id="pig_eye_right"></div>
   
9. 
   
10.     <div id="pig_snout"></div>
    
11.     <div id="pig_snout_hole_left"></div>
    
12.     <div id="pig_snout_hole_right"></div>
    
13.   </div>

复制代码CSS代码：

1. #pig{
   
2.   position: absolute;
   
3.   top: 40px;
   
4. }
   
5. 
   
6. #pig_head {
   
7.   width: 200px;
   
8.   height: 200px;
   
9.   background-color: #FA8CC8;
   
10.   border-radius: 100px;
    
11. }
    
12. 
    
13. #pig_ear_left {
    
14.       width: 0;
    
15.       height: 0;
    
16.   position: absolute;
    
17.   top: 15px;
    
18.   left: 18px;
    
19.            border-left: 20px solid transparent;
    
20.       border-right: 20px solid transparent;
    
21.       border-bottom: 28px solid #D30073;
    
22.   -webkit-transform: rotate(-25deg);
    
23. }
    
24. 
    
25. #pig_ear_right {
    
26.       width: 0;
    
27.       height: 0;
    
28.   position: absolute;
    
29.   top: 15px;
    
30.   left: 145px;
    
31.       border-left: 20px solid transparent;
    
32.       border-right: 20px solid transparent;
    
33.       border-bottom: 28px solid #D30073;
    
34.   -webkit-transform: rotate(25deg);
    
35. }
    
36. 
    
37. #pig_eye_left {
    
38.   position: absolute;
    
39.   top: 50px;
    
40.   left: 70px;
    
41.   width: 12px;
    
42.   height: 20px;
    
43.       background: black;
    
44.       -webkit-border-radius: 50px/100px;
    
45. }
    
46. 
    
47. #pig_eye_right {
    
48.   position: absolute;
    
49.   top: 50px;
    
50.   left: 125px;
    
51.   width: 12px;
    
52.   height: 20px;
    
53.       background: black;
    
54.       -webkit-border-radius: 50px/100px;
    
55. }
    
56. 
    
57. #pig_snout {
    
58.   position: absolute;
    
59.   top: 90px;
    
60.   left: 62px;
    
61.   width: 80px;
    
62.       height: 55px;
    
63.       background: #FA4EAC;
    
64.       -webkit-border-radius: 90px/60px;
    
65. }
    
66. 
    
67. #pig_snout_hole_left {
    
68. position: absolute;
    
69.   top: 100px;
    
70.   left: 80px;
    
71.   width: 17px;
    
72.   height: 35px;
    
73.       background: #E01B87;
    
74.       -webkit-border-radius: 60px/100px;
    
75. }
    
76. 
    
77. #pig_snout_hole_right {
    
78. position: absolute;
    
79. top: 100px;
    
80. left: 111px;
    
81. width: 17px;
    
82. height: 35px;
    
83.      background: #E01B87;
    
84.      -webkit-border-radius: 60px/100px;
    
85. }

复制代码二、小老鼠

HTML代码：

1. <div id="mouse">
   
2.     <div id="mouse_head"></div>
   
3. 
   
4.     <div id="mouse_ear_left"></div>
   
5.     <div id="mouse_ear_right"></div>
   
6. 
   
7.     <div id="mouse_eye_left_outer"></div>
   
8.     <div id="mouse_eye_right_outer"></div>
   
9.     <div id="mouse_eye_left_inner"></div>
   
10.     <div id="mouse_eye_right_inner"></div>
    
11. 
    
12.     <div id="mouse_nose"></div>
    
13. 
    
14.     <div id="mouse_whisker_left_1"></div>
    
15.     <div id="mouse_whisker_left_2"></div>
    
16.     <div id="mouse_whisker_left_3"></div>
    
17.     <div id="mouse_whisker_right_1"></div>
    
18.     <div id="mouse_whisker_right_2"></div>
    
19.     <div id="mouse_whisker_right_3"></div>
    
20. 
    
21.     <div id="mouse_tooth_left"></div>
    
22.     <div id="mouse_tooth_right"></div>
    
23. 
    
24.   </div>

复制代码
CSS代码：

1. #mouse{
   
2.   position: absolute;
   
3.   top: 40px;
   
4.   left: 280px;
   
5. }
   
6. 
   
7. #mouse_head {
   
8.   width: 200px;
   
9.   height: 200px;
   
10.   background-color: #8F9595;
    
11.   border-radius: 100px;
    
12. }
    
13. 
    
14. #mouse_ear_left {
    
15.   display: inline-block;
    
16.   position: relative;
    
17.   top: -230px;
    
18.   left: -25px;
    
19.   border: 12px solid #6E6E6E;
    
20.   width: 75px;
    
21.       height: 75px;
    
22.   background: #E5A95F;
    
23.       border-radius: 50%;
    
24. }
    
25. 
    
26. #mouse_ear_right {
    
27.   display: inline-block;
    
28.   position: relative;
    
29.   top: -230px;
    
30.   left: 25px;
    
31.   border: 12px solid #6E6E6E;
    
32.   width: 75px;
    
33.       height: 75px;
    
34.   background: #E5A95F;
    
35.       border-radius: 50%;
    
36. }
    
37. 
    
38. #mouse_eye_left_outer {
    
39.   width: 40px;
    
40.       height: 40px;
    
41.   position: absolute;
    
42.   top: 55px;
    
43.   left: 50px;
    
44.       background: white;
    
45.       -webkit-border-radius: 50px;
    
46.       border-radius: 50px;
    
47. }
    
48. 
    
49. #mouse_eye_right_outer {
    
50.   width: 40px;
    
51.       height: 40px;
    
52.   position: absolute;
    
53.   top: 55px;
    
54.   left: 110px;
    
55.       background: white;
    
56.       -webkit-border-radius: 50px;
    
57.       border-radius: 50px;
    
58. }
    
59. 
    
60. #mouse_eye_left_inner {
    
61.   width: 15px;
    
62.       height: 15px;
    
63.   position: absolute;
    
64.   top: 75px;
    
65.   left: 63px;
    
66.       background: black;
    
67.       -webkit-border-radius: 50px;
    
68.       border-radius: 50px;
    
69. }
    
70. 
    
71. #mouse_eye_right_inner {
    
72.   width: 15px;
    
73.       height: 15px;
    
74.   position: absolute;
    
75.   top: 75px;
    
76.   left: 122px;
    
77.       background: black;
    
78.       -webkit-border-radius: 50px;
    
79.       border-radius: 50px;
    
80. }
    
81. 
    
82. #mouse_nose {
    
83.   width: 0;
    
84.       height: 0;
    
85.   position: absolute;
    
86.   top: 110px;
    
87.   left: 75px;
    
88.       border-left: 25px solid transparent;
    
89.       border-right: 25px solid transparent;
    
90.       border-top: 50px solid #6E6E6E;
    
91.   z-index: 1;
    
92. }
    
93. 
    
94. #mouse_whisker_left_1 {
    
95.   width: 80px;
    
96.   height: 1.5px;
    
97.   border-radius: 2px;
    
98.   background-color: black;
    
99.   position: absolute;
    
100.   top: 115px;
     
101.   left: 25px;
     
102.   -webkit-transform: rotate(10deg);
     
103. }
     
104. 
     
105. #mouse_whisker_left_2 {
     
106.   width: 80px;
     
107.   height: 1.5px;
     
108.   border-radius: 2px;
     
109.   background-color: black;
     
110.   position: absolute;
     
111.   top: 118px;
     
112.   left: 28px;
     
113.   }
     
114. 
     
115. #mouse_whisker_left_3 {
     
116.   width: 80px;
     
117.   height: 1.5px;
     
118.   border-radius: 2px;
     
119.   background-color: black;
     
120.   position: absolute;
     
121.   top: 120px;
     
122.   left: 25px;
     
123.   -webkit-transform: rotate(-10deg);
     
124. }
     
125. 
     
126. #mouse_whisker_right_1 {
     
127.   width: 80px;
     
128.   height: 1.5px;
     
129.   border-radius: 2px;
     
130.   background-color: black;
     
131.   position: absolute;
     
132.   top: 115px;
     
133.   left: 90px;
     
134.   -webkit-transform: rotate(-10deg);
     
135. }
     
136. 
     
137. #mouse_whisker_right_2 {
     
138.   width: 80px;
     
139.   height: 1.5px;
     
140.   border-radius: 2px;
     
141.   background-color: black;
     
142.   position: absolute;
     
143.   top: 118px;
     
144.   left: 90px;
     
145.   }
     
146. 
     
147. #mouse_whisker_right_3 {
     
148.   width: 80px;
     
149.   height: 1.5px;
     
150.   border-radius: 2px;
     
151.   background-color: black;
     
152.   position: absolute;
     
153.   top: 121px;
     
154.   left: 92px;
     
155.   -webkit-transform: rotate(10deg);
     
156. }
     
157. 
     
158. #mouse_tooth_left {
     
159.   width: 15px;
     
160.   height: 22px;
     
161.   background-color: white;
     
162.   position: absolute;
     
163.   top: 170px;
     
164.   left: 84px;
     
165.   -webkit-transform: rotate(10deg);
     
166. }
     
167. 
     
168. #mouse_tooth_right {
     
169.   width: 15px;
     
170.   height: 22px;
     
171.   background-color: white;
     
172.   position: absolute;
     
173.   top: 170px;
     
174.   left: 102px;
     
175.   -webkit-transform: rotate(-10deg);
     
176. }

复制代码
三、小牛
HTML代码：

1. <div id="cow">
   
2.     <div id="cow_head"></div>
   
3.     <div id="cow_horn_left"></div>
   
4.     <div id="cow_horn_right"></div>
   
5. 
   
6.     <div id="cow_eye_left_outer"></div>
   
7.     <div id="cow_eye_right_outer"></div>
   
8.     <div id="cow_eye_left_inner"></div>
   
9.     <div id="cow_eye_right_inner"></div>
   
10. 
    
11.     <div id="cow_snout"></div>
    
12.     <div id="cow_snout_hole_left"></div>
    
13.     <div id="cow_snout_hole_right"></div>
    
14. 
    
15.    <div id="cow_mouth"></div>
    
16.    <div id="cow_grass_1"></div>
    
17.    <div id="cow_grass_2"></div>
    
18.    <div id="cow_grass_3"></div>
    
19.    <div id="cow_grass_4"></div>
    
20.    <div id="cow_grass_5"></div>
    
21.    <div id="cow_grass_6"></div>
    
22.    <div id="cow_grass_7"></div>
    
23.    <div id="cow_grass_8"></div>
    
24.    <div id="cow_grass_9"></div>
    
25. 
    
26.     <div id="cow_spot_1"></div>
    
27.     <div id="cow_spot_2"></div>
    
28.     <div id="cow_spot_3"></div>
    
29.     <div id="cow_spot_4"></div>
    
30.     <div id="cow_spot_5"></div>
    
31.     <div id="cow_spot_6"></div>
    
32.   </div>

复制代码CSS代码：

1. #cow {
   
2.   position: absolute;
   
3.   top: 40px;
   
4.   left: 550px;
   
5. }
   
6. 
   
7. #cow_head {
   
8.   width: 200px;
   
9.   height: 200px;
   
10.   background-color: white;
    
11.   border-radius: 100px;
    
12. }
    
13. 
    
14. #cow_snout {
    
15.   position: absolute;
    
16.   top: 90px;
    
17.   left: 63px;
    
18.   width: 80px;
    
19.       height: 55px;
    
20.       background: #E5A95F;
    
21.       -webkit-border-radius: 90px/60px;
    
22. }
    
23. 
    
24. #cow_snout_hole_left {
    
25. position: absolute;
    
26.   top: 100px;
    
27.   left: 80px;
    
28.   width: 17px;
    
29.   height: 35px;
    
30.       background: #8C6A3F;
    
31.       -webkit-border-radius: 60px/100px;
    
32. }
    
33. 
    
34. #cow_snout_hole_right {
    
35. position: absolute;
    
36. top: 100px;
    
37. left: 111px;
    
38. width: 17px;
    
39. height: 35px;
    
40.      background: #8C6A3F;
    
41.      -webkit-border-radius: 60px/100px;
    
42. }
    
43. 
    
44. #cow_horn_left {
    
45.       width: 20px;
    
46.       height: 40px;
    
47.   background-color: black;
    
48.   border-radius: 8px 8px 2px 2px;
    
49.   position: absolute;
    
50.   top: 2px;
    
51.   left: 18px;
    
52.           -webkit-transform: rotate(-35deg);
    
53. }
    
54. 
    
55. #cow_horn_right {
    
56.   width: 20px;
    
57.       height: 40px;
    
58.   background-color: black;
    
59.   border-radius: 8px 8px 2px 2px;
    
60.   position: absolute;
    
61.   top: 2px;
    
62.   left: 162px;
    
63.           -webkit-transform: rotate(35deg);
    
64. }
    
65. 
    
66. #cow_eye_left_outer {
    
67.   width: 40px;
    
68.       height: 40px;
    
69.   position: absolute;
    
70.   top: 40px;
    
71.   left: 50px;
    
72.       background: white;
    
73.   border: 1px solid black;
    
74.       border-radius: 50px;
    
75. }
    
76. 
    
77. #cow_eye_right_outer {
    
78.   width: 40px;
    
79.       height: 40px;
    
80.   position: absolute;
    
81.   top: 40px;
    
82.   left: 110px;
    
83.       background: white;
    
84.       border: 1px solid black;
    
85.       border-radius: 50px;
    
86. }
    
87. 
    
88. #cow_eye_left_inner {
    
89.   width: 15px;
    
90.       height: 15px;
    
91.   position: absolute;
    
92.   top: 60px;
    
93.   left: 63px;
    
94.       background: black;
    
95.       border-radius: 50px;
    
96. }
    
97. 
    
98. #cow_eye_right_inner {
    
99.   width: 15px;
    
100.       height: 15px;
     
101.   position: absolute;
     
102.   top: 60px;
     
103.   left: 122px;
     
104.       background: black;
     
105.           border-radius: 50px;
     
106. }
     
107. 
     
108. #cow_mouth {
     
109.   width: 45px;
     
110.       height: 15px;
     
111.   position: absolute;
     
112.   top: 160px;
     
113.   left: 110px;
     
114.       background: white;
     
115.   border: 1px solid black;
     
116.           border-radius: 50px;
     
117. }
     
118. 
     
119. #cow_grass_1 {
     
120.   width: 80px;
     
121.   height: 10px;
     
122.   position: absolute;
     
123.   top: 200px;
     
124.   left: 125px;
     
125.   border-radius: 3px;
     
126.   -webkit-transform: rotate(60deg);
     
127.   background-color: #399200;
     
128. }
     
129. 
     
130. #cow_grass_2 {
     
131.   width: 80px;
     
132.   height: 10px;
     
133.   position: absolute;
     
134.   top: 200px;
     
135.   left: 105px;
     
136.   border-radius: 3px;
     
137.   -webkit-transform: rotate(-120deg);
     
138.   background-color: #399200;
     
139. }
     
140. 
     
141. #cow_grass_3 {
     
142.   width: 80px;
     
143.   height: 10px;
     
144.   position: absolute;
     
145.   top: 197px;
     
146.   left: 85px;
     
147.   border-radius: 3px;
     
148.   -webkit-transform: rotate(90deg);
     
149.   background-color: #399200;
     
150. }
     
151. 
     
152. #cow_grass_4 {
     
153.   width: 80px;
     
154.   height: 10px;
     
155.   position: absolute;
     
156.   top: 197px;
     
157.   left: 100px;
     
158.   border-radius: 3px;
     
159.   -webkit-transform: rotate(80deg);
     
160.   background-color: #399200;
     
161. }
     
162. 
     
163. #cow_grass_5 {
     
164.   width: 80px;
     
165.   height: 10px;
     
166.   position: absolute;
     
167.   top: 197px;
     
168.   left: 100px;
     
169.   border-radius: 3px;
     
170.   -webkit-transform: rotate(100deg);
     
171.   background-color: #399200;
     
172. }
     
173. 
     
174. #cow_grass_6 {
     
175.   width: 80px;
     
176.   height: 10px;
     
177.   position: absolute;
     
178.   top: 197px;
     
179.   left: 70px;
     
180.   border-radius: 3px;
     
181.   -webkit-transform: rotate(100deg);
     
182.   background-color: #399200;
     
183. }
     
184. 
     
185. #cow_grass_7 {
     
186.   width: 40px;
     
187.   height: 10px;
     
188.   position: absolute;
     
189.   top: 180px;
     
190.   left: 100px;
     
191.   border-radius: 3px;
     
192.   -webkit-transform: rotate(100deg);
     
193.   background-color: #5CBA20;
     
194. }
     
195. 
     
196. #cow_grass_8 {
     
197.   width: 40px;
     
198.   height: 10px;
     
199.   position: absolute;
     
200.   top: 180px;
     
201.   left: 120px;
     
202.   border-radius: 3px;
     
203.   -webkit-transform: rotate(90deg);
     
204.   background-color: #5CBA20;
     
205. }
     
206. 
     
207. #cow_grass_9 {
     
208.   width: 40px;
     
209.   height: 10px;
     
210.   position: absolute;
     
211.   top: 178px;
     
212.   left: 120px;
     
213.   border-radius: 3px;
     
214.   -webkit-transform: rotate(50deg);
     
215.   background-color: #5CBA20;
     
216. }
     
217. 
     
218. #cow_spot_1 {
     
219.   width: 35px;
     
220.       height: 35px;
     
221.   position: absolute;
     
222.   top: 1px;
     
223.   left: 100px;
     
224.       background-color: black;
     
225.       border-radius: 50px;
     
226. }
     
227. 
     
228. #cow_spot_2 {
     
229.   width: 20px;
     
230.       height: 40px;
     
231.   position: absolute;
     
232.   top: -11px;
     
233.   left: 95px;
     
234.       background-color: black;
     
235.           border-radius: 50px;
     
236.   -webkit-transform: rotate(85deg);
     
237. }
     
238. 
     
239. #cow_spot_3 {
     
240.   width: 50px;
     
241.       height: 50px;
     
242.   position: absolute;
     
243.   top: 75px;
     
244.   left: -1px;
     
245.       background-color: black;
     
246.       border-radius: 50px;
     
247. }
     
248. 
     
249. #cow_spot_4 {
     
250.   width: 15px;
     
251.       height: 15px;
     
252.   position: absolute;
     
253.   top: 81px;
     
254.       background-color: black;
     
255.       -webkit-border-radius: 50px;
     
256.       border-radius: 50px;
     
257. 
     
258. }
     
259. 
     
260. #cow_spot_5 {
     
261.   width: 55px;
     
262.       height: 35px;
     
263.   position: absolute;
     
264.   top: 95px;
     
265.   left: -10px;
     
266.       background-color: black;
     
267.       border-radius: 50px;
     
268.   -webkit-transform: rotate(80deg);
     
269. }
     
270. 
     
271. #cow_spot_6 {
     
272.   width: 35px;
     
273.       height: 25px;
     
274.   position: absolute;
     
275.   top: 95px;
     
276.   left: 170px;
     
277.       background-color: black;
     
278.           border-radius: 50px;
     
279.   -webkit-transform: rotate(-80deg);
     
280. }

复制代码

【超可爱 纯CSS3实现的小猪、小老鼠、小牛】相关文章

1. 超可爱 纯CSS3实现的小猪、小老鼠、小牛

2. 效果非常酷！纯CSS3实现的图片滑块程序

3. 纯CSS3实现的顶部社会化分享按钮

4. 7款纯CSS3实现的炫酷动画应用

5. 一款纯css3实现的颜色渐变按钮

6. 用纯CSS3实现图片幻灯片切换效果

7. 纯CSS3实现圆角按钮

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

9. CSS3实现的图片加载动画效果

10. CSS3实现的超棒3D Grid效果

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