下面一段代码是有关html5和css3实现机器猫的代码，具体代码如下所示：
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>机器猫</title> <styletype="text/css"> *{ margin:0; padding:0; } .whole{ width:800px; margin:20pxauto; /*border:2pxsolidyellow;*/ background-color:white; position:relative; } .head{ margin:0auto; position:relative; width:500px; height:440px; background-color:#00b7e7; border-radius:220px; border:1pxsolidred; } .eye.left_eye, .eye.right_eye{ width:100px; height:130px; background-color:white; border:2pxsolidblack; 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:2pxsolidblack; 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:5pxsolidblack; 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:2pxsolidblack; border-radius:15px; position:relative; top:0px; left:250px; z-index:4; } .neck.bell{ width:60px; height:60px; overflow:hidden; border:2pxsolidblack; border-radius:60px; background-color:#cfcb3c; position:absolute; top:5px; left:120px; } .bell.Bline{ width:60px; height:2px; background-color:#cfcb3c; border:2pxsolidblack; border-radius:3px3px00; 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:2pxsolidblack; position:absolute; top:267px; left:260px; } .body.bellyband{ width:220px; height:220px; background-color:white; border:2pxsolidblack; border-radius:110px; position:absolute; left:290px; top:267px; } .body.pocket{ width:160px; height:160px; border-radius:80px; background-color:white; border:2pxsolidblack; position:absolute; top:305px; left:320px; } .cover{ width:164px; height:80px; background-color:white; border-bottom:2pxsolidblack; /*border:5pxsolidorange;*/ 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:1pxsolidblack; 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:1pxsolidblack; /*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:2pxsolidblack; 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:2pxsolidblack; border-radius:80px60px60px40px; 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:2pxsolidblack; border-bottom:none; border-radius:40px40px00; position:relative; top:103px; left:382px; z-index:2 } </style> </head> <body> <divclass="wrap"> <divclass="whole"> <> <divclass="head"> <> <divclass="eye"> <> <divclass="left_eye"> <> <divclass="LeyeBall"></div> </div> <> <divclass="right_eye"> <> <divclass="ReyeBall"></div> </div> </div> <> <divclass="face"> <> <divclass="feature"></div> <> <divclass="nose"></div> <> <divclass="Nline"></div> <> <divclass="mouth"></div> <> <divclass="mustache"> <divclass="MutL_top"></div> <divclass="MutL_center"></div> <divclass="MutL_bottom"></div> <divclass="MutR_higher"></div> <divclass="MutR_middle"></div> <divclass="MutR_lower"></div> </div> </div> </div> <> <divclass="neck"> <> <divclass="bell"> <divclass="Bline"></div> <divclass="Bcircle"></div> <divclass="Bunderpart"></div> </div> </div> <> <divclass="body"> <> <divclass="tummy"></div> <> <divclass="bellyband"></div> <> <divclass="pocket"></div> <divclass="cover"></div> </div> <> <divclass="left_hand"> <> <divclass="Larm"></div> <> <divclass="Lpalm"></div> </div> <> <divclass="right_hand"> <> <divclass="Rarm"></div> <> <divclass="Rpalm"></div> </div> <> <divclass="foot"> <> <divclass="left_foot"></div> <> <divclass="right_foot"></div> <divclass="crotch"></div> </div> </div> </div> </body> </html>
以上所述是小编给大家介绍的HTML5+CSS3实现机器猫，希望对大家有所帮助，如果大家有任何疑问请给我们留言，小编会及时回复大家的。在此也非常感谢大家对查字典教程网的支持！
【HTML5+CSS3实现机器猫】相关文章：
★ HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果