下面一段代码是有关html5和css3实现机器猫的代码,具体代码如下所示:
<!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> <p class=wrap> <p class=whole> <!-- 头 --> <p class=head> <!-- 眼 --> <p class=eye> <!-- 左眼 --> <p class=left_eye> <!-- 左眼球 --> <p class=LeyeBall></p> </p> <!-- 右眼 --> <p class=right_eye> <!-- 右眼球 --> <p class=ReyeBall></p> </p> </p> <!-- 脸 --> <p class=face> <!-- 脸型 --> <p class=feature></p> <!-- 鼻 --> <p class=nose></p> <!-- 鼻子线 --> <p class=Nline></p> <!-- 嘴 --> <p class=mouth></p> <!-- 胡子 --> <p class=mustache> <p class=MutL_top></p> <p class=MutL_center></p> <p class=MutL_bottom></p> <p class=MutR_higher></p> <p class=MutR_middle></p> <p class=MutR_lower></p> </p> </p> </p> <!-- 脖子 --> <p class=neck> <!-- 铃铛 --> <p class=bell> <p class=Bline></p> <p class=Bcircle></p> <p class=Bunderpart></p> </p> </p> <!-- 身体 --> <p class=body> <!-- 肚子 --> <p class=tummy></p> <!-- 肚兜 --> <p class=bellyband></p> <!-- 口袋 --> <p class=pocket></p> <p class=cover></p> </p> <!-- 左手 --> <p class=left_hand> <!-- 手臂 --> <p class=Larm></p> <!-- 手掌 --> <p class=Lpalm></p> </p> <!-- 右手 --> <p class=right_hand> <!-- 手臂 --> <p class=Rarm></p> <!-- 手掌 --> <p class=Rpalm></p> </p> <!-- 脚 --> <p class=foot> <!-- 左脚 --> <p class=left_foot></p> <!-- 右脚 --> <p class=right_foot></p> <p class=crotch></p> </p> </p> </p> </body> </html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。