用div+css3画小丸子和爷爷

用div+css3画小丸子和爷爷

小丸子身体各部位代码详解

小丸子的头部

头部的html结构

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

头部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;             }         }     }

小丸子的身体

身体的html结构

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

身体的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);             }         }     }

小丸子的腿

小丸子的腿部html结构

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

小丸子的腿部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;         }     }

关于爷爷的部分我就不一一描述了，大家可以看一下源码，并提出自己的意见。