lancer07
  • 378

【二次元的CSS】—— 用 DIV + CSS3 画Hello Kitty（详解步骤）

html html5 css css3 前端
 阅读约 28 分钟

原本自己也想画Hello Kitty，正巧看到一位外国友人Lauren McConachie（她的个人网站： http://lorenai.com。）也用相同的方法画了。 且细节相当到位。在此我也分享一下。（出于尊重原作者的目的，CSS我就不修改了）

图片描述

GitHub传送门：https://github.com/lancer07/css3HelloKitty

第一步：从头说起

难点是胡须，因为胡须有点弯的，所以每根胡须需要2个元素来实现

图片描述

<div id="head">
   <div id="face">
      <div class="lefteye"></div>
      <div class="righteye"></div>
      <div class="nose"></div>
   </div>
                
   <div class="leftwhiskers one">
       <span></span>
   </div>
   <div class="leftwhiskers two">
       <span></span>
   </div>
   <div class="leftwhiskers three">
        <span></span>
   </div>
    <div class="rightwhiskers four">
         <span></span>
    </div>
    <div class="rightwhiskers five">
         <span></span>
    </div>
    <div class="rightwhiskers six">
          <span></span>
    </div>
</div>
#head {
    position:absolute;
    top:124px;
    left:130px;
    width:224px;
    height:167px;
    background-color:#FFF;
    border:8px solid #000;
    -moz-border-radius:160px;
    -webkit-border-radius:160px;
    border-radius:160px;
    z-index:500;
    -moz-transform:rotate(2deg);
    -ms-transform:rotate(2deg);
    -o-transform:rotate(2deg);
    -webkit-transform:rotate(2deg);
    transform:rotate(2deg);
    -webkit-backface-visibility:hidden;
    
}
.lefteye {
    position:absolute;
    top:97px;
    left:45px;
    width:19px;
    height:24px;
    background-color:#000;
    -moz-border-radius:18px;
    -webkit-border-radius:18px;
    border-radius:18px;
}
.righteye {
    position:absolute;
    top:93px;
    left:162px;
    width:19px;
    height:24px;
    background-color:#000;
    -moz-border-radius:18px;
    -webkit-border-radius:18px;
    border-radius:18px;
}
.nose {
    position:absolute;
    top:115px;
    left:100px;
    width:16px;
    height:9px;
    background-color:#FFB827;
    border:6px solid #000;    
    -moz-border-radius:25px;
    -webkit-border-radius:25px;
    border-radius:25px;
}
.leftwhiskers, .rightwhiskers {
    background-color:#000;
}
.one {
    position:absolute;
    top:96px;
    left:-1px;
    width:20px;
    height:9px;
    -moz-border-radius:0 20px 15px 0;
    -webkit-border-radius:0 20px 15px 0;
    border-radius:0 20px 15px 0;
    -moz-transform:rotate(6deg);
    -ms-transform:rotate(6deg);
    -o-transform:rotate(6deg);
    -webkit-transform:rotate(6deg);
}
.one span {
    display:block;
    position:absolute;
    left:-32px;
    top:4px;
    width:33px;
    height:9px;
    background-color:inherit;
    -moz-border-radius: 35px 10px 10px;
    -webkit-border-radius: 35px 10px 10px;
    border-radius: 35px 10px 10px;
    -moz-transform:rotate(-15deg);
    -ms-transform:rotate(-15deg);
    -o-transform:rotate(-15deg);
    -webkit-transform:rotate(-15deg);
}
.two {
    position:absolute;
    top:120px;
    left:6px;
    width:15px;
    height:8px;
    -moz-border-radius:10px 20px 13px 10px;
    -webkit-border-radius:10px 20px 13px 10px;
    border-radius:10px 20px 13px 10px;
    -moz-transform:rotate(-15deg);
    -ms-transform:rotate(-15deg);
    -o-transform:rotate(-15deg);
    -webkit-transform:rotate(-15deg);
}
.two span {
    display:block;
    position:absolute;
    top:0px;
    left:-24px;
    height:8px;
    width:25px;
    background-color:inherit;
    -moz-border-radius:10px 0 0 15px;
    -webkit-border-radius:10px 0 0 15px;
    border-radius:10px 0 0 15px;
    -moz-transform:rotate(-2deg);
    -ms-transform:rotate(-2deg);
    -o-transform:rotate(-2deg);
    -webkit-transform:rotate(-2deg);
}
.three {
    position:absolute;
    top:138px;
    left:20px;
    width:15px;
    height:8px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    -moz-transform:rotate(-16deg);
    -ms-transform:rotate(-16deg);
    -o-transform:rotate(-16deg);
    -webkit-transform:rotate(-16deg);
}
.three span {
    display:block;
    position:absolute;
    top:5px;
    left:-34px;
    width:37px;
    height:8px;
    background-color:inherit;
    -moz-border-radius:18px 10px 12px;
    -webkit-border-radius:18px 10px 12px;
    border-radius:18px 10px 12px;
    -moz-transform:rotate(-19deg);
    -ms-transform:rotate(-19deg);
    -o-transform:rotate(-19deg);
    -webkit-transform:rotate(-19deg);
}
.four {
    position: absolute;
    top: 82px;
    left: 205px;
    width: 25px;
    height: 8px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    -moz-transform: rotate(-13deg);
    -ms-transform: rotate(-13deg);
    -o-transform:rotate(-13deg);
    -webkit-transform: rotate(-13deg);    
}
.four span {
    display: block;
    position: absolute;
    top: 3px;
    left: 20px;
    width: 33px;
    height: 8px;
    background-color: inherit;
    -moz-border-radius: 10px 18px 10px 15px;
    -webkit-border-radius: 10px 18px 10px 15px;
    border-radius: 10px 18px 10px 15px;
    -moz-transform: rotate(13deg);
    -ms-transform: rotate(13deg);
    -o-transform:rotate(13deg);
    -webkit-transform: rotate(13deg);
}
.five {
    position: absolute;
    top: 105px;
    left: 211px;    
    width: 22px;
    height: 8px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}
