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

互联网 18-6-26
本文给大家分享一段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>
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
关于HTML5和CSS3实现机器猫的代码

相关资讯

标签推荐
