关于HTML5和CSS3实现机器猫的代码

本文给大家分享一段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></body></html>
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
html5和jquery实现弹出创意搜索框层的方法
html5和css3以及jquery实现音乐播放器
以上就是关于html5和css3实现机器猫的代码的详细内容。

关于HTML5和CSS3实现机器猫的代码

推荐信息