溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時間：2021-08-07 22:37:41 來源：億速云 閱讀：139 作者：chen 欄目：web開發(fā)

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

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

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

  1. <!DOCTYPE html>  

  2. <html lang="en">  

  3. <head>  

  4. <meta charset="UTF-8">  

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手