用div+css3画小丸子和爷爷

bfxe2603 8年前
   <p> </p>    <h3>用div+css3画小丸子和爷爷</h3>    <p>仅仅使用div作为身体的布局,用css3的各种transform来绘制各部位的形状,当然也不会使用任何图片哦。</p>    <p>-> <a href="/misc/goto?guid=4959672746646106107" rel="nofollow,noindex">github链接地址</a></p>    <p><img src="https://simg.open-open.com/show/3f493850bac4d8d5c2f1cc40c780f094.png"></p>    <p>小丸子身体各部位代码详解</p>    <p>小丸子的头部</p>    <p><img src="https://simg.open-open.com/show/56adcdf3c8935fcdc4c76f9b487135aa.png"></p>    <p>头部的html结构</p>    <pre>  <code class="language-css"><div class="hairs">      <div class="hair hair1"></div>      <div class="hair hair2"></div>      <div class="hair hair3"></div>      <div class="hair hair4"></div>      <div class="hair hair5"></div>      <div class="hair hair6"></div>      <div class="hair hair7"></div>  </div>  <div class="face">      <div class="brow left-brow"></div>      <div class="brow right-brow"></div>      <div class="eye left-eye"></div>      <div class="eye right-eye"></div>      <div class="blusher left-blusher"></div>      <div class="blusher right-blusher"></div>      <div class="mouth"></div>      <div class="ear left-ear"></div>      <div class="ear right-ear"></div>  </div></code></pre>    <p>头部css样式</p>    <pre>  <code class="language-css">.hairs{          background: #152131;          width: 190px;          height: 250px;          border-radius: 50% 50% 0 0;          left: -30px;          top: -50px;          position: absolute;          overflow: hidden;          &:after{              content: '';              position: absolute;              width: 300px;              height: 200px;              background: #ffef5e;              top: 120px;          }          .hair{              width: 35px;              height: 45px;              background: #152131;              position: absolute;              z-index: 1;              transform: rotate(70deg) scale(1) skew(44deg) translate(8px);              &.hair1{                  top: 17px;                  left: 27px;              }              &.hair2{                  top: 8px;                  left: 52px;              }              &.hair3{                  top: 4px;                  left: 73px;              }              &.hair4{                  top: 0;                  left: 90px;              }              &.hair5{                  top: 4px;                  left:108px;              }              &.hair6{                  top: 8px;                  left: 125px;              }              &.hair7{                  top: 17px;                  right: 17px;              }          }      }      .face{          background: #fbdac7;          width: 130px;          height: 100px;          position: absolute;          top: 0;          border-radius: 20px 20px 50px 50px;          &:after{  //脖子              content: "";              width: 14px;              height: 10px;              background: #fbdac7;              position: absolute;              bottom:-12px;              left: 50%;              margin-left: -7px;              .border;          }          .border;          .brow{              width: 42px;              height: 10px;              background: #152131;              position: absolute;              top: 26px;              border-radius: 50%;              &:after{                  content: "";                  background: #fbdac7;                  position: absolute;                  width: 50px;                  height: 10px;                  top: 1px;                  border-radius: 50%;              }              &.left-brow{                  left : 18px;                  transform:rotate(-10deg);              }              &.right-brow{                  right: 14px;                  transform:rotate(10deg);              }          }          .eye{              width: 14px;              height: 14px;              border-radius: 50%;              background: #000;              position: absolute;              top: 40px;              z-index: 2;              &.left-eye{                  left: 32%;              }              &.right-eye{                  right: 32%;                  //animation: eye 1s infinite ease;              }          }          .blusher{              width: 12px;              height: 12px;              border-radius: 50%;              background: #f79c99;              position: absolute;              top: 70px;              &.left-blusher{                  left: 8px;              }              &.right-blusher{                  right: 8px;              }          }          .mouth{              .border;              z-index: 1;              width: 30px;              height: 30px;              background: #d96b6e;              position: absolute;              top: 50px;              left: 50px;              border-radius: 50%;              &:after{                  content: "";                  width: 60px;                  height: 30px;                  background: #fbdac7;                  position: absolute;                  top: -10px;                  left: -20px;                  border-radius: 30%;              }          }          .ear{              width: 10px;              height: 20px;              background: #fbdac7;              position: absolute;              top: 30px;              z-index: 2;              &.left-ear{                  left: -11px;                  border-radius: 5px 0 0 10px;              }              &.right-ear{                  right: -11px;                  border-radius: 0 5px 10px 0;              }          }      }</code></pre>    <p>小丸子的身体</p>    <p><img src="https://simg.open-open.com/show/4982a86666c3310c71c03bb99bec948b.png"></p>    <p>身体的html结构</p>    <pre>  <code class="language-css"><div class="clothes">                      <div class="collar left-collar"></div>                  <div class="collar right-collar"></div>                  <div class="straps left-straps"></div>                  <div class="straps right-straps"></div>              </div>                <div class="arm left-arm"></div>              <div class="arm right-arm"></div>                            <div class="belt"></div>              <div class="skirt">                  <div class="line line1"></div>                  <div class="line line2"></div>                  <div class="line line3"></div>                  <div class="line line4"></div>                  <div class="line line5"></div>              </div></code></pre>    <p>身体的css样式</p>    <pre>  <code class="language-css">.clothes{          background: #fff;              width: 70px;          height: 80px;          position: absolute;          top:112px;          left: 31px;          z-index: 2;          border-radius: 30% 30% 10px 10px;          overflow: hidden;          .border;          .sleeve{              background: #fff;              width: 40px;              height: 40px;              position: absolute;              top: 10px;              border-radius: 10px;          }          .collar{              z-index: 3;              position: absolute;              .border;              width: 20px;              height: 10px;              background: #fff;              &.left-collar{                  left: 12px;                  transform:rotate(50deg);              }              &.right-collar{                  right: 12px;                  transform:rotate(-50deg);              }          }          .straps{              z-index: 2;              position: absolute;              width: 6px;              height: 100px;              background: #e9003a;              .border;              &.left-straps{                  left: 12px;              }              &.right-straps{                  right: 12px;              }          }      }      .arm{          width: 70px;          height: 70px;          border-radius: 50%;          background: #fff;          .border;          z-index: 1;          position: absolute;          top: 115px;          z-index: 0;          &.left-arm{              left: 10px;              &:after{                  content: "";                  position: absolute;                  background:#ffef5e;                  width: 60px;                  height: 60px;                  left: 12px;                  top: 5px;                  border-radius: 50%;                  .border;              }          }          &.right-arm{              left: 52px;              &:after{                  content: "";                  position: absolute;                  background:#ffef5e;                  width: 60px;                  height: 60px;                  left: -4px;                  top: 5px;                  border-radius: 50%;                  .border;              }          }      }      .belt{          background: #ed023a;          border: 1px solid #152131;          height: 10px;          left: 31px;          position: absolute;          top: 182px;          width: 70px;          z-index: 3;      }      .skirt{          background: #ed023a;          position: absolute;          background:  none;          border-color: #e9003a transparent;          border-image: none;          border-style: solid;          border-width: 0px 30px 50px;          height: 0;          left: 1px;          position: absolute;          top: 194px;          width: 72px;           z-index: 3;          border-radius: 0 0 50% 50%;          .line{              width: 1px;              height: 30px;              position: absolute;              background: #000;              top:10px;              transform-origin:0 0;              &.line1{                  left: 10px;                  transform:rotate(20deg);              }              &.line2{                  left: 25px;                  transform:rotate(10deg);              }              &.line3{                  left: 35px;              }              &.line4{                  right: 25px;                  transform:rotate(-10deg);              }              &.line5{                  right: 10px;                  transform:rotate(-20deg);              }          }      }</code></pre>    <p>小丸子的腿</p>    <p>小丸子的腿部html结构</p>    <pre>  <code class="language-css"><div class="leg left-leg"></div>              <div class="leg right-leg"></div>                            <div class="stockings left-stockings"></div>              <div class="stockings right-stockings"></div>                <div class="shoes left-shoes"></div>              <div class="shoes right-shoes"></div></code></pre>    <p>小丸子的腿部css样式</p>    <p><img src="https://simg.open-open.com/show/58d2e7191992ca0c41cdc9f9113fff94.png"></p>    <pre>  <code class="language-css">.leg{          width: 12px;          height: 40px;          background: #fadbc7;          .border;          position: absolute;          top: 220px;          z-index: 2;          &.left-leg{              left: 40px;          }          &.right-leg{              left: 78px;          }          &:after{              content: '';              width: 12px;              height: 16px;              background: #fff;              .border;              border-bottom: 0;              top: 40px;              left: -1px;              position: absolute;          }      }      .stockings{          width: 28px;          height: 12px;          background: #fff;          .border;          position: absolute;          z-index: 1;          transform-origin:0 0;          &.left-stockings{              left: 21px;              top: 275px;              transform:rotate(-20deg);              border-radius: 50% 0 0 50%;          }          &.right-stockings{              left: 83px;              top: 265px;              transform:rotate(20deg);              border-radius: 0 50% 50% 0;          }      }      .shoes{          width: 40px;          height: 17px;          position: absolute;          z-index: 0;          background: #a23030;          transform-origin:0 0;          border-radius: 50%;          &.left-shoes{              left: 13px;              top: 280px;              transform:rotate(-20deg);              border-radius: 50% 0 0 50%;          }          &.right-shoes{              left: 81px;              top: 267px;              transform:rotate(20deg);              border-radius: 0 50% 50% 0;          }      }</code></pre>    <p>关于爷爷的部分我就不一一描述了,大家可以看一下源码,并提出自己的意见。</p>    <p>来自: <a href="/misc/goto?guid=4959672746733299569" rel="nofollow">https://segmentfault.com/a/1190000005082804</a></p>