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

来源：动视网责编：小采时间：2020-11-27 15:05:08

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

关于HTML5和CSS3实现机器猫的代码:本文给大家分享一段html5和css3实现的机器猫功能，代码简单易懂非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧下面一段代码是有关html5和css3实现机器猫的代码，具体代码如下所示：<!DOCTYPE html> <html lang="en&

推荐度：

点击下载本文 文档为doc格式

导读关于HTML5和CSS3实现机器猫的代码:本文给大家分享一段html5和css3实现的机器猫功能，代码简单易懂非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧下面一段代码是有关html5和css3实现机器猫的代码，具体代码如下所示：<!DOCTYPE html> <html lang="en&

本文给大家分享一段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: 1px; 
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实现机器猫的代码

推荐度：

点击下载本文 文档为doc格式

标签：实现代码 html5

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