<!doctype html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>机器猫</title>
<style>
.heard {
width: 400px;
height: 400px;
background: linear-gradient(to left bottom, #C9F5FC 0%, #09BEED, #222 130%);
border: 1px solid #277E89;
position: relative;
left: 500px;
border-radius: 48%; } .face {
width: 350px;
height: 300px;
background: #fff;
box-shadow: 0 0 5px #ddd inset;
border: 2px solid #14819A;
left: 25px;
top: 80px;
position: absolute;
border-radius: 50%; } .eyes {
width: 90px;
height: 120px;
border: 2px solid #555;
background: #fff;
top: 40px;
left: 110px;
position: absolute;
z-index: 99; border-radius: 45%;
transform: rotate(-3deg);
} .eyes2 {
width: 90px;
height: 120px;
border: 2px solid #555;
top: 40px;
left: 202px;
position: absolute;
z-index: 99; background: #fff;
border-radius: 45%;
transform: rotate(3deg);
} .bizi {
width: 40px;
height: 40px;
/*background:#C84105;*/
position: absolute;
top: 144px;
left: 182px;
z-index: 99;
background-image: radial-gradient(15px 15px, #fff 1%, #C84105 65%);
background-position: -32px -86px; border: 2px solid #5D1400;
border-radius: 50%;
} .eyes_inner {
width: 20px;
height: 20px;
background: #555;
z-index: 99; border-radius: 50%;
position: absolute;
right: 20px;
bottom: 22px; } .eyes_inner2 {
width: 20px;
height: 20px;
background: #555;
z-index: 99; border-radius: 50%;
position: absolute;
z-index: 99;
left: 20px;
bottom: 22px;
} .zuibazhezhao {
width: 260px;
height: 100px;
background: #fff;
z-index: 2;
margin-top: 80px;
position: absolute;
left: 40px;
top: -90; } .bizixia {
border-right: 2px solid #555;
position: absolute;
z-index: 99; left: 175px;
top: 70px;
height: 160px; } .zuiba {
position: absolute;
bottom: 70px;
left: 50px;
border-radius: 50%;
width: 250px;
height: 220px;
border-bottom: 2px solid #555;
} .xiangquan {
position: absolute;
height: 20px;
width: 300px;
border-radius: 10px;
bottom: 16px;
left: 24px;
border: 1px solid #310100;
background: #CC400E;
box-shadow: 0 -8px 8px #8A2810 inset;
z-index: 99;
} .lingdang {
width: 50px;
height: 50px;
border: 2px solid #9DA12B;
background: #FDFF76;
position: absolute;
border-radius: 50%;
overflow: hidden;
z-index: 99;
box-shadow: 0 0 2px #CBCBCB; left: 123px;
top: 6px;
} .lingdang .shadow {
height: 14px;
width: 50px;
position: absolute;
z-index: 99;
border-radius: 80%;
left: 0;
top: 0;
box-shadow: 0 0 8px #98A022;
} .kongxin {
height: 12px;
width: 12px;
position: absolute;
border-radius: 50%;
z-index: 99;
box-shadow: -2 -2 2px #000;
left: 18px;
top: 24px;
background: #444;
} .lingxia {
border-left: 2px solid #444;
height: 15px;
z-index: 99;
box-shadow: -2 -2 2px #000;
position: absolute;
bottom: 0;
left: 23px;
} .shenti {
width: 300px;
height: 230px;
background: linear-gradient(to left bottom, #C9F5FC 0%, #09BEED, #222 130%);
position: relative;
overflow: hidden;
border: 2px solid #555;
border-radius: 26px 30px 11px 11px;
border-bottom: 0; left: 52px;
top: 355px;
} .shenti2 {
width: 300px;
height: 230px;
background: linear-gradient(to left bottom, #09BEED 20%, #222 200%);
position: absolute;
border-radius: 26px 30px 0 0;
z-index: 2;
box-shadow: 5px -5px 5px left:0px;
top: 0px;
} .duzi {
width: 220px;
height: 220px;
background: #fff;
border: 2px solid #555;
position: absolute;
z-index: 2;
box-shadow: 0 0 10px #ccc inset; top: -30px;
left: 40px;
border-radius: 50%;
} .koudai {
width: 170px;
height: 170px;
border-radius: 50%;
position: absolute;
border: 2px solid #666;
top: 85px;
} .mengban {
width: 174px;
height: 172px;
position: absolute;
border-bottom: 2px solid #666;
left: 25px;
top: -65px;
} .zhezhao {
width: 174px;
height: 70px;
position: absolute;
background: #fff;
top: 15px;
left: -2px;
border-radius: 20px 20px 0 0;
} .gebo {
width: 160px;
height: 80px;
position: absolute;
left: -44px;
top: 376px;
border-bottom: 2px solid #277E89;
border-top: 2px solid #277E89;
transform: rotate(-20deg); background: #0F96B8;
} .gebo2 {
width: 160px;
height: 80px;
position: absolute;
left: 292px;
top: 376px;
border-bottom: 2px solid #277E89;
border-top: 2px solid #277E89;
transform: rotate(20deg); background: #09BEED;
} .shou {
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid #555;
background: #fff;
margin-top: -12px;
margin-left: -50px;
} .shou2 {
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid #555;
background: #fff;
margin-top: -12px;
margin-left: 100px;
} .tuifenkai {
width: 26px;
height: 40px;
position: absolute;
z-index: 33;
background: #fff;
top: 212px;
left: 138px;
border-top: 2px solid #555;
border-left: 2px solid #555;
border-right: 2px solid #555;
border-radius: 50%;
} .jiao {
width: 170px;
height: 40px;
border-radius: 26px 18px 18px 15px;
border: 2px solid #555;
background: #fff;
position: relative;
left: 529px;
top: 180px;
z-index: 99;
} .jiao2 {
width: 170px;
height: 40px;
border-radius: 18px 26px 15px 18px;
border: 2px solid #555;
background: #fff;
position: absolute;
left: 180px;
top: -2px;
z-index: 99;
} .huzizhezhao {
width: 120px;
height: 120px;
background: #fff;
position: absolute;
left: 120px;
top: 70px;
z-index: 98; } .huzi1 {
width: 274px;
height: 1px;
border-bottom: 2px solid #777;
z-index: 20;
top: 130px;
left: 40px;
position: absolute;
} .huzi2 {
width: 274px;
height: 1px;
border-bottom: 2px solid #777;
z-index: 20;
transform: rotate(15deg);
top: 130px;
left: 40px;
position: absolute;
} .huzi3 {
width: 274px;
height: 1px;
border-bottom: 2px solid #777;
z-index: 20;
transform: rotate(-15deg);
top: 130px;
left: 40px;
position: absolute;
}
</style>
</head> <body>
<div class="heard">
<div class="face">
<div class="huzizhezhao"></div>
<div class="huzi1"></div>
<div class="huzi2"></div>
<div class="huzi3"></div>
<div class="zuibazhezhao"></div>
<div class="bizixia"></div>
<div class="zuiba"></div>
<div class="xiangquan">
<div class="lingdang">
<div class="shadow"></div>
<div class="kongxin"></div>
<div class="lingxia"></div>
</div>
</div>
</div>
<div class="eyes">
<div class="eyes_inner"></div>
</div>
<div class="eyes2">
<div class="eyes_inner2"></div>
</div>
<div class="bizi"></div> <div class="shenti">
<div class="shenti2"></div>
<div class="duzi">
<div class="mengban">
<div class="koudai">
<div class="zhezhao"></div>
</div>
</div> </div> <div class="tuifenkai"> </div>
</div>
<div class="gebo">
<div class="shou"></div>
</div>
<div class="gebo2">
<div class="shou2"></div>
</div> </div>
<div class="jiao">
<div class="jiao2"></div>
</div> </body> </html>