幽灵资源网 Design By www.bzswh.com
下面一段代码是有关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>
以上所述是小编给大家介绍的HTML5+CSS3实现机器猫,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...