超能陆战队–大白
<!doctype html>
<html>
<head>
<meta charset="gbk">
<title>超能陆战队--大白
</title>
<style>
body{background: #000c26;}
.baymax{margin: 0 auto;height: 600px;overflow: hidden;}
.header{height: 64px;width: 100px;border-radius: 50%;background: #fff;margin: 0 auto -20px;position: relative;z-index: 100;border-bottom: 5px solid #e0e0e0;}
.left-eye,.right-eye{width: 11px;height: 13px;background: #282828;position: relative;left: 27px;top: 30px;border-radius: 50%;transform: rotate(8deg);}
.right-eye{left: 69px;top: 17px;transform: rotate(-8deg);}
.mouth{width: 38px;height: 1.5px;position: relative;left: 34px;top: 10px;background: #282828;}
.torso,.belly{margin: 0 auto;height: 200px;width: 180px;background: #fff;border-radius: 50%;border: 5px solid #e0e0e0;border-top:none;z-index: 1;}
.belly{width: 260px;height: 288px;margin-top: -140px;z-index: 5;}
.cover{width: 190px;height: 150px;background: #fff;margin: 0 auto;position: relative;top: -20px;border-radius: 50%;}
.heart{width: 25px;height: 25px;position: relative;border-radius: 50%;box-shadow: 2px 5px 2px #ccc inset;right: -115px;top: 40px;border: 1px solid #ccc;z-index: 111;}
.left-arm,.right-arm{width: 120px;height: 250px;background: #fff;position: relative;margin: 0 auto;left: -100px;top: -350px;z-index: -1;transform: rotate(20deg);border-radius: 50%;}
.right-arm{transform: rotate(-20deg);position: relative;left:100px;top: -602px;}
.left-leg,
.right-leg {
height: 170px;
width: 90px;
border-radius: 40% 30% 10px 45%;
background: #fff;
position: relative;
top: -640px;
left: -45px;
transform: rotate(-1deg);
z-index: -2;
margin: 0 auto;
}
.right-leg {
background: #fff;
border-radius:30% 40% 45% 10px;
margin: 0 auto;
top: -810px;
left: 50px;
transform: rotate(1deg);
}
</style>
</head>
<body>
<div class="baymax">
<div class="header">
<div class="left-eye"></div>
<div class="right-eye"></div>
<div class="mouth"></div>
</div>
<div class="torso">
<div class="heart"></div>
</div>
<div class="belly">
<div class="cover"></div>
</div>
<div class="left-arm">
<div class="l-small"></div>
<div class="l-big"></div>
</div>
<div class="right-arm">
<div class="r-small"></div>
<div class="r-big"></div>
</div>
<div class="left-leg"></div>
<div class="right-leg"></div>
</div>
</body>
</html>
转载请注明原文地址: https://www.6miu.com/read-79908.html
