HTML5+CSS3实现机器猫

时间：2021-05-08

下面一段代码是有关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;
  • 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;
  • 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);
  • }
  • .right_hand{
  • left:-10px;
  • }
  • .right_hand.Rarm{
  • width:70px;
  • height:100px;
  • background-color:#00bee8;
  • border:1pxsolidblack;
  • 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实现机器猫，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章