HTML5+CSS3实现机器猫

Mangena ·

更新时间:2024-11-13

· 921 次阅读

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

XML/HTML Code复制内容到剪贴板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>机器猫</title> <style type="text/css"> * { margin: 0; padding: 0; } .whole { width: 800px; margin: 20px auto; /*border: 2px solid yellow;*/ background-color: white; position: relative; } .head { margin: 0 auto; position: relative; width: 500px; height: 440px; background-color: #00b7e7; border-radius: 220px; border: 1px solid red; } .eye .left_eye, .eye .right_eye { width: 100px; height: 130px; background-color: white; border: 2px solid black; border-radius: 50px; position: absolute; top: 50px; z-index: 3; } .eye .LeyeBall, .eye .ReyeBall { width: 20px; height: 20px; background: black; border-radius: 10px; position: absolute; top: 65px; } .eye .left_eye { left: 146px; } .eye .right_eye { left: 250px; } .eye .LeyeBall { right: 10px; } .eye .ReyeBall { left: 10px; } .face { position: relative; z-index: 2; } .face .feature { width: 400px; height: 320px; border-radius: 160px; position: absolute; top: 100px; left: 50px; background: white; } .face .nose { width: 45px; height: 50px; border-radius: 23px; background-color: #cf3318; border: 2px solid black; position: absolute; top: 165px; left: 225px; z-index: 3; } .face .Nline { width: 3px; height: 160px; background: black; position: absolute; top: 218px; left: 248px; z-index: 3; } .face .mouth { width: 280px; height: 280px; border-bottom: 5px solid black; border-radius: 140px; position: absolute; top: 98px; left: 105px; } .face .mustache .MutR_higher { width: 80px; height: 2px; background: black; position: absolute; top: 220px; left: 295px; z-index: 2; } .face .mustache .MutR_middle { width: 80px; height: 2px; background: black; position: absolute; top: 240px; left: 295px; z-index: 2; } .face .mustache .MutR_lower { width: 80px; height: 2px; background: black; position: absolute; top: 260px; left: 295px; z-index: 2; } .face .mustache .MutL_top { width: 80px; height: 2px; background: black; position: absolute; top: 220px; left: 115px; z-index: 2; } .face .mustache .MutL_center { width: 80px; height: 2px; background: black; position: absolute; top: 240px; left: 115px; z-index: 2; } .face .mustache .MutL_bottom { width: 80px; height: 2px; background: black; position: absolute; top: 260px; left: 115px; z-index: 2; } .face .mustache .MutL_bottom, .face .mustache .MutR_higher { transform: rotate(160deg); } .face .mustache .MutL_top, .face .mustache .MutR_lower { transform: rotate(200deg); } .neck { width: 300px; height: 30px; background-color: #a31f12; border: 2px solid black; border-radius: 15px; position: relative; top: 0px; left: 250px; z-index: 4; } .neck .bell { width: 60px; height: 60px; overflow: hidden; border: 2px solid black; border-radius: 60px; background-color: #cfcb3c; position: absolute; top: 5px; left: 120px; } .bell .Bline { width: 60px; height: 2px; background-color: #cfcb3c; border: 2px solid black; border-radius: 3px 3px 0 0; position: absolute; top: 15px; } .bell .Bcircle { width: 20px; height: 16px; background: black; border-radius: 8px; position: absolute; top: 25px; left: 20px; } .bell .Bunderpart { width: 3px; height: 20px; background-color: black; position: absolute; left: 28px; top: 40px; } .body { position: relative; top: -300px; z-index: 1; } .body .tummy { width: 280px; height: 240px; background-color: #00b1e1; border: 2px solid black; position: absolute; top: 267px; left: 260px; } .body .bellyband { width: 220px; height: 220px; background-color: white; border: 2px solid black; border-radius: 110px; position: absolute; left: 290px; top: 267px; } .body .pocket { width: 160px; height: 160px; border-radius: 80px; background-color: white; border: 2px solid black; position: absolute; top: 305px; left: 320px; } .cover { width: 164px; height: 80px; background-color: white; border-bottom: 2px solid black; /*border: 5px solid orange;*/ position: absolute; top: 300px; left: 320px; } .left_hand, .right_hand { height: 100px; width: 100px; position: absolute; top: 272px; left: 248px; } .left_hand { left: -10px; } .left_hand .Larm { width: 70px; height: 100px; background-color: #00bee8; border: 1px solid black; position: relative; top: 200px; left: 535px; transform: rotateZ(135deg); /*z-index: -1;*/ } .right_hand { left: -10px; } .right_hand .Rarm { width: 70px; height: 100px; background-color: #00bee8; border: 1px solid black; /*z-index: -1;*/ position: relative; top: 200px; left: 215px; transform: rotateZ(45deg); } .left_hand .Lpalm, .right_hand .Rpalm { width: 80px; height: 80px; border-radius: 40px; border: 2px solid black; background-color: white; position: absolute; } .right_hand .Rpalm { left: 580px; top: 260px; z-index: 1; } .left_hand .Lpalm { left: 160px; top: 260px; z-index: 1; } .foot .left_foot, .foot .right_foot { width: 150px; height: 40px; background-color: white; border: 2px solid black; border-radius: 80px 60px 60px 40px; position: relative; } .foot .left_foot { left: 240px; top: 210px; } .foot .right_foot { top: 165px; left: 410px; } .foot .crotch { width: 40px; height: 20px; background-color: white; border: 2px solid black; border-bottom: none; border-radius: 40px 40px 0 0; position: relative; top: 103px; left: 382px; z-index: 2 } </style> </head> <body> <div class="wrap"> <div class="whole">  <div class="head">  <div class="eye">  <div class="left_eye">  <div class="LeyeBall"></div> </div>  <div class="right_eye">  <div class="ReyeBall"></div> </div> </div>  <div class="face">  <div class="feature"></div>  <div class="nose"></div>  <div class="Nline"></div>  <div class="mouth"></div>  <div class="mustache"> <div class="MutL_top"></div> <div class="MutL_center"></div> <div class="MutL_bottom"></div> <div class="MutR_higher"></div> <div class="MutR_middle"></div> <div class="MutR_lower"></div> </div> </div> </div>  <div class="neck">  <div class="bell"> <div class="Bline"></div> <div class="Bcircle"></div> <div class="Bunderpart"></div> </div> </div>  <div class="body">  <div class="tummy"></div>  <div class="bellyband"></div>  <div class="pocket"></div> <div class="cover"></div> </div>  <div class="left_hand">  <div class="Larm"></div>  <div class="Lpalm"></div> </div>  <div class="right_hand">  <div class="Rarm"></div>  <div class="Rpalm"></div> </div>  <div class="foot">  <div class="left_foot"></div>  <div class="right_foot"></div> <div class="crotch"></div> </div> </div> </div> </body> </html>

以上所述是小编给大家介绍的HTML5+CSS3实现机器猫，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！

CSS3 HTML5 HTML CSS

1024 个赞