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

百变鹏仔 2个月前 (10-18) #H5教程
文章标签机器猫
本文给大家分享一段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实现机器猫的代码

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集
