HTML5+CSS3如何实现机器猫

互联网
上天赐予了你宝贵的生命，必定要让你在一生中，坚持，奋斗到最后一秒，燃烧尽生命的火焰。

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>机器猫</title>
  6. <styletype="text/css">
  7. *{
  8. margin:0;
  9. padding:0;
  10. }
  11. .whole{
  12. width:800px;
  13. margin:20pxauto;
  14. /*border:2pxsolidyellow;*/
  15. background-color:white;
  16. position:relative;
  17. }
  18. .head{
  19. margin:0auto;
  20. position:relative;
  21. width:500px;
  22. height:440px;
  23. background-color:#00b7e7;
  24. border-radius:220px;
  25. border:1pxsolidred;
  26. }
  27. .eye.left_eye,
  28. .eye.right_eye{
  29. width:100px;
  30. height:130px;
  31. background-color:white;
  32. border:2pxsolidblack;
  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:2pxsolidblack;
  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:5pxsolidblack;
  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:2pxsolidblack;
  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:2pxsolidblack;
  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:2pxsolidblack;
  190. border-radius:3px3px00;
  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:2pxsolidblack;
  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:2pxsolidblack;
  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:2pxsolidblack;
  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:2pxsolidblack;
  250. /*border:5pxsolidorange;*/
  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:1pxsolidblack;
  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:1pxsolidblack;
  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:2pxsolidblack;
  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:2pxsolidblack;
  316. border-radius:80px60px60px40px;
  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:2pxsolidblack;
  332. border-bottom:none;
  333. border-radius:40px40px00;
  334. position:relative;
  335. top:103px;
  336. left:382px;
  337. z-index:2
  338. }
  339. </style>
  340. </head>
  341. <body>
  342. <divclass="wrap">
  343. <divclass="whole">
  344. <!--头-->
  345. <divclass="head">
  346. <!--眼-->
  347. <divclass="eye">
  348. <!--左眼-->
  349. <divclass="left_eye">
  350. <!--左眼球-->
  351. <divclass="LeyeBall"></div>
  352. </div>
  353. <!--右眼-->
  354. <divclass="right_eye">
  355. <!--右眼球-->
  356. <divclass="ReyeBall"></div>
  357. </div>
  358. </div>
  359. <!--脸-->
  360. <divclass="face">
  361. <!--脸型-->
  362. <divclass="feature"></div>
  363. <!--鼻-->
  364. <divclass="nose"></div>
  365. <!--鼻子线-->
  366. <divclass="Nline"></div>
  367. <!--嘴-->
  368. <divclass="mouth"></div>
  369. <!--胡子-->
  370. <divclass="mustache">
  371. <divclass="MutL_top"></div>
  372. <divclass="MutL_center"></div>
  373. <divclass="MutL_bottom"></div>
  374. <divclass="MutR_higher"></div>
  375. <divclass="MutR_middle"></div>
  376. <divclass="MutR_lower"></div>
  377. </div>
  378. </div>
  379. </div>
  380. <!--脖子-->
  381. <divclass="neck">
  382. <!--铃铛-->
  383. <divclass="bell">
  384. <divclass="Bline"></div>
  385. <divclass="Bcircle"></div>
  386. <divclass="Bunderpart"></div>
  387. </div>
  388. </div>
  389. <!--身体-->
  390. <divclass="body">
  391. <!--肚子-->
  392. <divclass="tummy"></div>
  393. <!--肚兜-->
  394. <divclass="bellyband"></div>
  395. <!--口袋-->
  396. <divclass="pocket"></div>
  397. <divclass="cover"></div>
  398. </div>
  399. <!--左手-->
  400. <divclass="left_hand">
  401. <!--手臂-->
  402. <divclass="Larm"></div>
  403. <!--手掌-->
  404. <divclass="Lpalm"></div>
  405. </div>
  406. <!--右手-->
  407. <divclass="right_hand">
  408. <!--手臂-->
  409. <divclass="Rarm"></div>
  410. <!--手掌-->
  411. <divclass="Rpalm"></div>
  412. </div>
  413. <!--脚-->
  414. <divclass="foot">
  415. <!--左脚-->
  416. <divclass="left_foot"></div>
  417. <!--右脚-->
  418. <divclass="right_foot"></div>
  419. <divclass="crotch"></div>
  420. </div>
  421. </div>
  422. </div>
  423. </body>
  424. </html>

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

以上就是HTML5+CSS3如何实现机器猫。谁卑微了承诺，放肆了寂寞，又丢下了我。更多关于HTML5+CSS3如何实现机器猫请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
HTML5之高度塌陷问题的如何解决
html5笛卡尔心形曲线的如何实现
如何使用feDisplacementMap+feImage滤镜如何实现水波纹效果(计算动态值)
如何使用canvas对video视频某一刻截图功能
Canvas如何做个雪花屏版404的如何实现