.five span {
    display: block;
    position: absolute;
    top: 2px;
    left: 16px;    
    width: 25px;    
    height: 8px;    
    background-color: inherit;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-transform: rotate(11deg);
    -ms-transform: rotate(11deg);
    -o-transform:rotate(11deg);
    -webkit-transform: rotate(11deg);
}
.six {
    position: absolute;
    top: 129px;    
    left: 200px;
    width: 22px;
    height: 8px;
    -moz-border-radius: 20px 10px 10px 18px;
    -webkit-border-radius: 20px 10px 10px 18px;
    border-radius: 20px 10px 10px 18px;
    -moz-transform: rotate(11deg);
    -ms-transform: rotate(11deg);
    -o-transform:rotate(11deg);
    -webkit-transform: rotate(11deg);
}
.six span {
    display: block;
    position: absolute;
    top: 3px;
    left: 18px;
    width: 26px;    
    height: 8px;
    background-color: inherit;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    -moz-transform: rotate(13deg);
    -ms-transform: rotate(13deg);
    -o-transform:rotate(13deg);
    -webkit-transform: rotate(13deg);
}

第二步：耳朵

右耳画的比较粗糙，原因是因为马上要画个蝴蝶结啊。
图片描述

<div id="leftear">
     <span></span>
</div>
<div id="rightear"></div>
#leftear {
    position:absolute;
    top:-16px;
    left:-3px;
    width:57px;
    height:61px;
    border:8px solid #000;
    border-bottom-color:transparent;
    border-right-color:transparent;
    -moz-border-radius:20px 37px 20px 44px;
    -webkit-border-radius:20px 37px 20px 44px;
    border-radius:20px 37px 20px 44px;
    -moz-transform:rotate(14deg);
    -ms-transform:rotate(14deg);
    -o-transform:rotate(14deg);
    -webkit-transform:rotate(14deg);
    transform:rotate(14deg);
    -webkit-backface-visibility:hidden;
}
#leftear span {
    position:absolute;
    top:2px;
    left:-1px;
    width:68px;
    height:61px;
    background-color:#FFF;
    -moz-border-radius:18px 34px 20px 44px;
    -webkit-border-radius:18px 34px 20px 44px;
    border-radius:18px 34px 20px 44px;
}
#rightear {
    position:absolute;
    top:-27px;
    left:143px;
    width:57px;
    height:61px;
    background-color:#FFF;
    border:8px solid #000;
    border-bottom-color:transparent;
    border-right-color:transparent;
    -moz-border-radius:20px 37px 20px 44px;
    -webkit-border-radius:20px 37px 20px 44px;
    border-radius:20px 37px 20px 44px;
    -moz-transform:rotate(80deg);
    -ms-transform:rotate(80deg);
    -o-transform:rotate(80deg);
    -webkit-transform:rotate(80deg);
    -webkit-backface-visibility:hidden;
}

