189 8069 5689

怎么用HTML5+CSS3实现机器猫

本篇内容介绍了“怎么用HTML5+CSS3实现机器猫”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

为上高等地区用户提供了全套网页设计制作服务，及上高网站建设行业解决方案。主营业务为成都做网站、网站制作、上高网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

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

XML/HTML Code复制内容到剪贴板

  1.   

  2.   

  3.   

  4.   

  5. 机器猫  

  6.   

  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.   

  340.   

  341.   

  342.   

  343.   

  344.   

  345.   

  346.   

  347.   

  348.   

  349.   

  350.   

  

    •   

  •   

  •   

  •   

    •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

  •   

    • “怎么用HTML5+CSS3实现机器猫”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！


    文章名称：怎么用HTML5+CSS3实现机器猫
    本文网址：http://cdxtjz.cn/article/gehgdc.html

    其他资讯