HTML5+CSS3实现机器猫
更新时间:2023-04-03 04:34:02 阅读： 评论：0
下面一段代码是有关html5和css3实现机器猫的代码，具体代码如下所示：
xml/html code
复制内容到剪贴板
<!doctypehtml><htmllang=“en”><head><metachart=“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-ind暖气片原理ex: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.no{ 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:5pxsolidor合肥中学排名ange;*/ 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=“no&360与百度#8221;></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>以上所述是www.887551.com给大家介绍的html5+css3实现机器猫，希望对大家有所帮助
本文word下载地址：HTML5+CSS3实现机器猫.doc
本文 PDF 下载地址：HTML5+CSS3实现机器猫.pdf
