绘制我们的企鹅
前提，你已经看过CSS3绘制图形基本原理一文，已对一些基本图形绘制了解。
开始着手于QQ 企鹅的绘制, 第一步基本框架的绘制。
result.png
通过对Logo图像的观察，按照层次划分来组合最终的效果。选择使用绝对位置position:absolute;来布局各个元素。主要划分为头部，身体，围脖，双手，双脚。
基本框架结构就是这样的，QQ 对于容器是通过绝对定位来对每个元素布局进行设置的。
QQ Logo容器(画板)：
/**
* QQ Logo 绘制
*/
#qq {
position: relative;
margin: 0 auto;
width: 420px;
height: 400px;
outline: gold solid 2px;
}
骨架出来了，那我们就开始一步步的进行绘制了，先从头开始：
绘制 head 前，还是跟步骤1一样，先对 head 的层次结构划分清楚，依次为：左眼、右眼、上嘴唇、下嘴唇、嘴唇的层次感体现
绘制 head 的轮廓：
/* QQ head */
.head {
position: absolute;
top: 18px;
left: 96px;
width: 234px;
height: 185px;
border: 1px solid #000;
/* 通过对border-radius 圆弧的层度来进行钩画 */
border-top-left-radius: 117px 117px;
border-top-right-radius: 117px 117px;
border-bottom-left-radius: 117px 68px;
border-bottom-right-radius: 117px 68px;
}
image.png
图中为什么圆弧是设置成 border-bottom-left-radius: 117px 68px; 一般根据设计图出来后导出转成带有标尺图后，会自动计算出值；如果没有的话，那就要通过计算了。
然后依次绘制 head 其他结构：
眼睛
/* 眼睛 */
.eye {
position: absolute;
width: 44px;
height: 66px;
border:1px solid #000;
border-radius: 50% 50%;
}
.left.eye {
left: 62px;
top: 50px;
}
.right.eye {
left: 132px;
top: 50px;
}
image.png
嘴
/* QQ head -> mouth */
.mouthTopContainer {
position: absolute;
top: 120px;
left: 39px;
width: 158px;
height: 29px;
border: 1px solid #000;
}
.mouthBottomContainer {
position: absolute;
top: 146px;
left: 39px;
width: 158px;
height: 15px;
border: 1px solid #000;
}
image.png
到这里基本头的骨架就出来，然后就是对头的骨架结构的线条进行修饰，现在太丑了，对吧！
眼睛
/* QQ head -> eye */
.eye {
position: absolute;
width: 44px;
height: 66px;
border:1px solid #000;
border-radius: 50% 50%;
}
.left.eye {
left: 62px;
top: 50px;
}
.right.eye {
left: 132px;
top: 50px;
}
.innerLeftEye {
position: absolute;
top: 20px;
left: 20px;
width: 18px;
height: 24px;
border-radius: 50%;
border: 1px solid #000;
}
.innerLeftEye::after {
content: "";
position: absolute;
top: 6px;
left: 9px;
width: 6px;
height: 8px;
border: 1px solid #000;
border-radius: 50%;
}
.innerRightEye {
position: absolute;
top: 20px;
left: 8px;
/* 月牙眼球外轮廓 */
width: 18px;
height: 24px;
border: 1px solid #000;
border-top-left-radius: 50% 90%;
border-top-right-radius: 50% 90%;
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
}
.innerRightEye::after {
content: "";
position: absolute;
bottom: -1px;
left: 4px;
/* 月牙眼球内部轮廓 */
width: 10px;
height: 13px;
border: 1px solid #000;
border-top-left-radius: 50% 100%;
border-top-right-radius: 35% 80%;
}
.fix {
position: absolute;
top: 17px;
width: 4px;
height: 4px;
border: 1px solid #000;
border-radius: 50%;
}
.fix:after{
content: "";
position: absolute;
top: 0;
left: 14px;
width: 4px;
height: 4px;
border: 1px solid #000;
border-radius: 50%;
}
image.png
嘴
/* QQ head -> mouth */
.mouthTopContainer {
/* 定位 */
position: absolute;
top: 120px;
left: 39px;
width: 158px;
height: 29px;
overflow: hidden; /* 隐藏超出部分 */
}
.mouthTop {
/* 上嘴唇轮廓 */
position: absolute;
top: 0;
left: 0;
width: 158px;
height: 34px;
border: 1px solid #000;
border-top-left-radius: 45% 34px;
border-top-right-radius: 45% 34px;
}
.mouthBottomContainer {
position: absolute;
top: 146px;
left: 39px;
width: 158px;
height: 15px;
overflow: hidden; /* 隐藏超出部分 */
}
.mouthBottom {
position: absolute;
top: -4px;
left: 0;
width: 158px;
height: 24px;
border: 1px solid #000;
border-top:none;
border-bottom-left-radius: 45% 24px;
border-bottom-right-radius: 45% 24px;
}
/* 嘴唇上下层次感-咬合部位 */
.lispContainer {
/* 定位 */
position: absolute;
top: 146px;
left: 60px;
width: 116px;
height: 24px;
}
.lips {
position: absolute;
top: 0;
left: 0;
width: 116px;
height: 24px;
border: 1px solid #FFA600;
border-bottom-left-radius: 50% 100%;
border-bottom-right-radius: 50% 100%;
}
image.png
image.png
image.png
基本 head 轮廓就是这样了，最后在把右眼眼球部分上个色，来进行层叠覆盖隐藏
.innerRightEye {
position: absolute;
top: 20px;
left: 8px;
/* 月牙眼球外轮廓 */
width: 18px;
height: 24px;
/* border: 1px solid #000; */
border-top-left-radius: 50% 90%;
border-top-right-radius: 50% 90%;
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
background: black;
box-shadow: 0 -1px 2px black;
}
.innerRightEye::after {
content: "";
position: absolute;
bottom: -1px;
left: 4px;
/* 月牙眼球内部轮廓 */
width: 10px;
height: 13px;
/* border: 1px solid #000; */
border-top-left-radius: 50% 100%;
border-top-right-radius: 35% 80%;
background: white;
}
.fix {
position: absolute;
top: 19px;
width: 4px;
height: 4px;
/* border: 1px solid #000; */
border-radius: 50%;
background: black;
}
.fix:after{
content: "";
position: absolute;
top: 0;
left: 14px;
width: 4px;
height: 4px;
/* border: 1px solid #000; */
border-radius: 50%;
background: black;
}
image.png
接下来 开始绘制 QQ 的 body 部分，老样子对 body 进行层次结构划分：围巾、围巾尾、内轮廓、外轮廓
先各个容器位置布局好
/* QQ body */
.body {
/* body 容器定位 */
position: absolute;
top: 135px;
left: 48px;
width: 326px;
height: 300px;
/* border: 1px solid #000; */
}
/* QQ body -> scarf */
.scarf {
position: absolute;
top: -2px;
left: 34px;
width: 258px;
height: 110px;
border: 1px solid #000;
border-top: none;
}
/* QQ body -> scarfEnd */
.scarfEnd {
position: absolute;
left: 74px;
top: 90px;
width: 52px;
height: 64px;
border: 3px solid black;
}
/* QQ body -> innerWrapper */
.innerWrapper {
/* innerWrapper 容器定位 */
position: absolute;
left: 30px;
top: 76px;
width: 280px;
height: 200px;
border: 1px solid #000;
}
/* QQ body -> outerWrapper */
.outerWrapper{
/* outerWrapper 容器定位 */
position: absolute;
top: 54px;
overflow: hidden;
width: 262px;
left: 32px;
height: 250px;
border: 1px solid #000;
}
轮廓线条修正
/* QQ body */
.body {
/* body 容器定位 */
position: absolute;
top: 135px;
left: 48px;
width: 326px;
height: 300px;
/* border: 1px solid #000; */
}
/* QQ body -> scarf */
.scarf {
position: absolute;
top: -2px;
left: 34px;
width: 258px;
height: 110px;
border: 1px solid #000;
border-top-left-radius: 30px 34px;
border-top-right-radius: 38px 34px;
border-bottom-left-radius: 50% 76px;
border-bottom-right-radius: 50% 76px;
border-top: none;
}
/* QQ body -> scarfEnd */
.scarfEnd {
position: absolute;
left: 74px;
top: 90px;
width: 52px;
height: 64px;
border: 3px solid black;
border-bottom-left-radius: 50% 43%;
border-bottom-right-radius: 15px;
border-top-left-radius: 20% 57%;
}
/* QQ body -> innerWrapper */
.innerWrapper {
/* innerWrapper 容器定位 */
position: absolute;
left: 30px;
top: 76px;
width: 280px;
height: 200px;
overflow: hidden;
}
.inner {
position: absolute;
left: 25px;
top: -71px;
width: 218px;
height: 210px;
border: 1px solid #000;
border-radius: 50%;
}
/* QQ body -> outerWrapper */
.outerWrapper{
/* outerWrapper 容器定位 */
position: absolute;
top: 54px;
overflow: hidden;
width: 262px;
left: 32px;
height: 250px;
}
.outer{
position: absolute;
top: -84px;
width: 260px;
height: 250px;
border: 1px solid #000;
border-radius: 125px;
}
大致轮廓基本已经出来了，还有一些内部线条，等后面在来慢慢绘制。
接下来我们来绘制 hand 部分，安装老路子层次结构划分：左手、右手； 手的样子需要通过两个 div 进行整合才能绘制出来，所以再次划分： 左手上、左手下、右手上、右手下
/* QQ handWrapper */
.handWrapper{
/* 定位手的起始点 */
position: absolute;
top: 219px;
left: 7px;
}
/* QQ handWrapper -left */
.leftHandTopContainer {
/* 定位 */
position: absolute;
top: 55px;
left: 50px;
width: 118px;
height: 26px;
border: 1px solid #000;
transform-origin: bottom left;
transform: rotate(-70deg);
}
.leftHandBottomContainer {
/* 定位 */
position: absolute;
top: 78px;
left: 50px;
width: 100px;
height: 30px;
border: 1px solid #000;
transform-origin: top left;
transform: rotate(-70deg);
}
/* QQ handWrapper -right */
.rightHandTopContainer {
/* 定位 */
position: absolute;
top: 47px;
left: 240px;
width: 118px;
height: 34px;
border: 1px solid #000;
transform-origin: bottom right;
transform: rotate(65deg);
}
.rightHandBottomContainer{
/* 定位 */
position: absolute;
top: 81px;
left: 248px;
width: 110px;
height: 58px;
border: 1px solid #000;
transform-origin: top right;
transform: rotate(90deg);
}
image.png
线条轮廓修改
/* QQ handWrapper */
.handWrapper{
/* 定位手的起始点 */
position: absolute;
top: 219px;
left: 7px;
}
/* QQ handWrapper -left */
.leftHandTopContainer {
/* 定位 */
position: absolute;
top: 55px;
left: 50px;
width: 118px;
height: 26px;
/* border: 1px solid #000; */
transform-origin: bottom left;
transform: rotate(-70deg);
overflow: hidden;
}
.leftHandTop {
/* 上半部分 */
width: 128px;
height: 54px;
border: 1px solid #050346;
border-top-left-radius: 44% 38px;
border-top-right-radius: 56% 33px;
}
.leftHandBottomContainer {
/* 定位 */
position: absolute;
top: 78px;
left: 50px;
width: 100px;
height: 30px;
/* border: 1px solid #000; */
transform-origin: top left;
transform: rotate(-70deg);
overflow: hidden;
}
.leftHandBottom {
position: absolute;
top: -26px;
width: 128px;
height: 44px;
border: 1px solid #050346;
border-bottom-left-radius: 48% 20px;
border-bottom-right-radius: 52% 23px;
}
/* QQ handWrapper -right */
.rightHandTopContainer {
/* 定位 */
position: absolute;
top: 47px;
left: 240px;
width: 118px;
height: 34px;
/* border: 1px solid #000; */
transform-origin: bottom right;
transform: rotate(65deg);
overflow: hidden;
}
.rightHandTop {
position: absolute;
left: -30px;
width: 148px;
height: 54px;
border: 1px solid #050346;
border-top-right-radius: 41% 54px;
border-top-left-radius: 59% 48px;
}
.rightHandBottomContainer{
/* 定位 */
position: absolute;
top: 81px;
left: 248px;
width: 110px;
height: 58px;
/* border: 1px solid #000; */
transform-origin: top right;
transform: rotate(90deg);
overflow: hidden;
}
.rightHandBottom {
position: absolute;
top: 1px;
left: 38px;
width: 68px;
height: 28px;
border: 1px solid #000;
border-bottom-right-radius: 100% 40px;
}
image.png
是不是漂亮很多了， 那快点把脚的部分也完成吧,和手的结构基本类似。
基础位置布局
/* QQ footerWrapper */
.footWrapper{
/* 定位起始点 */
position: absolute;
top: 292px;
left: 80px;
width: 300px;
height: 80px;
border: 1px solid #000;
}
/* QQ footerWrapper -> left */
.leftFootTopWrapper {
/* 定位左脚上容器 */
position: absolute;
top: 16px;
left: -1px;
width: 130px;
height: 37px;
border: 1px solid #000;
}
.leftFootBottomWrapper {
position: absolute;
top: 52px;
left: -1px;
width: 130px;
height: 38px;
border: 1px solid #000;
}
/* QQ footerWrapper -> right */
.rightFootTopWrapper {
/* 定位左脚上容器 */
position: absolute;
top: 22px;
left: 134px;
width: 130px;
height: 38px;
border: 1px solid #000;
}
.rightFootBottomWrapper {
position: absolute;
top: 52px;
left: 134px;
width: 134px;
height: 38px;
border: 1px solid #000;
}
轮廓调整
/* QQ footerWrapper */
.footWrapper{
/* 定位起始点 */
position: absolute;
top: 292px;
left: 80px;
width: 300px;
height: 80px;
/* border: 1px solid #000; */
}
/* QQ footerWrapper -> left */
.leftFootTopWrapper {
/* 定位左脚上容器 */
position: absolute;
top: 16px;
left: -1px;
width: 130px;
height: 37px;
/* border: 1px solid #000; */
overflow: hidden;
}
.leftFootTop {
position: absolute;
top: -10px;
left: 3px;
width: 120px;
height: 60px;
border: 4px solid black;
border-top-left-radius: 80% 70%;
}
.leftFootBottomWrapper {
position: absolute;
top: 52px;
left: -1px;
width: 130px;
height: 38px;
/* border: 1px solid #000; */
overflow: hidden;
}
.leftFootBottom {
position: absolute;
top: -30px;
left: 3px;
width: 120px;
height: 60px;
border: 4px solid #000;
border-top-left-radius: 50% 44%;
border-top-right-radius: 50% 44%;
border-bottom-left-radius: 50% 56%;
border-bottom-right-radius: 50% 56%;
}
/* QQ footerWrapper -> right */
.rightFootTopWrapper {
/* 定位左脚上容器 */
position: absolute;
top: 22px;
left: 134px;
width: 130px;
height: 38px;
/* border: 1px solid #000; */
overflow: hidden;
}
.rightFootTop {
position: absolute;
top: 0px;
left: 4px;
width: 120px;
height: 60px;
border: 4px solid black;
border-top-right-radius: 32% 65%;
}
.rightFootBottomWrapper {
position: absolute;
top: 52px;
left: 134px;
width: 134px;
height: 38px;
/* border: 1px solid #000; */
overflow: hidden;
}
.rightFootBottom {
position: absolute;
top: -30px;
left: 3px;
width: 120px;
height: 60px;
border: 4px solid #000;
border-top-left-radius: 50% 56%;
border-top-right-radius: 50% 56%;
border-bottom-left-radius: 50% 44%;
border-bottom-right-radius: 50% 44%;
}
image.png
基本整体框架结构就出来了，开始上色吧。上色的过程可以帮助我们调整z-index，也就是各个模块的重叠层次，遮盖了一些无用的线条和框角。
head 开始
/* QQ head */
.head {
position: absolute;
top: 18px;
left: 96px;
width: 234px;
height: 185px;
border: 1px solid #000;
border-top-left-radius: 117px 117px;
border-top-right-radius: 117px 117px;
border-bottom-left-radius: 117px 68px;
border-bottom-right-radius: 117px 68px;
background: #000;
}
/* QQ head -> eye */
.eye {
position: absolute;
width: 44px;
height: 66px;
border:1px solid #000;
border-radius: 50% 50%;
background: #fff;
}
.left.eye {
left: 62px;
top: 50px;
}
.right.eye {
left: 132px;
top: 50px;
}
.innerLeftEye {
position: absolute;
top: 20px;
left: 20px;
width: 18px;
height: 24px;
border-radius: 50%;
border: 1px solid #000;
background: #000;
}
.innerLeftEye::after {
content: "";
position: absolute;
top: 6px;
left: 9px;
width: 6px;
z-index: 11;
height: 8px;
/* border: 1px solid #000; */
border-radius: 50%;
background: #fff;
}
.innerRightEye {
position: absolute;
top: 20px;
left: 8px;
/* 月牙眼球外轮廓 */
width: 18px;
height: 24px;
/* border: 1px solid #000; */
border-top-left-radius: 50% 90%;
border-top-right-radius: 50% 90%;
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
background: black;
box-shadow: 0 -1px 2px black;
}
.innerRightEye::after {
content: "";
position: absolute;
bottom: -1px;
left: 4px;
/* 月牙眼球内部轮廓 */
width: 10px;
height: 13px;
/* border: 1px solid #000; */
border-top-left-radius: 50% 100%;
border-top-right-radius: 35% 80%;
background: #FFF;
}
.fix {
position: absolute;
top: 19px;
width: 4px;
height: 4px;
/* border: 1px solid #000; */
border-radius: 50%;
background: #000;
}
.fix:after{
content: "";
position: absolute;
top: 0;
left: 14px;
width: 4px;
height: 4px;
/* border: 1px solid #000; */
border-radius: 50%;
background: black;
}
/* QQ head -> mouth */
.mouthTopContainer {
/* 定位 */
position: absolute;
top: 120px;
left: 39px;
z-index: 1;
width: 158px;
height: 29px;
overflow: hidden; /* 隐藏超出部分 */
}
.mouthTop {
/* 上嘴唇轮廓 */
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 158px;
height: 34px;
border: 1px solid #FFA600;
border-top-left-radius: 45% 34px;
border-top-right-radius: 45% 34px;
background: #FFA600;
}
.mouthBottomContainer {
position: absolute;
top: 146px;
left: 39px;
z-index: 1;
width: 158px;
height: 15px;
overflow: hidden; /* 隐藏超出部分 */
}
.mouthBottom {
position: absolute;
top: -4px;
left: 0;
z-index: 1;
width: 158px;
height: 24px;
border: 1px solid #FFA600;
border-top:none;
border-bottom-left-radius: 45% 24px;
border-bottom-right-radius: 45% 24px;
background: #FFA600;
}
/* 嘴唇上下层次感-咬合部位 */
.lispContainer {
/* 定位 */
position: absolute;
top: 146px;
left: 60px;
width: 116px;
height: 24px;
}
.lips {
position: absolute;
top: 0;
left: 0;
width: 116px;
height: 24px;
border: 1px solid #FFA600;
border-bottom-left-radius: 50% 100%;
border-bottom-right-radius: 50% 100%;
background: #FFA600;
}
body
/* QQ body */
.body {
/* body 容器定位 */
position: absolute;
top: 135px;
left: 48px;
width: 326px;
height: 300px;
/* border: 1px solid #000; */
}
/* QQ body -> scarf */
.scarf {
position: absolute;
top: -2px;
left: 34px;
z-index: 5;
width: 258px;
height: 110px;
border: 1px solid #000;
border-top-left-radius: 30px 34px;
border-top-right-radius: 38px 34px;
border-bottom-left-radius: 50% 76px;
border-bottom-right-radius: 50% 76px;
border-top: none;
background: #FB0009;
}
/* QQ body -> scarfEnd */
.scarfEnd {
position: absolute;
left: 74px;
top: 90px;
width: 52px;
height: 64px;
border: 3px solid black;
border-bottom-left-radius: 50% 43%;
border-bottom-right-radius: 15px;
border-top-left-radius: 20% 57%;
background: #FB0009;
}
/* QQ body -> innerWrapper */
.innerWrapper {
/* innerWrapper 容器定位 */
position: absolute;
left: 30px;
top: 76px;
width: 280px;
height: 200px;
overflow: hidden;
}
.inner {
position: absolute;
left: 25px;
top: -71px;
width: 218px;
height: 210px;
border: 1px solid #000;
border-radius: 50%;
background: #fff;
}
/* QQ body -> outerWrapper */
.outerWrapper{
/* outerWrapper 容器定位 */
position: absolute;
top: 54px;
overflow: hidden;
width: 262px;
left: 32px;
height: 250px;
}
.outer{
position: absolute;
top: -84px;
width: 260px;
height: 250px;
border: 1px solid #000;
border-radius: 125px;
background: #000;
}
上色后你会发现，有的图层显示先后顺序不对，需要调整下先后顺序。
head > body
body里(scafEnd > inner > outer)
image.png
hand
/* QQ handWrapper -left */
.leftHandTopContainer {
/* 定位 */
position: absolute;
top: 55px;
left: 50px;
width: 118px;
height: 26px;
/* border: 1px solid #000; */
transform-origin: bottom left;
transform: rotate(-70deg);
overflow: hidden;
}
.leftHandTop {
/* 上半部分 */
width: 128px;
height: 54px;
border: 1px solid #050346;
border-top-left-radius: 44% 38px;
border-top-right-radius: 56% 33px;
background: #000;
}
.leftHandBottomContainer {
/* 定位 */
position: absolute;
top: 78px;
left: 50px;
width: 100px;
height: 30px;
/* border: 1px solid #000; */
transform-origin: top left;
transform: rotate(-70deg);
overflow: hidden;
}
.leftHandBottom {
position: absolute;
top: -26px;
width: 128px;
height: 44px;
border: 1px solid #050346;
border-bottom-left-radius: 48% 20px;
border-bottom-right-radius: 52% 23px;
background: #000;
}
/* QQ handWrapper -right */
.rightHandTopContainer {
/* 定位 */
position: absolute;
top: 47px;
left: 240px;
width: 118px;
height: 34px;
/* border: 1px solid #000; */
transform-origin: bottom right;
transform: rotate(65deg);
overflow: hidden;
}
.rightHandTop {
position: absolute;
left: -30px;
width: 148px;
height: 54px;
border: 1px solid #050346;
border-top-right-radius: 41% 54px;
border-top-left-radius: 59% 48px;
background: #000;
}
.rightHandBottomContainer{
/* 定位 */
position: absolute;
top: 81px;
left: 248px;
width: 110px;
height: 58px;
/* border: 1px solid #000; */
transform-origin: top right;
transform: rotate(90deg);
overflow: hidden;
}
.rightHandBottom {
position: absolute;
top: 1px;
left: 38px;
width: 68px;
height: 28px;
border: 1px solid #000;
border-bottom-right-radius: 100% 40px;
background: #000;
}
footer
/* QQ footerWrapper */
.footWrapper{
/* 定位起始点 */
position: absolute;
top: 292px;
left: 80px;
width: 300px;
height: 80px;
/* border: 1px solid #000; */
}
/* QQ footerWrapper -> left */
.leftFootTopWrapper {
/* 定位左脚上容器 */
position: absolute;
top: 16px;
left: -1px;
width: 130px;
height: 37px;
/* border: 1px solid #000; */
overflow: hidden;
}
.leftFootTop {
position: absolute;
top: -10px;
left: 3px;
width: 120px;
height: 60px;
border: 4px solid black;
border-top-left-radius: 80% 70%;
background: #FF9C00;
}
.leftFootBottomWrapper {
position: absolute;
top: 52px;
left: -1px;
width: 130px;
height: 38px;
/* border: 1px solid #000; */
overflow: hidden;
}
.leftFootBottom {
position: absolute;
top: -30px;
left: 3px;
width: 120px;
height: 60px;
border: 4px solid #000;
border-top-left-radius: 50% 44%;
border-top-right-radius: 50% 44%;
border-bottom-left-radius: 50% 56%;
border-bottom-right-radius: 50% 56%;
background: #FF9C00;
}
/* QQ footerWrapper -> right */
.rightFootTopWrapper {
/* 定位左脚上容器 */
position: absolute;
top: 22px;
left: 134px;
width: 130px;
height: 38px;
/* border: 1px solid #000; */
overflow: hidden;
}
.rightFootTop {
position: absolute;
top: 0px;
left: 4px;
width: 120px;
height: 60px;
border: 4px solid black;
border-top-right-radius: 32% 65%;
background: #FF9C00;
}
.rightFootBottomWrapper {
position: absolute;
top: 52px;
left: 134px;
width: 134px;
height: 38px;
/* border: 1px solid #000; */
overflow: hidden;
}
.rightFootBottom {
position: absolute;
top: -30px;
left: 3px;
width: 120px;
height: 60px;
border: 4px solid #000;
border-top-left-radius: 50% 56%;
border-top-right-radius: 50% 56%;
border-bottom-left-radius: 50% 44%;
border-bottom-right-radius: 50% 44%;
background: #FF9C00;
}
image.png
到了这里基本完成了 90% 了， 剩下的就是线条优化，使 QQ 看起来更有层次感、立体感。
嘴唇
嘴巴的形状不够性感、立体；绘制一个斜边三角形，修复嘴唇的层次感。
斜边三角形
绘制这样一个斜边三角形，步骤分解如图所示：
步骤分解
先是绘制一个普通三角形，通过逆时针旋转得到一个修复三角形，那么相对称的修复三角形可以通过使用rotateY，绕着Y轴旋转180度，来得到。
/* 嘴唇上下层次感-咬合部位 */
.lispContainer {
/* 定位 */
position: absolute;
top: 146px;
left: 60px;
width: 116px;
height: 24px;
}
.lips {
position: absolute;
top: 0;
left: 0;
width: 116px;
height: 24px;
border: 1px solid #FFA600;
border-bottom-left-radius: 50% 100%;
border-bottom-right-radius: 50% 100%;
background: #FFA600;
}
.lipShadow {
position: absolute;
width: 0px;
height: 0px;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 8px solid black;
transform-origin: top right;
transform: rotate(-60deg);
z-index: 2;
}
.lipShadow.left {
top: 4px;
left: -12px;
transform: rotate(-60deg);
}
.lipShadow.right {
top: 4px;
left: 111px;
transform: rotate(60deg) rotateY(180deg);
}
image.png
围巾
围脖竟然没折痕，不立体； 通过绘制一个“小尾巴”来进行美化
小尾巴
border-right: 6px solid black;
width: 100px;
height: 70px;
border-bottom-right-radius: 70px 70px;
当对一个角应用圆角样式，如果这个角相邻的两个border一个有定义而一个无定义，那么绘制的结果就是由粗到细的“小尾巴了”。[在整个绘制过程中，同一个图形它的绘制方法有很多种，例如一个矩形可以用 width x height构成，也可以由border x height(width)构成，甚至可以由border组合(width = height = 0)构成，根据情况选择吧。]
