返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

HTML5+CSS3实现机器猫

2019-01-28 14:26:54王振洲

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>   <html lang="en">  
  2. <head>   <meta charset="UTF-8">  
  3. <title>机器猫</title>   <style type="text/css">  
  4. * {    margin: 0;   
  5. padding: 0;    }   
  6. .whole {    width: 800px;   
  7. margin: 20px auto;    /*border: 2px solid yellow;*/   
  8. background-color: white;    position: relative;   
  9. }    .head {   
  10. margin: 0 auto;    position: relative;   
  11. width: 500px;    height: 440px;   
  12. background-color: #00b7e7;    border-radius: 220px;   
  13. border: 1px solid red;    }   
  14. .eye .left_eye,    .eye .right_eye {   
  15. width: 100px;    height: 130px;   
  16. background-color: white;    border: 2px solid black;   
  17. border-radius: 50px;    position: absolute;   
  18. top: 50px;    z-index: 3;   
  19. }    .eye .LeyeBall,   
  20. .eye .ReyeBall {    width: 20px;   
  21. height: 20px;    background: black;   
  22. border-radius: 10px;    position: absolute;   
  23. top: 65px;    }   
  24. .eye .left_eye {    left: 146px;   
  25. }    .eye .right_eye {   
  26. left: 250px;    }   
  27. .eye .LeyeBall {    right: 10px;   
  28. }    .eye .ReyeBall {   
  29. left: 10px;    }   
  30. .face {    position: relative;   
  31. z-index: 2;    }   
  32. .face .feature {    width: 400px;   
  33. height: 320px;    border-radius: 160px;   
  34. position: absolute;    top: 100px;   
  35. left: 50px;    background: white;   
  36. }    .face .nose {   
  37. width: 45px;    height: 50px;   
  38. border-radius: 23px;    background-color: #cf3318;   
  39. border: 2px solid black;    position: absolute;   
  40. top: 165px;    left: 225px;   
  41. z-index: 3;    }   
  42. .face .Nline {    width: 3px;   
  43. height: 160px;    background: black;   
  44. position: absolute;    top: 218px;   
  45. left: 248px;    z-index: 3;   
  46. }    .face .mouth {   
  47. width: 280px;    height: 280px;   
  48. border-bottom: 5px solid black;    border-radius: 140px;   
  49. position: absolute;    top: 98px;   
  50. left: 105px;    }   
  51. .face .mustache .MutR_higher {    width: 80px;   
  52. height: 2px;    background: black;   
  53. position: absolute;    top: 220px;   
  54. left: 295px;    z-index: 2;   
  55. }    .face .mustache .MutR_middle {   
  56. width: 80px;    height: 2px;   
  57. background: black;    position: absolute;   
  58. top: 240px;    left: 295px;   
  59. z-index: 2;    }   
  60. .face .mustache .MutR_lower {    width: 80px;   
  61. height: 2px;    background: black;   
  62. position: absolute;    top: 260px;   
  63. left: 295px;    z-index: 2;   
  64. }    .face .mustache .MutL_top {   
  65. width: 80px;    height: 2px;   
  66. background: black;    position: absolute;   
  67. top: 220px;    left: 115px;   
  68. z-index: 2;    }   
  69. .face .mustache .MutL_center {    width: 80px;   
  70. height: 2px;    background: black;   
  71. position: absolute;    top: 240px;   
  72. left: 115px;    z-index: 2;   
  73. }    .face .mustache .MutL_bottom {   
  74. width: 80px;    height: 2px;   
  75. background: black;    position: absolute;   
  76. top: 260px;    left: 115px;   
  77. z-index: 2;    }   
  78. .face .mustache .MutL_bottom,    .face .mustache .MutR_higher {   
  79. transform: rotate(160deg);    }   
  80. .face .mustache .MutL_top,    .face .mustache .MutR_lower {   
  81. transform: rotate(200deg);    }   
  82. .neck {    width: 300px;   
  83. height: 30px;    background-color: #a31f12;   
  84. border: 2px solid black;    border-radius: 15px;   
  85. position: relative;    top: 0px;   
  86. left: 250px;    z-index: 4;   
  87. }    .neck .bell {   
  88. width: 60px;    height: 60px;   
  89. overflow: hidden;    border: 2px solid black;   
  90. border-radius: 60px;    background-color: #cfcb3c;   
  91. position: absolute;    top: 5px;   
  92. left: 120px;    }   
  93. .bell .Bline {    width: 60px;   
  94. height: 2px;    background-color: #cfcb3c;   
  95. border: 2px solid black;    border-radius: 3px 3px 0 0;   
  96. position: absolute;    top: 15px;   
  97. }    .bell .Bcircle {   
  98. width: 20px;    height: 16px;   
  99. background: black;    border-radius: 8px;   
  100. position: absolute;    top: 25px;   
  101. left: 20px;    }   
  102. .bell .Bunderpart {    width: 3px;   
  103. height: 20px;    background-color: black;   
  104. position: absolute;    left: 28px;   
  105. top: 40px;    }   
  106. .body {    position: relative;   
  107. top: -300px;    z-index: 1;   
  108. }    .body .tummy {   
  109. width: 280px;    height: 240px;   
  110. background-color: #00b1e1;    border: 2px solid black;   
  111. position: absolute;    top: 267px;   
  112. left: 260px;    }   
  113. .body .bellyband {    width: 220px;   
  114. height: 220px;    background-color: white;   
  115. border: 2px solid black;    border-radius: 110px;   
  116. position: absolute;    left: 290px;   
  117. top: 267px;    }   
  118. .body .pocket {    width: 160px;   
  119. height: 160px;    border-radius: 80px;   
  120. background-color: white;    border: 2px solid black;   
  121. position: absolute;    top: 305px;   
  122. left: 320px;    }   
  123. .cover {    width: 164px;   
  124. height: 80px;    background-color: white;   
  125. border-bottom: 2px solid black;    /*border: 5px solid orange;*/   
  126. position: absolute;    top: 300px;   
  127. left: 320px;    }   
  128. .left_hand,    .right_hand {   
  129. height: 100px;    width: 100px;   
  130. position: absolute;    top: 272px;   
  131. left: 248px;    }   
  132. .left_hand {    left: -10px;   
  133. }    .left_hand .Larm {   
  134. width: 70px;    height: 100px;   
  135. background-color: #00bee8;    border: 1px solid black;   
  136. position: relative;    top: 200px;   
  137. left: 535px;    transform: rotateZ(135deg);   
  138. /*z-index: -1;*/    }   
  139. .right_hand {    left: -10px;   
  140. }    .right_hand .Rarm {   
  141. width: 70px;    height: 100px;   
  142. background-color: #00bee8;    border: 1px solid black;   
  143. /*z-index: -1;*/    position: relative;   
  144. top: 200px;    left: 215px;   
  145. transform: rotateZ(45deg);    }   
  146. .left_hand .Lpalm,    .right_hand .Rpalm {   
  147. width: 80px;    height: 80px;   
  148. border-radius: 40px;    border: 2px solid black;   
  149. background-color: white;    position: absolute;   
  150. }    .right_hand .Rpalm {   
  151. left: 580px;    top: 260px;   
  152. z-index: 1;    }   
  153. .left_hand .Lpalm {    left: 160px;   
  154. top: 260px;    z-index: 1;   
  155. }    .foot .left_foot,   
  156. .foot .right_foot {    width: 150px;   
  157. height: 40px;    background-color: white;   
  158. border: 2px solid black;    border-radius: 80px 60px 60px 40px;   
  159. position: relative;    }   
  160. .foot .left_foot {    left: 240px;   
  161. top: 210px;    }   
  162. .foot .right_foot {    top: 165px;   
  163. left: 410px;    }   
  164. .foot .crotch {    width: 40px;   
  165. height: 20px;    background-color: white;   
  166. border: 2px solid black;    border-bottom: none;   
  167. border-radius: 40px 40px 0 0;    position: relative;   
  168. top: 103px;    left: 382px;   
  169. z-index: 2    }   
  170. </style>   </head>  
  171. <body>   <div class="wrap">  
  172. <div class="whole">   <!-- 头 -->  
  173. <div class="head">   <!-- 眼 -->  
  174. <div class="eye">   <!-- 左眼 -->  
  175. <div class="left_eye">   <!-- 左眼球 -->  
  176. <div class="LeyeBall"></div>   </div>  
  177. <!-- 右眼 -->   <div class="right_eye">  
  178. <!-- 右眼球 -->   <div class="ReyeBall"></div>  
  179. </div>   </div>  
  180. <!-- 脸 -->   <div class="face">  
  181. <!-- 脸型 -->   <div class="feature"></div>  
  182. <!-- 鼻 -->   <div class="nose"></div>  
  183. <!-- 鼻子线 -->   <div class="Nline"></div>  
  184. <!-- 嘴 -->   <div class="mouth"></div>  
  185. <!-- 胡子 -->   <div class="mustache">  
  186. <div class="MutL_top"></div>   <div class="MutL_center"></div>  
  187. <div class="MutL_bottom"></div>   <div class="MutR_higher"></div>  
  188. <div class="MutR_middle"></div>   <div class="MutR_lower"></div>  
  189. </div>   </div>  
  190. </div>   <!-- 脖子 -->  
  191. <div class="neck">   <!-- 铃铛 -->  
  192. <div class="bell">   <div class="Bline"></div>  
  193. <div class="Bcircle"></div>   <div class="Bunderpart"></div>  
  194. </div>   </div>  
  195. <!-- 身体 -->   <div class="body">  
  196. <!-- 肚子 -->   <div class="tummy"></div>  
  197. <!-- 肚兜 -->   <div class="bellyband"></div>  
  198. <!-- 口袋 -->   <div class="pocket"></div>  
  199. <div class="cover"></div>   </div>  
  200. <!-- 左手 -->   <div class="left_hand">  
  201. <!-- 手臂 -->   <div class="Larm"></div>  
  202. <!-- 手掌 -->   <div class="Lpalm"></div>  
  203. </div>   <!-- 右手 -->  
  204. <div class="right_hand">   <!-- 手臂 -->  
  205. <div class="Rarm"></div>   <!-- 手掌 -->  
  206. <div class="Rpalm"></div>   </div>  
  207. <!-- 脚 -->   <div class="foot">  
  208. <!-- 左脚 -->   <div class="left_foot"></div>  
  209. <!-- 右脚 -->   <div class="right_foot"></div>  
  210. <div class="crotch"></div>   </div>  
  211. </div>   </div>  
  212. </body>   </html>  
相关文章 大家在看