今天和大家分享一下使用 CSS3 绘制腾讯 QQ 的企鹅 Logo 的过程。
一、如何使用 CSS3 来绘制图形?
网络上经常能够看到一些用 CSS3 绘制的精致图形,它们通常由矩形,圆形,椭圆,三角形, 梯形等组合而成。要想绘制我们自己的图形,就要先了解下基本图形的绘制方法了。
一个 display:block 的元素设定宽高之后表现为矩形。通过设定 border-radius 可以得到圆角矩形,圆形和椭圆形。
在使用 border-radius 时,有几点可能需要注意一下:
- border-radius,可以分别对 4 个角进行设定。 例如上图:border-top-left-radius: apx bpx;
- border-xxx-xxx-radius 的两个值分别代表着椭圆长轴和短轴长度的一半,通常简写的时候例如 border-top-left-radius: 10px;(border-top-left-radius:10px 10px;) 表明长轴和短轴的长度均为 20px,也就是半径为 10px 的圆形(圆角部分)。
- 当使用百分比数值时,a 相对于 width, b 相对于 height
如果 a == width/2, b == height/2,结果就是一个椭圆,与此同时 a==b,那么就可以得到一个半径为 a 的圆形了。
在看三角形之前,首先看看三角形的 “绘制者”border,下面的例子:
1 2 3 4 5 6 7 8 9 10 |
.test{ border: 20px solid; border-top-color:#ff0000; border-right-color:#00ff00; border-bottom-color:#0000ff; border-left-color:#FFFF00; width:100px; height: 100px; background: #272822; } |
将每个 boder 的颜色值设为不一样,就可以清楚的看到每个 border 的负责区域,有三角形的雏形了。其实,绘制三角形的原理很简单,如下图
我们可以这样去理解一个 border 所代表的区域,那就是 “三角形 x2 + 矩形”,以 border-bottom 为例,
矩形 = width x ( border-bottom-width )
相邻的 border 交叉的区域构成一个矩形,每个 border 各负责一半,一个直角三角形。只要将其中的一个 border 的颜色值设为 transparent 或者背景色,从视觉上就可以得到一个直角三角形了。
- 三角形 1 = border-left-width x border-bottom-width
- 三角形 2 = border-right-width x border-bottom-width
当 width = 0(height = 0, border-left || border-right)时,我们通过调整 border 的宽度可以将这两个直角三角形拼接成任意形状的三角形,或者调整 width(height) 等获得一个梯形,当然梯形也可以通过拼图得到,这样不是更简单吗?。Transform 中旋转将为我们提供更多的灵活变化。
二、绘制我们的企鹅
结束了对于基本图形部分的一些讨论,开始着手于 QQ 企鹅的绘制。
第一步当然是基本框架的绘制了。
通过对手里的 Logo 图像的观察,按照层次划分来组合最终的效果。选择使用绝对位置 position:absolute; 来布局各个元素。主要划分为头部,身体,围脖,双手,双脚。
框架的结果图:
介绍下这个过程中几个比较典型的图形绘制方法:
1、企鹅的眼睛:椭圆,直接设置 border-radius:50% 50%; 即可[因为宽高分别为 44px 和 66px,所以也可以这样设定:border-radius: 22px / 33px]
2、围脖的尾部:一个圆角各异的矩形,所以这里需要对几个角分别设定 border-radius,微调的结果为
1 2 3 |
border-bottom-left-radius: 50% 43%; border-bottom-right-radius: 15px; border-top-left-radius: 20% 57%; |
3、企鹅的胳膊:手的绘制较为麻烦一点,可以分为上下两个部分,将绘制的结果拼接到一起。那么对于不需要的部分怎么办呢?我们可以将上 (下) 部分放到一个 div(container) 中,利用 overflow:hidden 的属性来截取所要的部分。绘制复杂图形的时候常用的方法就是切割和拼接,将图形切割成一个个简单的小块,通过层叠和旋转变化进行组合。
使用 transform:rotate(deg) 的时候,优先设定 transform-origin 属性,会比较方便。设定的点作为中心点,整个图形绕着这个点进行角度变化。例如:transform-origin:bottom left, 使用左下角作为原点。也可以使用具体的像素值和百分比。
在基本的框架线条中比非常