css打造超能陆战队--大白

来源：互联网发布：mysql端口的作用编辑：程序博客网时间：2024/06/10 05:35
超能陆战队–大白

<!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>       <!--定义左臂一大一小2个手指-->      <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>
这里写图片描述
阅读全文
1 0