第三步：蝴蝶结

图片描述

<div id="bow">
    <div class="left"><span></span></div>
    <div class="center"></div>
    <div class="right"><span></span></div>
</div>
#bow {
    position:absolute;
    top:134px;
    left:141px;
    z-index:1000;
}
.center {
    position:absolute;
    left:140px;
    width:32px;
    height:35px;
    background-color:#F51F27;
    border:8px solid #000;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    z-index:2;
    -moz-transform:rotate(20deg);
    -ms-transform:rotate(20deg);
    -o-transform:rotate(20deg);
    -webkit-transform:rotate(20deg);
}
.left {
    position:absolute;
    top:-33px;
    left:99px;
    width:46px;
    height:62px;
    background-color:#F51F27;
    border:8px solid #000;
    -moz-border-radius: 50px 50px 55px 46px;
    -webkit-border-radius: 50px 50px 55px 46px;
    border-radius: 50px 50px 55px 46px;
    -moz-transform:rotate(19deg);
    -ms-transform:rotate(19deg);
    -o-transform:rotate(19deg);
    -webkit-transform:rotate(19deg);
}
.left span {
    position:absolute;
    top:20px;
    left:23px;
    width:15px;
    height:15px;
    border:6px solid #000;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
}
.right {
    position:absolute;
    top:0;
    left:164px;
    width:43px;
    height:54px;
    background-color:#F51F27;
    border:8px solid #000;
    -moz-border-radius:78px 48px 60px 63px;
    -webkit-border-radius:78px 48px 60px 63px;
    border-radius:78px 48px 60px 63px;
    -moz-transform:rotate(22deg);
    -ms-transform:rotate(22deg);
    -o-transform:rotate(22deg);
    -webkit-transform:rotate(22deg);
}
.right span {
    position:absolute;
    top:18px;
    left:1px;
    width:15px;
    height:12px;
    border:6px solid #000;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
}

第四步：身体

经过前几次的学习之后，画身体应该没什么难度了吧，都是用各种形状的圆组成的。
图片描述

<div id="body">
     <div id="leftarm"><span></span></div>
     <div id="rightarm"><span></span></div>
     <div id="torso">
          <span class="leftshort"></span>
          <span class="rightshort"></span>
          <div class="crotch"></div>
     </div>
     <div id="chest"></div>
     <div id="leftleg"></div>
     <div id="rightleg"></div>
