• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML5+CSS3实现机器猫

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

    XML/HTML Code复制内容到剪贴板
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4. <meta charset="UTF-8">  
    5. <title>机器猫</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实现机器猫，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

    上一篇：html5将图片转换成base64的实例代码
    下一篇：html5中的一些标签学习(心得)
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    HTML5+CSS3实现机器猫 HTML5+CSS3,实现,机器猫,HTML5+CSS3,