HTML5+CSS3实现机器猫

2019-09-08 郑州网站建设  

下面一段代码是有关html5和css3实现机器猫的代码,具体代码如下所示:

XML/HTML Code复制内容到剪贴板

<!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>  

<div class="wrap">  

<div class="whole">  

<!-- 头 -->  

<div class="head">  

<!-- 眼 -->  

<div class="eye">  

<!-- 左眼 -->  

<div class="left_eye">  

<!-- 左眼球 -->  

<div class="LeyeBall"></div>  

</div>  

<!-- 右眼 -->  

<div class="right_eye">  

<!-- 右眼球 -->  

<div class="ReyeBall"></div>  

</div>  

</div>  

<!-- 脸 -->  

<div class="face">  

<!-- 脸型 -->  

<div class="feature"></div>  

<!-- 鼻 -->  

<div class="nose"></div>  

<!-- 鼻子线 -->  

<div class="Nline"></div>  

<!-- 嘴 -->  

<div class="mouth"></div>  

<!-- 胡子 -->  

<div class="mustache">  

<div class="MutL_top"></div>  

<div class="MutL_center"></div>  

<div class="MutL_bottom"></div>  

<div class="MutR_higher"></div>  

<div class="MutR_middle"></div>  

<div class="MutR_lower"></div>  

</div>  

</div>  

</div>  

<!-- 脖子 -->  

<div class="neck">  

<!-- 铃铛 -->  

<div class="bell">  

<div class="Bline"></div>  

<div class="Bcircle"></div>  

<div class="Bunderpart"></div>  

</div>  

</div>  

<!-- 身体 -->  

<div class="body">  

<!-- 肚子 -->  

<div class="tummy"></div>  

<!-- 肚兜 -->  

<div class="bellyband"></div>  

<!-- 口袋 -->  

<div class="pocket"></div>  

<div class="cover"></div>  

</div>  

<!-- 左手 -->  

<div class="left_hand">  

<!-- 手臂 -->  

<div class="Larm"></div>  

<!-- 手掌 -->  

<div class="Lpalm"></div>  

</div>  

<!-- 右手 -->  

<div class="right_hand">  

<!-- 手臂 -->  

<div class="Rarm"></div>  

<!-- 手掌 -->  

<div class="Rpalm"></div>  

</div>  

<!-- 脚 -->  

<div class="foot">  

<!-- 左脚 -->  

<div class="left_foot"></div>  

<!-- 右脚 -->  

<div class="right_foot"></div>  

<div class="crotch"></div>  

</div>  

</div>  

</div>  

</body>  

</html>  


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1351.html转载请标明出处,谢谢合作!
标签:
  • HTML5
  • CSS3
  • 下面
  • HT
  • 代码
  • +
  • 有关