真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

怎么用HTML5+CSS3實現(xiàn)機器貓

本篇內(nèi)容介紹了“怎么用HTML5+CSS3實現(xiàn)機器貓”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

為上高等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及上高網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都做網(wǎng)站、網(wǎng)站制作、上高網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

下面一段代碼是有關(guān)html5和css3實現(xiàn)機器貓的代碼，具體代碼如下所示：

XML/HTML Code復制內(nèi)容到剪貼板

  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實現(xiàn)機器貓”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！


    文章標題：怎么用HTML5+CSS3實現(xiàn)機器貓
    本文地址：http://weahome.cn/article/gehgdc.html

    其他資訊

    在線咨詢

    微信咨詢

    電話咨詢

    028-86922220（工作日）

    18980820575（7×24）

    提交需求

    返回頂部