本文给大家分享一段html5和css3实现的机器猫功能,代码简单易懂非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
下面一段代码是有关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>
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注编程之家!
相关推荐:
以上就是关于HTML5和CSS3实现机器猫的代码的详细内容,更多请关注编程之家其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。