HTML5+CSS3实现机器猫
程序员文章站
2023-11-26 17:26:16
本文给大家分享一段html5和css3实现的机器猫功能,代码简单易懂非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧... 16-10-17...
下面一段代码是有关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实现机器猫,希望对大家有所帮助
上一篇: 利用谷歌 Translate API制作自己的翻译脚本
下一篇: PHP4之真OO