关于HTML5和CSS3实现机器猫的代码
导读：收集整理的这篇文章主要介绍了关于HTML5和CSS3实现机器猫的代码，觉得挺不错的，现在分享给大家，也给大家做个参考。本文给大家分享一段htML5和css3实现的机器猫功能，代码简单易懂非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧下面...
收集整理的这篇文章主要介绍了关于HTML5和CSS3实现机器猫的代码，觉得挺不错的，现在分享给大家，也给大家做个参考。本文给大家分享一段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: 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>
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
HTML5和jquery实现弹出创意搜索框层的方法
html5和css3以及jquery实现音乐播放器
以上就是关于HTML5和CSS3实现机器猫的代码的详细内容，更多请关注其它相关文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 关于HTML5和CSS3实现机器猫的代码
本文地址： https://pptw.com/jishu/584268.html