使用CSS3代码绘制可爱的Hello Kitty猫

    border-top: 33px solid black;   

    border-bottom: 28px solid black;   

    border-left: 30px solid black;   

    border-right: 29px solid black;   

    border-top-left-radius: 220px 170px;   

    border-top-rightright-radius: 90px 57px;   

    border-bottom-rightright-radius: 334px 245px;   

    background-color: white;   

    transform: rotate(-21deg);   

    z-index: 99;   

}   

.hello-kitty-div .rightright-ear-clean {   

    left: 700px;   

    top: 105px;   

    width: 120px;   

    height: 120px;   

    background-color: white;   

    z-index: 101;   

}   

右耳画的比较粗糙，因为马上就要画蝴蝶结了。

蝴蝶结

蝴蝶结分为两个外边，三个圆。外边是整个绘画过程中最难画的地方，用矩形调整 radius 参数很难做到没有偏差，因为它不像是更圆润的矩形，而像是更圆润的三角形。在这里，我们把它分成四块，各个外边各两块，在块内绘制好对应的区域，再利用 overflow: hidden; 来隐藏多余的部分。然后是三个圆，相对简单。
 
代码量实在太多，就不贴出来了，大概思路就这样子。

眼睛，鼻子

眼睛和鼻子相对简单，就不贴代码了。

胡须

因为胡须是弯弯的，所以每根胡须需要两个元素来实现，我们就用 :before 和 :after 吧。

某一根胡须的代码：

CSS Code复制内容到剪贴板

.hello-kitty-div .left-moustache-1:before {   

    content: '20';   

    display: block;   

    position: absolute;   

    left: 20px;   

    top: 420px;   

    width: 100px;   

    height: 24px;   

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!