纯css画哆啦A梦

今天有点无聊，照着网上的图写了个哆啦A梦，无技术可言，纯考耐心。
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <title>哆啦A梦</title>
  <style>
     *{padding:0;margin:0;}
     img,a{border:none;}
     .canvas{position: relative;width: 400px;height: 400px;margin: 30px auto;}
     header{position: absolute;z-index: -1;top:40px;left:100px;width: 200px;height: 200px;border-radius: 200px;-moz-border-radius:200px;border:1px solid #333;background-color:rgb(15,185,230);}
     .eyes{position: absolute;z-index: 1;top:35px;left:48px;width: 48px;height: 50px;border-radius: 20px;-moz-border-radius:20px;background-color: #fff;border:1px solid #333;}
     .eye{left:98px;}
     .eye .eyes-in{left: 10px;}
     .eyes-in{position: absolute;z-index: 2;top:32px;left:31px;width: 10px;height: 10px;border-radius: 10px;-moz-border-radius:10px;background-color: black;}
     .face{position: absolute;z-index: 0;top:59px;left: 13px;width: 170px;height: 125px;border-radius: 130px;-moz-border-radius:130px;background-color: #fff;border:1px solid #333;}
     .nose-in {
        height: 13px;width: 13px;border-radius:13px;float:right;margin-right:1px;margin-top:1px;
        background: -webkit-radial-gradient(#fff, gray); /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(red, green); /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(red, green); /* Firefox 3.6 - 15 */
        background: radial-gradient(#fff, rgb(179,43,5) 70%); /* 标准的语法（必须放在最后） */
      }
      .nose{position: absolute;z-index: 2;top:19px;left:73px;width:20px;height:20px;border-radius:20px;background-color:rgb(179,43,5);border:1px solid #333;}
      .line{position: absolute;z-index: 2;top:39px;left:82px;width: 1px;height: 65px;border-right: 2px solid #333;}
      .beard{position: absolute;z-index: 1;width: 45px;height: 1px;border-bottom: 1px solid #333;}
      .beard1{
        transform:rotate(15deg);
        -ms-transform:rotate(15deg); /* IE 9 */
        -webkit-transform:rotate(15deg); /* Safari and Chrome */
      }
      .beard2{transform:rotate(165deg);-ms-transform:rotate(165deg);-webkit-transform:rotate(165deg);}
      .pos1{top: 45px;left:19px;}
      .pos2{top: 60px;left:19px;}
      .pos3{top: 78px;left:19px;}
      .pos4{top: 45px;left:100px;}
      .pos5{top: 60px;left:100px;}
      .pos6{top: 78px;left:100px;}
      .mouse {width: 100px;height: 40px;position: absolute;bottom: 19px;left: 35px;border-bottom: 2px solid #222;border-radius: 50%;}
      .nav{position: absolute;top:-3px;left:-5px;z-index: 4;width: 123px;height: 15px;background-color: rgb(179,43,5);border:1px solid #333;border-top-left-radius: 7px;border-top-right-radius:7px;border-bottom-left-radius:7px;border-bottom-right-radius:7px;}
      .back{position: absolute;top: 13px;left: -1px;z-index: 0;width:120px;height:15px;background-color: rgb(15,185,230);}
      .body{position: absolute;top:228px;left: 144px;z-index: 4;}
      .circle{position: absolute;top:-3px;left: 6px;z-index: 3;width: 100px;height: 100px;border-radius: 100px;-moz-border-radius:100px;border:1px solid #333;background-color: #fff;}
      .half-circle{position: absolute;top:10px;left: 10px;z-index: 3;width: 80px;height: 80px;border-radius: 80px;border-bottom: 1.5px solid #333;border-radius: 80px;}
      .lid{position: absolute;top:50px;left: 10px;z-index: 3;width: 80px;height: 1px;border-bottom:1px solid #333;}
      .m-line{position: absolute;top:21px;left:13px;width: 1px;height: 10px;border-right: 2px solid #333;}
      .h-line{width: 100%;height: 1px;border-top: 2px solid #333;}
      .h1-line{position: absolute;top:6px;}
      .h2-line{position: absolute;top:10px;}
      .h-eye{top: 14px;left: 11px;width:8px;height:8px;z-index: 4;}
      .mark{position: absolute;top:0px;left: 40px;z-index: 5;width: 30px;height: 30px;background-color: rgb(238,238,78);border-radius: 30px;border:1px solid #333;overflow: hidden;}
      .leg{position: absolute;top:58px;left: -15px;z-index: 2;width: 140px;height: 80px;border-right: 1px solid #333;border-left: 1px solid #333;background-color: rgb(15,185,230);}
      .l-hand{position: absolute;top:13px;left: 117px;z-index: 1;width: 37px;height: 96px;border-left: 1px solid #333;border-right: 1px solid #333;background-color: rgb(15,185,230);transform:rotate(135deg);-ms-transform:rotate(135deg); /* IE 9 */-webkit-transform:rotate(135deg); /* Safari and Chrome */}
      .r-hand{position: absolute;top:13px;left: -40px;z-index: 1;width: 37px;height: 96px;border-left: 1px solid #333;border-right: 1px solid #333;background-color: rgb(15,185,230);transform:rotate(45deg);-ms-transform:rotate(45deg); /* IE 9 */-webkit-transform:rotate(45deg); /* Safari and Chrome */}
      .l-arm{position: absolute;top:59px;left:-71px;z-index: 2;}
      .r-arm{position: absolute;top:59px;left: 135px;z-index: 2;}
      .bot{position: absolute;top:126px;left: 47px;z-index: 3;width: 20px;height: 20px;border-radius: 20px;border-top: 1px solid #333;background-color: #fff;}
      .l-leg{position: absolute;top:136px;left: -27px;z-index: 3;width: 80px;height: 25px;border:1px solid #333;border-top-left-radius: 25px;border-bottom-left-radius: 20px;border-top-right-radius: 25px;border-bottom-right-radius: 25px;background-color: #fff;}
      .r-leg{position: absolute;top:136px;left: 58px;z-index: 3;width: 77px;height: 25px;border:1px solid #333;border-top-right-radius: 25px;border-bottom-right-radius: 20px;border-top-left-radius: 25px;border-bottom-left-radius: 25px;background-color: #fff;}
  </style>
 </head>
 <body>
    <div class="canvas">
      <h2></h2>
      <header>
        <div class="eyes">
          <div class="eyes-in"></div>
        </div>
        <div class="eyes eye">
          <div class="eyes-in"></div>
        </div>
        <div class="face">
          <div class="nose">
            <div class="nose-in"></div>
          </div>
          <div class="line"></div>
          <div class="beard beard1 pos1"></div>
          <div class="beard pos2"></div>
          <div class="beard beard2 pos3"></div>
          <div class="beard beard2 pos4"></div>
          <div class="beard pos5"></div>
          <div class="beard beard1 pos6"></div>
          <div class="mouse"></div>
        </div>
      </header>
      <div class="body">
            <div class="nav"></div>
            <div class="back"></div>
            <div class="mark">
              <div class="h-line h1-line"></div>
              <div class="h-line h2-line"></div>
              <div class="eyes-in h-eye"></div>
              <div class="m-line"></div>
            </div>
            <div class="circle">
              <div class="lid"></div>
              <div class="half-circle"></div>
            </div>
            <div class="leg"></div>
            <div class="l-hand"></div>
            <div class="r-hand"></div>
            <div class="eyes l-arm"></div>
            <div class="eyes r-arm"></div>
            <div class="bot"></div>
            <div class="l-leg"></div>
            <div class="r-leg"></div>
          </div>
    </div>
 </body>
</html>
posted on 2015-04-28 17:48 xianxm 阅读(370) 评论(1) 收藏举报