使用 CSS3 绘制 Hello Kitty

时间:2022-08-27 09:20:01

偶然间看到了 SegmentFault 上的一篇文章,感觉这个 Hello Kitty 画的还不错,心血来潮也用 CSS3 画了个 Hello Kitty,现在在这里记录一下详细的绘制过程。想要源码、素材、在线演示的同学可以直接拉到最下面。

我们先看下原图:

使用 CSS3 绘制 Hello Kitty

结构分解

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

<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 值,有偏差的地方再微调一下基本就可以了。

使用 CSS3 绘制 Hello Kitty

脸蛋

.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-right-radius: 355px 333px;
border-bottom-left-radius: 370px 285px;
border-bottom-right-radius: 330px 255px;
background-color: white;
z-index: 100;
}

使用 CSS3 绘制 Hello Kitty

左耳

.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;
}

使用 CSS3 绘制 Hello Kitty

让耳朵和脸蛋连为一体:

.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;
}

使用 CSS3 绘制 Hello Kitty

再稍加点缀,美化一下:

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

使用 CSS3 绘制 Hello Kitty

右耳

.hello-kitty-div .right-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-right-radius: 90px 57px;
border-bottom-right-radius: 334px 245px;
background-color: white;
transform: rotate(-21deg);
z-index: 99;
} .hello-kitty-div .right-ear-clean {
left: 700px;
top: 105px;
width: 120px;
height: 120px;
background-color: white;
z-index: 101;
}

使用 CSS3 绘制 Hello Kitty

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

蝴蝶结

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

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

使用 CSS3 绘制 Hello Kitty

使用 CSS3 绘制 Hello Kitty

使用 CSS3 绘制 Hello Kitty

使用 CSS3 绘制 Hello Kitty

眼睛,鼻子

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

使用 CSS3 绘制 Hello Kitty

胡须

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

某一根胡须的代码:

.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-right-radius: 100px 30px;
border-bottom-right-radius: 20px;
background-color: black;
transform: rotate(2deg);
z-index: 101;
}

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

使用 CSS3 绘制 Hello Kitty

最后

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

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

使用 CSS3 绘制 Hello Kitty的更多相关文章

  1. CSS3绘制六边形

    因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...

  2. CSS3绘制旋转的太极图案(一)

        实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">&lt ...

  3. css3绘制几何图形

    用css3绘制你需要的几何图形 1.圆形 示例: 思路:给任何正方形元素设置一个足够大的 border-radius ,就可以把它变成一个圆形.代码如下: html: <div class=&q ...

  4. 用纯CSS3绘制萌系漫画人物动态头像

    大家已经见惯了用CSS3画的图标.LOGO.头像,这次*同学Rei给我们带来了用纯CSS3绘制的日本动漫<轻音少女>女主角秋山澪的动态头像.看到动图我震惊了!!!CSS3的强大再次霸气测 ...

  5. css3绘制腾讯logo

    CSS3绘制的腾讯LOGO,下边是对比图. 演示地址

  6. 【项目1-1】使用HTML5&plus;CSS3绘制HTML5的logo

    作为一个WEB小萌新,自学了有一段时间,总是感觉停滞不前.最近反思中,想到前贤一句话:书读百遍其义自见.说到底,还是项目做的少,如果做多了,想必自然会得心应手. 利用HTML5+CSS3绘制HTML5 ...

  7. CSS3绘制砖墙-没实用不论什么图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 详解使用CSS3绘制矩形、圆角矩形、圆形、椭圆形、三角形、弧

    1.矩形 绘制矩形应该是最简单的了,直接设置div的宽和高,填充颜色,效果就出来了. 2.圆角矩形 绘制圆角矩形也很简单,在1的基础上,在使用css3的border-radius,即可. 3.圆 根据 ...

  9. CSS3 绘制360安仔小精灵&lbrack;原创&rsqb;

    Css3图形通常由矩形,圆形,椭圆,三角形,梯形等组合而成. 矩形,为display:block的块级元素设定宽高,便能实现, 圆角矩形,椭圆,圆形,则通过border-radius 属性来得到. 圆 ...

随机推荐

  1. 转义字符&lowbar;MySQL识别下面的转义序列

    转义字符.MySQL识别下面的转义序列 在字符串中,某些序列具有特殊含义.这些序列均用反斜线('\')开始,即所谓的转义字符.MySQL识别下面的转义序列: \0 ASCII 0(NUL)字符. \' ...

  2. 通过Log4j的DEBUG级别来显示mybatis的sql语句

        为了更加方便调试sql语句,需要显示mybatis的sql语句.     网络上的一般方式都是通过log4j来实现,但是很多都有问题.      经过实验,以下代码能够保持正常:(只显示myb ...

  3. HTML页面背景音乐控制

    //兼容ie,chrome,safari. <object id="AudioID" type="application/x-mplayer2" data ...

  4. Excel 文件转 JSON格式对象

    将导入的如图所示格式的城乡区划代码的excel文件整理成json格式的对象储存在js文件中: var PROJECTDISTRICTDATA=[    {        "name&quot ...

  5. ActiveX数据对象之事务控制在VB和DELPHI中的应用

            本文发表在中国人民解放军"信息工程大学"学报 2001年第3期.        ActiveX数据对象之事务控制在VB和DELPHI中的应用             ...

  6. Sharepoint 2016 配置FBA(一) 创建Membership数据库

    在Sharepoint 2016上配置FBA(forms based authentication)的过程和Sharepoint 2013一样. 第一步:创建Membership数据库. 为了存放所有 ...

  7. 高负载集群实战之lvs负载均衡-技术流ken

    lvs简介 LVS的英文全称是Linux Virtual Server,即Linux虚拟服务器. 特点 跨平台:window,linux 作用 实现负载均衡 核心组件 ip_vs:linux的内核功能 ...

  8. leetcode-53&period;最大子序和

    leetcode-53.最大子序和 题意 给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和. 示例: 输入: [-2,1,-3,4,-1,2,1,- ...

  9. Spring Boot 揭秘与实战 附录 - Spring Boot 公共配置

    Spring Boot 公共配置,配置 application.properties/application.yml 文件中. 摘自:http://docs.spring.io/spring-boot ...

  10. 网页登入验证码的实现(java&amp&semi;html)

    前端界面实现(由于验证码是动态获取所以用jsp格式) <%@ page language="java" contentType="text/html; charse ...