</div>
#body {
    position:absolute;
    top:295px;
    width:250px;
    height:150px;    
}
#leftarm {
    position:absolute;
    top:-8px;
    left:142px;
    width:40px;
    height:73px;    
    background-color:#FFF;
    border:8px solid #000;
    -moz-border-radius:158px 0 82px 100px;
    -webkit-border-radius:158px 0 82px 100px;
    border-radius:158px 0 82px 100px;
    overflow:hidden;
    -moz-transform:rotate(28deg);
    -ms-transform:rotate(28deg);
    -o-transform:rotate(28deg);
    -webkit-transform:rotate(28deg);
    -webkit-backface-visibility:hidden;
}
#leftarm span {
    position:absolute;
    top:-3px;
    left:1px;
    width:50px;
    height:38px;
    background-color:pink;
    border-bottom:8px solid #000; 
    -webkit-border-top-left-radius: 200px;
    -moz-border-radius-topleft: 200px;
    border-top-left-radius:200px;
    -moz-transform:rotate(6deg);
    -ms-transform:rotate(6deg);
    -o-transform:rotate(6deg);
    -webkit-transform:rotate(6deg);
}
#rightarm {
    position:absolute;
    top: -4px;
    left: 302px;
    height: 70px;
    width: 40px;
    background-color:#FFF;
    border: 8px solid #000;
    -moz-border-radius: 0 158px 100px 81px;
    -webkit-border-radius: 0 158px 100px 81px;
    border-radius: 0 158px 100px 81px;
    overflow: hidden; 
    -moz-transform: rotate(-28deg);
    -ms-transform: rotate(-28deg);
    -o-transform:rotate(-28deg);
    -webkit-transform: rotate(-28deg);
    -webkit-backface-visibility:hidden;
}
#rightarm span {
    position:absolute;
    top:-2px;
    left:-4px;
    width:41px;
    height:36px;
    background-color:pink;
    border-bottom:8px solid #000;
    -webkit-border-top-right-radius: 200px;
    -moz-border-radius-topright: 200px;
    border-top-right-radius:200px;
    -moz-transform:rotate(-9deg);
    -ms-transform:rotate(-9deg);
    -o-transform:rotate(-9deg);
    -webkit-transform:rotate(-9deg);
}
#chest {
    position: absolute;
    top: -32px;    
    left: 213px;
    width: 58px;
    height: 54px;
    background-color:pink;
    border: 8px solid #000;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}
#torso {
    position:absolute;
    top:-10px;
    left:165px;
    width:154px;
    height:105px;
    background-color:#F51F27;
    border: 8px solid #000;
    -moz-border-radius: 110px 110px 0 0;
    -webkit-border-radius: 110px 110px 0 0;
    border-radius: 110px 110px 0 0;
    border-bottom:none;
}
#torso .leftshort {
    display:block;
    position:absolute;
    top:92px;
    left:-8px;
    width:73px;
    height:14px;
    background-color:#F51F27;
    border-bottom:8px solid #000;
    border-left:8px solid #000;
    -moz-border-radius:1px 3px 0 30px;
    -webkit-border-radius:1px 3px 0 30px;
    border-radius:1px 3px 0 30px;
    z-index:3;
    -moz-transform:rotate(2deg);
    -ms-transform:rotate(2deg);
    -o-transform:rotate(2deg);
    -webkit-transform:rotate(2deg);
}
#torso .rightshort {
    display:block;
    position:absolute;
    top:97px;
    right:-8px;
    width:73px;
    height:8px;
    background-color:#F51F27;
    border-bottom:8px solid #000;
    border-right:8px solid #000;
    -moz-border-radius:3px 1px 30px 0;
    -webkit-border-radius:3px 1px 30px 0;
    border-radius:3px 1px 30px 0;
    z-index:3;
    -moz-transform:rotate(-2deg);
    -ms-transform:rotate(-2deg);
    -o-transform:rotate(-2deg);
    -webkit-transform:rotate(-2deg);
}
.crotch {
    position:absolute;
    bottom:-6px;
    left:71px;
    width:12px;
    height:12px;
    background-color:#000;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}
#leftleg {
    position:absolute;
    top:100px;
    left:165px;
    width:73px;
    height:34px;
    background-color:#FFF;
    border:8px solid #000;
    -moz-border-radius:0 15px 25px 35px;
    -webkit-border-radius:0 15px 25px 35px;
    border-radius:0 15px 25px 35px;
}
#rightleg {
    position:absolute;
    top:100px;
    left:246px;
    width:73px;
    height:34px;
    background-color:#fff;
    border: 8px solid #000;
    -moz-border-radius:15px 0 35px 25px;
    -webkit-border-radius:15px 0 35px 25px;
    border-radius:15px 0 35px 25px;
}

收工

图片描述

欢迎大家吐槽

阅读 6.3k更新于 2016-05-13
本作品系 翻译 (阅读原文) ， 采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议
lancer07
  • 378
推荐阅读
二次元的CSS
用户专栏

用div+css3画一些动漫人物

56 人关注
7 篇文章
专栏主页
目录