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

超能陆战队–大白


<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>

css打造超能陆战队--大白_第1张图片

你可能感兴趣的:(css,css打造超能陆战队)