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

ttx9n · 发表于 2016-8-3 14:10:40

这篇文章主要介绍了使用CSS3代码绘制可爱的Hello Kitty猫的相关资料,需要的朋友可以参考下

感觉这个 Hello Kitty 画的还不错，心血来潮也用 CSS3 画了个 Hello Kitty，现在在这里记录一下详细的绘制过程。想要源码、素材、在线演示的同学可以直接拉到最下面。我们先看下原图：

2016080314001539.png

结构分解

从上图可以看出，Hello Kitty 由脸蛋、耳朵、红色蝴蝶结、眼睛、鼻子和六根胡须构成，所以 DOM 结构也相对简单：

CSS Code复制内容到剪贴板

<div class="hello-kitty-div">
<div class="face"></div>
<div class="left-ear"></div>
<div class="left-ear-clean"></div>
<div class="left-ear-beautify"></div>
<div class="right-ear"></div>
<div class="right-ear-clean"></div>
<div class="bowknot-outside-left-top-container">
<div class="bowknot-outside-left-top"></div>
</div>
<div class="bowknot-outside-left-bottom-container">
<div class="bowknot-outside-left-bottom"></div>
</div>
<div class="bowknot-outside-right-top-container">
<div class="bowknot-outside-right-top"></div>
</div>
<div class="bowknot-outside-right-bottom-container">
<div class="bowknot-outside-right-bottom"></div>
</div>
<div class="bowknot-inside-left"></div>
<div class="bowknot-inside-right"></div>
<div class="bowknot-inside-center"></div>
<div class="left-eye"></div>
<div class="right-eye"></div>
<div class="nose"></div>
<div class="left-moustache-1"></div>
<div class="left-moustache-2"></div>
<div class="left-moustache-3"></div>
<div class="right-moustache-1"></div>
<div class="right-moustache-2"></div>
<div class="right-moustache-3"></div>
</div>

开始绘制

可以利用 Photoshop 的参考线精确的计算出元素的 left、top、width、height、border-width 以及四个角的水平 radius 值和垂直 radius 值，有偏差的地方再微调一下基本就可以了。

2016080314001540.png

脸蛋

CSS Code复制内容到剪贴板

.hello-kitty-div .face {
left: 107px;
top: 77px;
width: 747px;
height: 566px;
border-top: 35px solid black;
border-bottom: 31px solid black;
border-left: 29px solid black;
border-right: 30px solid black;
border-top-left-radius: 355px 333px;
border-top-rightright-radius: 355px 333px;
border-bottom-left-radius: 370px 285px;
border-bottom-rightright-radius: 330px 255px;
background-color: white;
z-index: 100;
}

2016080314001641.png

左耳

CSS Code复制内容到剪贴板

.hello-kitty-div .left-ear {
left: 112px;
top: 61px;
width: 250px;
height: 250px;
border-top: 33px solid black;
border-bottom: 30px solid black;
border-left: 28px solid black;
border-right: 30px solid black;
border-top-left-radius: 138px 100px;
border-bottom-left-radius: 334px 310px;
background-color: white;
transform: rotate(23deg);
z-index: 99;
}

2016080314001642.png

让耳朵和脸蛋连为一体：

CSS Code复制内容到剪贴板

.hello-kitty-div .left-ear-clean {
left: 146px;
top: 96px;
width: 250px;
height: 250px;
border-top-left-radius: 138px 100px;
border-bottom-left-radius: 360px 310px;
background-color: white;
transform: rotate(23deg);
z-index: 101;
}

2016080314001643.png

再稍加点缀，美化一下：

CSS Code复制内容到剪贴板

.hello-kitty-div .left-ear-beautify {
left: 149px;
top: 221px;
width: 60px;
height: 30px;
border-top-left-radius: 20px 15px;
border-top-rightright-radius: 25px 15px;
border-bottom-left-radius: 20px 15px;
border-bottom-rightright-radius: 25px 15px;
background-color: black;
transform: rotate(-52deg);
z-index: 102;
}

2016080314001644.png

右耳

CSS Code复制内容到剪贴板

.hello-kitty-div .rightright-ear {
left: 600px;
top: 50px;
width: 250px;
height: 250px;
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;
}

2016080314001645.png

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

蝴蝶结

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

代码量实在太多，就不贴出来了，大概思路就这样子。

2016080314001646.png

2016080314001647.png

2016080314001648.png

2016080314001649.png

眼睛，鼻子

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

2016080314001650.png

胡须

因为胡须是弯弯的，所以每根胡须需要两个元素来实现，我们就用 :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;
border-top-left-radius: 80px 30px;
border-bottom-left-radius: 20px;
background-color: black;
transform: rotate(-5deg);
z-index: 101;
}
.hello-kitty-div .left-moustache-1:after {
content: '\20';
display: block;
position: absolute;
left: 131px;
top: 418px;
width: 60px;
height: 24px;
border-top-rightright-radius: 100px 30px;
border-bottom-rightright-radius: 20px;
background-color: black;
transform: rotate(2deg);
z-index: 101;
}

现在，整个 Hello Kitty 就画完了，有没有觉得很可爱？~~(ฅ>ω<*ฅ)~~。

2016080314001651.png

完整源码及素材：https://github.com/chnhyg/css3-hello-kitty

在线演示：http://chnhyg.coding.me/css3-hello-kitty

wangdj110 · 发表于 2022-10-10 14:29:58

来看看！！！

lba36h7g · 发表于 2023-5-20 03:56:14

哟哟哟哟哟以偶

adm1n · 发表于 2023-6-3 13:03:10

来看看怎么样

w18pvaep · 发表于 2023-9-10 12:28:22

需要很久了终于找到了

q42obh · 发表于 2024-3-6 00:11:01

看看看咋么

3t0ukmu · 发表于 2024-7-1 13:46:32

刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷

lba36h7g · 发表于 2024-8-9 06:30:02

1312315458748777

wqpa63gz · 发表于 2024-8-16 08:27:11

看看看看看看看看看看看看看看看看看看看看看看看看看看看

qq303604905 · 发表于 2024-9-1 05:48:34

vcxvcxv

账号		自动登录	找回密码
密码			立即注册

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

相关帖子