HTML5+CSS3实现机器猫

下面一段代码是有关htML5和css3实现机器猫的代码，具体代码如下所示：

1. !DOCTYPE html>   
2. html lang="en">   
3. head>   
4. meta charset="UTF-8">   
5. tITle> 机器猫/title>   
6. style type="text/css">   
7. * {   
8. margin: 0;   
9. padding: 0;   
10. }   
11. .whole {   
12. width: 800px;   
13. margin: 20px auto;   
14. /*border: 2px solid yellow; */   
15. background-color: white;   
16. position: relative;   
17. }   
18. .head {   
19. margin: 0 auto;   
20. position: relative;   
21. width: 500px;   
22. height: 440px;   
23. background-color: #00b7e7;   
24. border-radius: 220px;   
25. border: 1px solid red;   
26. }   
27. .eye .left_eye,   
28. .eye .right_eye {   
29. width: 100px;   
30. height: 130px;   
31. background-color: white;   
32. border: 2px solid black;   
33. border-radius: 50px;   
34. position: absolute;   
35. top: 50px;   
36. z-index: 3;   
37. }   
38. .eye .LeyeBall,   
39. .eye .ReyeBall {   
40. width: 20px;   
41. height: 20px;   
42. background: black;   
43. border-radius: 10px;   
44. position: absolute;   
45. top: 65px;   
46. }   
47. .eye .left_eye {   
48. left: 146px;   
49. }   
50. .eye .right_eye {   
51. left: 250px;   
52. }   
53. .eye .LeyeBall {   
54. right: 10px;   
55. }   
56. .eye .ReyeBall {   
57. left: 10px;   
58. }   
59. .face {   
60. position: relative;   
61. z-index: 2;   
62. }   
63. .face .feature {   
64. width: 400px;   
65. height: 320px;   
66. border-radius: 160px;   
67. position: absolute;   
68. top: 100px;   
69. left: 50px;   
70. background: white;   
71. }   
72. .face .nose {   
73. width: 45px;   
74. height: 50px;   
75. border-radius: 23px;   
76. background-color: #CF3318;   
77. border: 2px solid black;   
78. position: absolute;   
79. top: 165px;   
80. left: 225px;   
81. z-index: 3;   
82. }   
83. .face .Nline {   
84. width: 3px;   
85. height: 160px;   
86. background: black;   
87. position: absolute;   
88. top: 218px;   
89. left: 248px;   
90. z-index: 3;   
91. }   
92. .face .mouth {   
93. width: 280px;   
94. height: 280px;   
95. border-bottom: 5px solid black;   
96. border-radius: 140px;   
97. position: absolute;   
98. top: 98px;   
99. left: 105px;   
100. }   
101. .face .mustache .MutR_higher {   
102. width: 80px;   
103. height: 2px;   
104. background: black;   
105. position: absolute;   
106. top: 220px;   
107. left: 295px;   
108. z-index: 2;   
109. }   
110. .face .mustache .MutR_middle {   
111. width: 80px;   
112. height: 2px;   
113. background: black;   
114. position: absolute;   
115. top: 240px;   
116. left: 295px;   
117. z-index: 2;   
118. }   
119. .face .mustache .MutR_lower {   
120. width: 80px;   
121. height: 2px;   
122. background: black;   
123. position: absolute;   
124. top: 260px;   
125. left: 295px;   
126. z-index: 2;   
127. }   
128. .face .mustache .MutL_top {   
129. width: 80px;   
130. height: 2px;   
131. background: black;   
132. position: absolute;   
133. top: 220px;   
134. left: 115px;   
135. z-index: 2;   
136. }   
137. .face .mustache .MutL_center {   
138. width: 80px;   
139. height: 2px;   
140. background: black;   
141. position: absolute;   
142. top: 240px;   
143. left: 115px;   
144. z-index: 2;   
145. }   
146. .face .mustache .MutL_bottom {   
147. width: 80px;   
148. height: 2px;   
149. background: black;   
150. position: absolute;   
151. top: 260px;   
152. left: 115px;   
153. z-index: 2;   
154. }   
155. .face .mustache .MutL_bottom,   
156. .face .mustache .MutR_higher {   
157. transform: rotate(160deg);   
158. }   
159. .face .mustache .MutL_top,   
160. .face .mustache .MutR_lower {   
161. transform: rotate(200deg);   
162. }   
163. .neck {   
164. width: 300px;   
165. height: 30px;   
166. background-color: #a31F12;   
167. border: 2px solid black;   
168. border-radius: 15px;   
169. position: relative;   
170. top: 0px;   
171. left: 250px;   
172. z-index: 4;   
173. }   
174. .neck .bell {   
175. width: 60px;   
176. height: 60px;   
177. overflow: hidden;   
178. border: 2px solid black;   
179. border-radius: 60px;   
180. background-color: #cfcb3c;   
181. position: absolute;   
182. top: 5px;   
183. left: 120px;   
184. }   
185. .bell .Bline {   
186. width: 60px;   
187. height: 2px;   
188. background-color: #cfcb3c;   
189. border: 2px solid black;   
190. border-radius: 3px 3px 0 0;   
191. position: absolute;   
192. top: 15px;   
193. }   
194. .bell .Bcircle {   
195. width: 20px;   
196. height: 16px;   
197. background: black;   
198. border-radius: 8px;   
199. position: absolute;   
200. top: 25px;   
201. left: 20px;   
202. }   
203. .bell .Bunderpart {   
204. width: 3px;   
205. height: 20px;   
206. background-color: black;   
207. position: absolute;   
208. left: 28px;   
209. top: 40px;   
210. }   
211. .body {   
212. position: relative;   
213. top: -300px;   
214. z-index: 1;   
215. }   
216. .body .tummy {   
217. width: 280px;   
218. height: 240px;   
219. background-color: #00b1e1;   
220. border: 2px solid black;   
221. position: absolute;   
222. top: 267px;   
223. left: 260px;   
224. }   
225. .body .bellyband {   
226. width: 220px;   
227. height: 220px;   
228. background-color: white;   
229. border: 2px solid black;   
230. border-radius: 110px;   
231. position: absolute;   
232. left: 290px;   
233. top: 267px;   
234. }   
235. .body .pocket {   
236. width: 160px;   
237. height: 160px;   
238. border-radius: 80px;   
239. background-color: white;   
240. border: 2px solid black;   
241. position: absolute;   
242. top: 305px;   
243. left: 320px;   
244. }   
245. .cover {   
246. width: 164px;   
247. height: 80px;   
248. background-color: white;   
249. border-bottom: 2px solid black;   
250. /*border: 5px solid orange; */   
251. position: absolute;   
252. top: 300px;   
253. left: 320px;   
254. }   
255. .left_hand,   
256. .right_hand {   
257. height: 100px;   
258. width: 100px;   
259. position: absolute;   
260. top: 272px;   
261. left: 248px;   
262. }   
263. .left_hand {   
264. left: -10px;   
265. }   
266. .left_hand .Larm {   
267. width: 70px;   
268. height: 100px;   
269. background-color: #00bee8;   
270. border: 1px solid black;   
271. position: relative;   
272. top: 200px;   
273. left: 535px;   
274. transform: rotateZ(135deg);   
275. /*z-index: -1; */   
276. }   
277. .right_hand {   
278. left: -10px;   
279. }   
280. .right_hand .Rarm {   
281. width: 70px;   
282. height: 100px;   
283. background-color: #00bee8;   
284. border: 1px solid black;   
285. /*z-index: -1; */   
286. position: relative;   
287. top: 200px;   
288. left: 215px;   
289. transform: rotateZ(45deg);   
290. }   
291. .left_hand .Lpalm,   
292. .right_hand .Rpalm {   
293. width: 80px;   
294. height: 80px;   
295. border-radius: 40px;   
296. border: 2px solid black;   
297. background-color: white;   
298. position: absolute;   
299. }   
300. .right_hand .Rpalm {   
301. left: 580px;   
302. top: 260px;   
303. z-index: 1;   
304. }   
305. .left_hand .Lpalm {   
306. left: 160px;   
307. top: 260px;   
308. z-index: 1;   
309. }   
310. .foot .left_foot,   
311. .foot .right_foot {   
312. width: 150px;   
313. height: 40px;   
314. background-color: white;   
315. border: 2px solid black;   
316. border-radius: 80px 60px 60px 40px;   
317. position: relative;   
318. }   
319. .foot .left_foot {   
320. left: 240px;   
321. top: 210px;   
322. }   
323. .foot .right_foot {   
324. top: 165px;   
325. left: 410px;   
326. }   
327. .foot .crotch {   
328. width: 40px;   
329. height: 20px;   
330. background-color: white;   
331. border: 2px solid black;   
332. border-bottom: none;   
333. border-radius: 40px 40px 0 0;   
334. position: relative;   
335. top: 103px;   
336. left: 382px;   
337. z-index: 2   
338. }   
339. /style>   
340. /head>   
341. body>   
342. div class="wrap">   
343. div class="whole">   
344. !-- 头 -->   
345. div class="head">   
346. !-- 眼 -->   
347. div class="eye">   
348. !-- 左眼 -->   
349. div class="left_eye">   
350. !-- 左眼球 -->   
351. div class="LeyeBall"> /div>   
352. /div>   
353. !-- 右眼 -->   
354. div class="right_eye">   
355. !-- 右眼球 -->   
356. div class="ReyeBall"> /div>   
357. /div>   
358. /div>   
359. !-- 脸 -->   
360. div class="face">   
361. !-- 脸型 -->   
362. div class="feature"> /div>   
363. !-- 鼻 -->   
364. div class="nose"> /div>   
365. !-- 鼻子线 -->   
366. div class="Nline"> /div>   
367. !-- 嘴 -->   
368. div class="mouth"> /div>   
369. !-- 胡子 -->   
370. div class="mustache">   
371. div class="MutL_top"> /div>   
372. div class="MutL_center"> /div>   
373. div class="MutL_bottom"> /div>   
374. div class="MutR_higher"> /div>   
375. div class="MutR_middle"> /div>   
376. div class="MutR_lower"> /div>   
377. /div>   
378. /div>   
379. /div>   
380. !-- 脖子 -->   
381. div class="neck">   
382. !-- 铃铛 -->   
383. div class="bell">   
384. div class="Bline"> /div>   
385. div class="Bcircle"> /div>   
386. div class="Bunderpart"> /div>   
387. /div>   
388. /div>   
389. !-- 身体 -->   
390. div class="body">   
391. !-- 肚子 -->   
392. div class="tummy"> /div>   
393. !-- 肚兜 -->   
394. div class="bellyband"> /div>   
395. !-- 口袋 -->   
396. div class="pocket"> /div>   
397. div class="cover"> /div>   
398. /div>   
399. !-- 左手 -->   
400. div class="left_hand">   
401. !-- 手臂 -->   
402. div class="Larm"> /div>   
403. !-- 手掌 -->   
404. div class="Lpalm"> /div>   
405. /div>   
406. !-- 右手 -->   
407. div class="right_hand">   
408. !-- 手臂 -->   
409. div class="Rarm"> /div>   
410. !-- 手掌 -->   
411. div class="Rpalm"> /div>   
412. /div>   
413. !-- 脚 -->   
414. div class="foot">   
415. !-- 左脚 -->   
416. div class="left_foot"> /div>   
417. !-- 右脚 -->   
418. div class="right_foot"> /div>   
419. div class="crotch"> /div>   
420. /div>   
421. /div>   
422. /div>   
423. /body>   
424. /html>   

以上所述是小编给大家介绍的HTML5+CSS3实现机器猫，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！