【二次元的CSS】-- 用 DIV + CSS3 画Hello Kitty(详解步骤)_html/css_WEB-ITnose

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

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

第一步:从头说起

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

#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);}

第二步:耳朵

郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(delete@yzlfxy.com)修改或删除,多谢。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

留言与评论(共有 0 条评论)
昵称:
匿名发表
   
验证码: