{"id":13669862,"url":"https://github.com/juntingl/qq-logo","last_synced_at":"2025-06-27T22:35:28.745Z","repository":{"id":114745416,"uuid":"133681926","full_name":"juntingl/qq-logo","owner":"juntingl","description":"CSS3","archived":false,"fork":false,"pushed_at":"2018-05-17T02:31:11.000Z","size":10,"stargazers_count":46,"open_issues_count":0,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-11T20:51:43.165Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":" https://juntingliu.github.io/qq-logo/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/juntingl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-05-16T14:52:50.000Z","updated_at":"2021-07-20T11:41:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"3e18cb90-4f06-411d-9c68-b3182deb4d18","html_url":"https://github.com/juntingl/qq-logo","commit_stats":null,"previous_names":["juntingl/qq-logo"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/juntingl/qq-logo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juntingl%2Fqq-logo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juntingl%2Fqq-logo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juntingl%2Fqq-logo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juntingl%2Fqq-logo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/juntingl","download_url":"https://codeload.github.com/juntingl/qq-logo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juntingl%2Fqq-logo/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262345452,"owners_count":23296690,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T09:00:23.869Z","updated_at":"2025-06-27T22:35:28.705Z","avatar_url":"https://github.com/juntingl.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# CSS3绘制腾讯QQ企鹅\n\n## 绘制我们的企鹅\n\n\u003e 前提，你已经看过[CSS3绘制图形基本原理](https://www.jianshu.com/p/56256db2df2f)一文，已对一些基本图形绘制了解。\n\n开始着手于QQ 企鹅的绘制, 第一步基本框架的绘制。\n\n![result.png](https://upload-images.jianshu.io/upload_images/735083-59d755e606945df4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n通过对Logo图像的观察，按照层次划分来组合最终的效果。选择使用绝对位置position:absolute;来布局各个元素。主要划分为头部，身体，围脖，双手，双脚。\n\n```html\n    \u003c!-- QQ Logo box --\u003e\n    \u003cdiv id=\"qq\"\u003e\n        \u003c!-- 头 --\u003e\n        \u003cdiv class=\"head\"\u003e\u003c/div\u003e\n        \u003c!-- 身体 --\u003e\n        \u003cdiv class=\"body\"\u003e\u003c/div\u003e\n        \u003c!-- 手 --\u003e\n        \u003cdiv class=\"handWrapper\"\u003e\u003c/div\u003e\n        \u003c!-- 脚 --\u003e\n        \u003cdiv class=\"footWrapper\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n```\n基本框架结构就是这样的，QQ 对于容器是通过绝对定位来对每个元素布局进行设置的。\n\nQQ Logo容器（画板）：\n```css\n/**\n * QQ Logo 绘制\n */\n#qq {\n    position: relative;\n    margin: 0 auto;\n    width: 420px;\n    height: 400px;\n    outline: gold solid 2px;\n}\n```\n\n骨架出来了，那我们就开始一步步的进行绘制了，先从头开始：\n\n绘制 head 前，还是跟步骤1一样，先对 head 的层次结构划分清楚，依次为：左眼、右眼、上嘴唇、下嘴唇、嘴唇的层次感体现\n\n```html\n \u003c!-- 头 --\u003e\n\u003cdiv class=\"head\"\u003e\n     \u003c!-- 左眼 --\u003e\n     \u003cdiv class=\"left eye\"\u003e\u003c/div\u003e\n     \u003c!-- 右眼 --\u003e\n     \u003cdiv class=\"right eye\"\u003e\u003c/div\u003e\n     \u003c!-- 上嘴唇 --\u003e\n     \u003cdiv class=\"mouthTopContainer\"\u003e\u003c/div\u003e\n     \u003c!-- 下嘴唇 --\u003e\n     \u003cdiv class=\"mouthBottomContainer\"\u003e\u003c/div\u003e\n     \u003c!-- 嘴唇上下层次感 --\u003e\n     \u003cdiv class=\"lispContainer\"\u003e\u003c/div\u003e\n \u003c/div\u003e\n```\n\n绘制 head 的轮廓：\n\n```css\n /* QQ head */\n.head {\n    position: absolute;\n    top: 18px;\n    left: 96px;\n    width: 234px;\n    height: 185px;\n    border: 1px solid #000;\n    /* 通过对border-radius 圆弧的层度来进行钩画 */\n    border-top-left-radius: 117px 117px;\n    border-top-right-radius: 117px 117px;\n    border-bottom-left-radius: 117px 68px;\n    border-bottom-right-radius: 117px 68px;\n}\n```\n![image.png](https://upload-images.jianshu.io/upload_images/735083-0f9d886a55cc075c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n图中为什么圆弧是设置成 ` border-bottom-left-radius: 117px 68px;` 一般根据设计图出来后导出转成带有标尺图后，会自动计算出值；如果没有的话，那就要通过计算了。\n\n然后依次绘制 head 其他结构：\n\n**眼睛**\n\n```css\n\n/* 眼睛 */\n.eye {\n    position: absolute;\n    width: 44px;\n    height: 66px;\n    border:1px solid #000;\n    border-radius: 50% 50%;\n}\n\n.left.eye {\n    left: 62px;\n    top: 50px;\n}\n\n.right.eye {\n    left: 132px;\n    top: 50px;\n}\n```\n![image.png](https://upload-images.jianshu.io/upload_images/735083-26a037d3989c49d7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n**嘴**\n\n```css\n/* QQ head -\u003e mouth */\n.mouthTopContainer {\n    position: absolute;\n    top: 120px;\n\tleft: 39px;\n    width: 158px;\n    height: 29px;\n    border: 1px solid #000;\n}\n\n.mouthBottomContainer {\n    position: absolute;\n    top: 146px;\n\tleft: 39px;\n    width: 158px;\n    height: 15px;\n    border: 1px solid #000;\n}\n```\n![image.png](https://upload-images.jianshu.io/upload_images/735083-e934db4d135d3aa1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n到这里基本头的骨架就出来，然后就是对头的骨架结构的线条进行修饰，现在太丑了，对吧！\n\n**眼睛**\n\n```html\n\u003c!-- 左眼 --\u003e\n\u003cdiv class=\"left eye\"\u003e\n        \u003c!-- 眼球 --\u003e\n        \u003cdiv class=\"innerLeftEye\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n    \u003c!-- 右眼 --\u003e\n    \u003cdiv class=\"right eye\"\u003e\n        \u003c!-- 眼球 --\u003e\n        \u003cdiv class=\"innerRightEye\"\u003e\n              \u003c!-- 月牙眼球两端圆弧修饰 --\u003e\n              \u003cdiv class=\"fix\"\u003e\u003c/div\u003e\n         \u003c/div\u003e\n\u003c/div\u003e\n```\n\n```css\n/* QQ head -\u003e eye */\n.eye {\n    position: absolute;\n    width: 44px;\n    height: 66px;\n    border:1px solid #000;\n    border-radius: 50% 50%;\n}\n\n.left.eye {\n    left: 62px;\n    top: 50px;\n}\n\n.right.eye {\n    left: 132px;\n    top: 50px;\n}\n\n.innerLeftEye {\n    position: absolute;\n    top: 20px;\n    left: 20px;\n    width: 18px;\n    height: 24px;\n    border-radius: 50%;\n    border: 1px solid #000;\n}\n\n.innerLeftEye::after {\n    content: \"\";\n    position: absolute;\n    top: 6px;\n    left: 9px;\n    width: 6px;\n    height: 8px;\n    border: 1px solid #000;\n    border-radius: 50%;\n}\n\n.innerRightEye {\n    position: absolute;\n    top: 20px;\n    left: 8px;\n    /* 月牙眼球外轮廓 */\n    width: 18px;\n    height: 24px;\n    border: 1px solid #000;\n    border-top-left-radius: 50% 90%;\n    border-top-right-radius: 50% 90%;\n    border-bottom-left-radius: 50% 10%;\n    border-bottom-right-radius: 50% 10%;\n}\n\n.innerRightEye::after {\n    content: \"\";\n    position: absolute;\n    bottom: -1px;\n\tleft: 4px;\n    /* 月牙眼球内部轮廓 */\n    width: 10px;\n    height: 13px;\n    border: 1px solid #000;\n    border-top-left-radius: 50% 100%;\n\tborder-top-right-radius: 35% 80%;\n}\n\n.fix {\n    position: absolute;\n    top: 17px;\n    width: 4px;\n    height: 4px;\n    border: 1px solid #000;\n    border-radius: 50%;\n}\n\n.fix:after{\n\tcontent: \"\";\n    position: absolute;\n    top: 0;\n\tleft: 14px;\n\twidth: 4px;\n    height: 4px;\n    border: 1px solid #000;\n\tborder-radius: 50%;\n}\n\n```\n\n![image.png](https://upload-images.jianshu.io/upload_images/735083-3baf6a2c78f40932.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n**嘴**\n\n```html\n\u003c!-- 上嘴唇 --\u003e\n\u003cdiv class=\"mouthTopContainer\"\u003e\n    \u003cdiv class=\"mouthTop\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003c!-- 下嘴唇--\u003e\n\u003cdiv class=\"mouthBottomContainer\"\u003e\n    \u003cdiv class=\"mouthBottom\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003c!-- 嘴唇上下层次感-咬合部位  --\u003e\n\u003cdiv class=\"lispContainer\"\u003e\n    \u003cdiv class=\"lips\"\u003e\n            \u003cdiv class=\"lipShadow left\"\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"lipShadow right\"\u003e\n            \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n```css\n/* QQ head -\u003e mouth */\n.mouthTopContainer {\n    /* 定位 */\n    position: absolute;\n    top: 120px;\n\tleft: 39px;\n    width: 158px;\n    height: 29px;\n    overflow: hidden; /* 隐藏超出部分 */\n}\n\n.mouthTop {\n    /* 上嘴唇轮廓 */\n    position: absolute;\n    top: 0;\n\tleft: 0;\n    width: 158px;\n    height: 34px;\n    border: 1px solid #000;\n    border-top-left-radius: 45% 34px;\n\tborder-top-right-radius: 45% 34px;\n}\n\n.mouthBottomContainer {\n    position: absolute;\n    top: 146px;\n\tleft: 39px;\n    width: 158px;\n    height: 15px;\n    overflow: hidden;   /* 隐藏超出部分 */\n}\n\n.mouthBottom {\n    position: absolute;\n    top: -4px;\n\tleft: 0;\n    width: 158px;\n    height: 24px;\n    border: 1px solid #000;\n    border-top:none;\n    border-bottom-left-radius: 45% 24px;\n\tborder-bottom-right-radius: 45% 24px;\n}\n\n/* 嘴唇上下层次感-咬合部位 */\n.lispContainer {\n    /* 定位 */\n    position: absolute;\n\ttop: 146px;\n\tleft: 60px;\n    width: 116px;\n    height: 24px;\n}\n\n.lips {\n    position: absolute;\n\ttop: 0;\n\tleft: 0;\n    width: 116px;\n    height: 24px;\n    border: 1px solid #FFA600;\n    border-bottom-left-radius: 50% 100%;\n\tborder-bottom-right-radius: 50% 100%;\n}\n```\n\n![image.png](https://upload-images.jianshu.io/upload_images/735083-d3cb3a972a0784c7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n![image.png](https://upload-images.jianshu.io/upload_images/735083-3af2faf83990531a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n![image.png](https://upload-images.jianshu.io/upload_images/735083-bc8e527ad3a9efd7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n基本 head 轮廓就是这样了，最后在把右眼眼球部分上个色，来进行层叠覆盖隐藏\n\n```css\n.innerRightEye {\n    position: absolute;\n    top: 20px;\n    left: 8px;\n    /* 月牙眼球外轮廓 */\n    width: 18px;\n    height: 24px;\n    /* border: 1px solid #000; */\n    border-top-left-radius: 50% 90%;\n    border-top-right-radius: 50% 90%;\n    border-bottom-left-radius: 50% 10%;\n    border-bottom-right-radius: 50% 10%;\n    background: black;\n\tbox-shadow: 0 -1px 2px black;\n}\n\n.innerRightEye::after {\n    content: \"\";\n    position: absolute;\n    bottom: -1px;\n\tleft: 4px;\n    /* 月牙眼球内部轮廓 */\n    width: 10px;\n    height: 13px;\n    /* border: 1px solid #000; */\n    border-top-left-radius: 50% 100%;\n    border-top-right-radius: 35% 80%;\n    background: white;\n}\n\n.fix {\n    position: absolute;\n    top: 19px;\n    width: 4px;\n    height: 4px;\n    /* border: 1px solid #000; */\n    border-radius: 50%;\n    background: black;\n}\n\n.fix:after{\n\tcontent: \"\";\n    position: absolute;\n    top: 0;\n\tleft: 14px;\n\twidth: 4px;\n    height: 4px;\n    /* border: 1px solid #000; */\n    border-radius: 50%;\n    background: black;\n}\n```\n\n![image.png](https://upload-images.jianshu.io/upload_images/735083-48fd5a4d0428425c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n\n接下来 开始绘制 QQ 的 body 部分，老样子对 body 进行层次结构划分：围巾、围巾尾、内轮廓、外轮廓\n\n```html\n\u003c!-- 身体 --\u003e\n\u003cdiv class=\"body\"\u003e\n    \u003c!-- 内轮廓 --\u003e\n    \u003cdiv class=\"innerWrapper\"\u003e\n         \u003cdiv class=\"inner\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n    \u003c!-- 外轮廓 --\u003e\n    \u003cdiv class=\"outerWrapper\"\u003e\n          \u003cdiv class=\"outer\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n    \u003c!-- 围巾 --\u003e\n    \u003cdiv class=\"scarf\"\u003e\u003c/div\u003e\n    \u003c!-- 围巾尾 --\u003e\n    \u003cdiv class=\"scarfEnd\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n先各个容器位置布局好\n\n```css\n/* QQ body */\n.body {\n    /* body 容器定位 */\n    position: absolute;\n    top: 135px;\n    left: 48px;\n    width: 326px;\n    height: 300px;\n    /* border: 1px solid #000; */\n}\n\n/* QQ body -\u003e scarf */\n.scarf {\n    position: absolute;\n    top: -2px;\n    left: 34px;\n    width: 258px;\n    height: 110px;\n    border: 1px solid #000;\n    border-top: none;\n}\n\n/* QQ body -\u003e scarfEnd */\n.scarfEnd {\n    position: absolute;\n    left: 74px;\n    top: 90px;\n\twidth: 52px;\n    height: 64px;\n    border: 3px solid black;\n}\n\n/* QQ body -\u003e innerWrapper */\n.innerWrapper {\n    /* innerWrapper 容器定位 */\n    position: absolute;\n    left: 30px;\n\ttop: 76px;\n    width: 280px;\n    height: 200px;\n    border: 1px solid #000;\n}\n\n/* QQ body -\u003e outerWrapper */\n.outerWrapper{\n    /* outerWrapper 容器定位 */\n    position: absolute;\n\ttop: 54px;\n\toverflow: hidden;\n    width: 262px;\n\tleft: 32px;\n    height: 250px;\n    border: 1px solid #000;\n}\n\n```\n![](https://upload-images.jianshu.io/upload_images/735083-5a2f42ca2f280160.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n轮廓线条修正\n\n```css\n/* QQ body */\n.body {\n    /* body 容器定位 */\n    position: absolute;\n    top: 135px;\n    left: 48px;\n    width: 326px;\n    height: 300px;\n    /* border: 1px solid #000; */\n}\n\n/* QQ body -\u003e scarf */\n.scarf {\n    position: absolute;\n    top: -2px;\n    left: 34px;\n    width: 258px;\n    height: 110px;\n    border: 1px solid #000;\n    border-top-left-radius: 30px 34px;\n\tborder-top-right-radius: 38px 34px;\n\tborder-bottom-left-radius: 50% 76px;\n    border-bottom-right-radius: 50% 76px;\n    border-top: none;\n}\n\n/* QQ body -\u003e scarfEnd */\n.scarfEnd {\n    position: absolute;\n    left: 74px;\n    top: 90px;\n\twidth: 52px;\n    height: 64px;\n    border: 3px solid black;\n    border-bottom-left-radius: 50% 43%;\n\tborder-bottom-right-radius: 15px;\n\tborder-top-left-radius: 20% 57%;\n}\n\n/* QQ body -\u003e innerWrapper */\n.innerWrapper {\n    /* innerWrapper 容器定位 */\n    position: absolute;\n    left: 30px;\n\ttop: 76px;\n    width: 280px;\n    height: 200px;\n    overflow: hidden;\n}\n\n.inner {\n    position: absolute;\n    left: 25px;\n\ttop: -71px;\n\twidth: 218px;\n\theight: 210px;\n    border: 1px solid #000;\n    border-radius: 50%;\n}\n\n/* QQ body -\u003e outerWrapper */\n.outerWrapper{\n    /* outerWrapper 容器定位 */\n    position: absolute;\n\ttop: 54px;\n\toverflow: hidden;\n    width: 262px;\n\tleft: 32px;\n    height: 250px;\n}\n\n.outer{\n    position: absolute;\n\ttop: -84px;\n\twidth: 260px;\n    height: 250px;\n    border: 1px solid #000;\n\tborder-radius: 125px;\n}\n\n```\n![](https://upload-images.jianshu.io/upload_images/735083-8b13bbc5a39072f2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n大致轮廓基本已经出来了，还有一些内部线条，等后面在来慢慢绘制。\n\n接下来我们来绘制 hand 部分，安装老路子层次结构划分：左手、右手； 手的样子需要通过两个 div 进行整合才能绘制出来，所以再次划分： 左手上、左手下、右手上、右手下\n\n```html\n\u003c!-- 手 --\u003e\n\u003cdiv class=\"handWrapper\"\u003e\n    \u003cdiv class=\"leftHandTopContainer\"\u003e\n        \u003cdiv class=\"leftHandTop\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"leftHandBottomContainer\"\u003e\n        \u003cdiv class=\"leftHandBottom\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"rightHandTopContainer\"\u003e\n        \u003cdiv class=\"rightHandTop\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"rightHandBottomContainer\"\u003e\n        \u003cdiv class=\"rightHandBottom\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n```css\n/* QQ handWrapper */\n.handWrapper{\n    /* 定位手的起始点 */\n\tposition: absolute;\n\ttop: 219px;\n\tleft: 7px;\n}\n\n/* QQ handWrapper -left */\n.leftHandTopContainer {\n    /* 定位 */\n\tposition: absolute;\n\ttop: 55px;\n\tleft: 50px;\n    width: 118px;\n    height: 26px;\n    border: 1px solid #000;\n\ttransform-origin: bottom left;\n\ttransform: rotate(-70deg);\n}\n\n.leftHandBottomContainer {\n    /* 定位 */\n    position: absolute;\n\ttop: 78px;\n\tleft: 50px;\n\twidth: 100px;\n    height: 30px;\n    border: 1px solid #000;\n\ttransform-origin: top left;\n\ttransform: rotate(-70deg);\n}\n\n/* QQ handWrapper -right */\n.rightHandTopContainer {\n    /* 定位 */\n    position: absolute;\n\ttop: 47px;\n\tleft: 240px;\n    width: 118px;\n    height: 34px;\n    border: 1px solid #000;\n\ttransform-origin: bottom right;\n    transform: rotate(65deg);\n}\n\n.rightHandBottomContainer{\n    /* 定位 */\n    position: absolute;\n\ttop: 81px;\n    left: 248px;\n\twidth: 110px;\n\theight: 58px;\n    border: 1px solid #000;\n\ttransform-origin: top right;\n\ttransform: rotate(90deg);\n}\n\n```\n\n![image.png](https://upload-images.jianshu.io/upload_images/735083-0881a38bf2460989.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n线条轮廓修改\n\n```css\n/* QQ handWrapper */\n.handWrapper{\n    /* 定位手的起始点 */\n\tposition: absolute;\n\ttop: 219px;\n\tleft: 7px;\n}\n\n/* QQ handWrapper -left */\n.leftHandTopContainer {\n    /* 定位 */\n\tposition: absolute;\n\ttop: 55px;\n\tleft: 50px;\n    width: 118px;\n    height: 26px;\n    /* border: 1px solid #000; */\n\ttransform-origin: bottom left;\n    transform: rotate(-70deg);\n    overflow: hidden;\n}\n\n.leftHandTop {\n     /* 上半部分 */\n\twidth: 128px;\n\theight: 54px;\n    border: 1px solid #050346;\n    border-top-left-radius: 44% 38px;\n    border-top-right-radius: 56% 33px;\n}\n\n.leftHandBottomContainer {\n    /* 定位 */\n    position: absolute;\n\ttop: 78px;\n\tleft: 50px;\n\twidth: 100px;\n    height: 30px;\n    /* border: 1px solid #000; */\n\ttransform-origin: top left;\n    transform: rotate(-70deg);\n    overflow: hidden;\n}\n\n.leftHandBottom {\n    position: absolute;\n    top: -26px;\n    width: 128px;\n\theight: 44px;\n    border: 1px solid #050346;\n    border-bottom-left-radius: 48% 20px;\n\tborder-bottom-right-radius: 52% 23px;\n}\n\n/* QQ handWrapper -right */\n.rightHandTopContainer {\n    /* 定位 */\n    position: absolute;\n\ttop: 47px;\n\tleft: 240px;\n    width: 118px;\n    height: 34px;\n    /* border: 1px solid #000; */\n\ttransform-origin: bottom right;\n    transform: rotate(65deg);\n    overflow: hidden;\n}\n\n.rightHandTop {\n    position: absolute;\n    left: -30px;\n    width: 148px;\n\theight: 54px;\n    border: 1px solid #050346;\n    border-top-right-radius: 41% 54px;\n    border-top-left-radius: 59% 48px;\n}\n\n.rightHandBottomContainer{\n    /* 定位 */\n    position: absolute;\n\ttop: 81px;\n    left: 248px;\n\twidth: 110px;\n\theight: 58px;\n    /* border: 1px solid #000; */\n\ttransform-origin: top right;\n    transform: rotate(90deg);\n    overflow: hidden;\n}\n\n.rightHandBottom {\n    position: absolute;\n\ttop: 1px;\n\tleft: 38px;\n    width: 68px;\n\theight: 28px;\n    border: 1px solid #000;\n    border-bottom-right-radius: 100% 40px;\n}\n\n```\n\n![image.png](https://upload-images.jianshu.io/upload_images/735083-a01988e53a12014b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n是不是漂亮很多了， 那快点把脚的部分也完成吧,和手的结构基本类似。\n\n```html\n\u003c!-- 脚 --\u003e\n\u003cdiv class=\"footWrapper\"\u003e\n    \u003cdiv class=\"leftFootTopWrapper\"\u003e\n        \u003cdiv class=\"leftFootTop\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"leftFootBottomWrapper\"\u003e\n        \u003cdiv class=\"leftFootBottom\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"rightFootTopWrapper\"\u003e\n        \u003cdiv class=\"rightFootTop\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"rightFootBottomWrapper\"\u003e\n        \u003cdiv class=\"rightFootBottom\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n基础位置布局\n\n```css\n/* QQ footerWrapper */\n.footWrapper{\n    /* 定位起始点 */\n\tposition: absolute;\n\ttop: 292px;\n    left: 80px;\n    width: 300px;\n    height: 80px;\n    border: 1px solid #000;\n}\n\n/* QQ footerWrapper -\u003e left */\n.leftFootTopWrapper {\n    /* 定位左脚上容器 */\n    position: absolute;\n\ttop: 16px;\n\tleft: -1px;\n    width: 130px;\n    height: 37px;\n    border: 1px solid #000;\n}\n\n.leftFootBottomWrapper {\n    position: absolute;\n    top: 52px;\n\tleft: -1px;\n\twidth: 130px;\n\theight: 38px;\n    border: 1px solid #000;\n}\n\n/* QQ footerWrapper -\u003e right */\n.rightFootTopWrapper {\n    /* 定位左脚上容器 */\n    position: absolute;\n\ttop: 22px;\n\tleft: 134px;\n    width: 130px;\n    height: 38px;\n    border: 1px solid #000;\n}\n\n.rightFootBottomWrapper {\n    position: absolute;\n    top: 52px;\n\tleft: 134px;\n\twidth: 134px;\n    height: 38px;\n    border: 1px solid #000;\n}\n\n```\n\n![](https://upload-images.jianshu.io/upload_images/735083-6da4644949bd9d59.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n轮廓调整\n\n```css\n\n/* QQ footerWrapper */\n.footWrapper{\n    /* 定位起始点 */\n\tposition: absolute;\n\ttop: 292px;\n    left: 80px;\n    width: 300px;\n    height: 80px;\n    /* border: 1px solid #000; */\n}\n\n/* QQ footerWrapper -\u003e left */\n.leftFootTopWrapper {\n    /* 定位左脚上容器 */\n    position: absolute;\n\ttop: 16px;\n\tleft: -1px;\n    width: 130px;\n    height: 37px;\n    /* border: 1px solid #000; */\n    overflow: hidden;\n}\n\n.leftFootTop {\n    position: absolute;\n\ttop: -10px;\n    left: 3px;\n    width: 120px;\n\theight: 60px;\n    border: 4px solid black;\n    border-top-left-radius: 80% 70%;\n}\n\n.leftFootBottomWrapper {\n    position: absolute;\n    top: 52px;\n\tleft: -1px;\n\twidth: 130px;\n\theight: 38px;\n    /* border: 1px solid #000; */\n    overflow: hidden;\n}\n\n.leftFootBottom {\n    position: absolute;\n    top: -30px;\n\tleft: 3px;\n    width: 120px;\n\theight: 60px;\n    border: 4px solid #000;\n    border-top-left-radius: 50% 44%;\n\tborder-top-right-radius: 50% 44%;\n\tborder-bottom-left-radius: 50% 56%;\n\tborder-bottom-right-radius: 50% 56%;\n}\n\n/* QQ footerWrapper -\u003e right */\n.rightFootTopWrapper {\n    /* 定位左脚上容器 */\n    position: absolute;\n\ttop: 22px;\n\tleft: 134px;\n    width: 130px;\n    height: 38px;\n    /* border: 1px solid #000; */\n    overflow: hidden;\n}\n\n.rightFootTop {\n    position: absolute;\n    top: 0px;\n\tleft: 4px;\n    width: 120px;\n\theight: 60px;\n    border: 4px solid black;\n    border-top-right-radius: 32% 65%;\n}\n\n.rightFootBottomWrapper {\n    position: absolute;\n    top: 52px;\n\tleft: 134px;\n\twidth: 134px;\n    height: 38px;\n    /* border: 1px solid #000; */\n    overflow: hidden;\n}\n\n.rightFootBottom {\n    position: absolute;\n    top: -30px;\n\tleft: 3px;\n    width: 120px;\n\theight: 60px;\n    border: 4px solid #000;\n    border-top-left-radius: 50% 56%;\n\tborder-top-right-radius: 50% 56%;\n\tborder-bottom-left-radius: 50% 44%;\n\tborder-bottom-right-radius: 50% 44%;\n}\n\n```\n\n![image.png](https://upload-images.jianshu.io/upload_images/735083-e87099428af2318f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n基本整体框架结构就出来了，开始上色吧。上色的过程可以帮助我们调整z-index，也就是各个模块的重叠层次，遮盖了一些无用的线条和框角。\n\n1. head 开始\n\n```css\n /* QQ head */\n.head {\n    position: absolute;\n    top: 18px;\n    left: 96px;\n    width: 234px;\n    height: 185px;\n    border: 1px solid #000;\n    border-top-left-radius: 117px 117px;\n    border-top-right-radius: 117px 117px;\n    border-bottom-left-radius: 117px 68px;\n    border-bottom-right-radius: 117px 68px;\n    background: #000;\n}\n\n/* QQ head -\u003e eye */\n.eye {\n    position: absolute;\n    width: 44px;\n    height: 66px;\n    border:1px solid #000;\n    border-radius: 50% 50%;\n    background: #fff;\n}\n\n.left.eye {\n    left: 62px;\n    top: 50px;\n}\n\n.right.eye {\n    left: 132px;\n    top: 50px;\n}\n\n.innerLeftEye {\n    position: absolute;\n    top: 20px;\n    left: 20px;\n    width: 18px;\n    height: 24px;\n    border-radius: 50%;\n    border: 1px solid #000;\n    background: #000;\n}\n\n.innerLeftEye::after {\n    content: \"\";\n    position: absolute;\n    top: 6px;\n    left: 9px;\n    width: 6px;\n    z-index: 11;\n    height: 8px;\n    /* border: 1px solid #000; */\n    border-radius: 50%;\n    background: #fff;\n}\n\n.innerRightEye {\n    position: absolute;\n    top: 20px;\n    left: 8px;\n    /* 月牙眼球外轮廓 */\n    width: 18px;\n    height: 24px;\n    /* border: 1px solid #000; */\n    border-top-left-radius: 50% 90%;\n    border-top-right-radius: 50% 90%;\n    border-bottom-left-radius: 50% 10%;\n    border-bottom-right-radius: 50% 10%;\n    background: black;\n    box-shadow: 0 -1px 2px black;\n}\n\n.innerRightEye::after {\n    content: \"\";\n    position: absolute;\n    bottom: -1px;\n\tleft: 4px;\n    /* 月牙眼球内部轮廓 */\n    width: 10px;\n    height: 13px;\n    /* border: 1px solid #000; */\n    border-top-left-radius: 50% 100%;\n    border-top-right-radius: 35% 80%;\n    background: #FFF;\n}\n\n.fix {\n    position: absolute;\n    top: 19px;\n    width: 4px;\n    height: 4px;\n    /* border: 1px solid #000; */\n    border-radius: 50%;\n    background: #000;\n}\n\n.fix:after{\n\tcontent: \"\";\n    position: absolute;\n    top: 0;\n\tleft: 14px;\n\twidth: 4px;\n    height: 4px;\n    /* border: 1px solid #000; */\n    border-radius: 50%;\n    background: black;\n}\n\n/* QQ head -\u003e mouth */\n.mouthTopContainer {\n    /* 定位 */\n    position: absolute;\n    top: 120px;\n    left: 39px;\n    z-index: 1;\n    width: 158px;\n    height: 29px;\n    overflow: hidden; /* 隐藏超出部分 */\n}\n\n.mouthTop {\n    /* 上嘴唇轮廓 */\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    width: 158px;\n    height: 34px;\n    border: 1px solid #FFA600;\n    border-top-left-radius: 45% 34px;\n    border-top-right-radius: 45% 34px;\n    background: #FFA600;\n}\n\n.mouthBottomContainer {\n    position: absolute;\n    top: 146px;\n    left: 39px;\n    z-index: 1;\n    width: 158px;\n    height: 15px;\n    overflow: hidden;   /* 隐藏超出部分 */\n}\n\n.mouthBottom {\n    position: absolute;\n    top: -4px;\n    left: 0;\n    z-index: 1;\n    width: 158px;\n    height: 24px;\n    border: 1px solid #FFA600;\n    border-top:none;\n    border-bottom-left-radius: 45% 24px;\n    border-bottom-right-radius: 45% 24px;\n    background: #FFA600;\n}\n\n/* 嘴唇上下层次感-咬合部位 */\n.lispContainer {\n    /* 定位 */\n    position: absolute;\n\ttop: 146px;\n\tleft: 60px;\n    width: 116px;\n    height: 24px;\n}\n\n.lips {\n    position: absolute;\n\ttop: 0;\n\tleft: 0;\n    width: 116px;\n    height: 24px;\n    border: 1px solid #FFA600;\n    border-bottom-left-radius: 50% 100%;\n    border-bottom-right-radius: 50% 100%;\n    background: #FFA600;\n}\n\n```\n\n![](https://upload-images.jianshu.io/upload_images/735083-3279852d229a27cb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n\n2. body\n\n```css\n/* QQ body */\n.body {\n    /* body 容器定位 */\n    position: absolute;\n    top: 135px;\n    left: 48px;\n    width: 326px;\n    height: 300px;\n    /* border: 1px solid #000; */\n}\n\n/* QQ body -\u003e scarf */\n.scarf {\n    position: absolute;\n    top: -2px;\n    left: 34px;\n    z-index: 5;\n    width: 258px;\n    height: 110px;\n    border: 1px solid #000;\n    border-top-left-radius: 30px 34px;\n\tborder-top-right-radius: 38px 34px;\n\tborder-bottom-left-radius: 50% 76px;\n    border-bottom-right-radius: 50% 76px;\n    border-top: none;\n    background: #FB0009;\n}\n\n/* QQ body -\u003e scarfEnd */\n.scarfEnd {\n    position: absolute;\n    left: 74px;\n    top: 90px;\n\twidth: 52px;\n    height: 64px;\n    border: 3px solid black;\n    border-bottom-left-radius: 50% 43%;\n\tborder-bottom-right-radius: 15px;\n    border-top-left-radius: 20% 57%;\n    background: #FB0009;\n}\n\n/* QQ body -\u003e innerWrapper */\n.innerWrapper {\n    /* innerWrapper 容器定位 */\n    position: absolute;\n    left: 30px;\n\ttop: 76px;\n    width: 280px;\n    height: 200px;\n    overflow: hidden;\n}\n\n.inner {\n    position: absolute;\n    left: 25px;\n\ttop: -71px;\n\twidth: 218px;\n\theight: 210px;\n    border: 1px solid #000;\n    border-radius: 50%;\n    background: #fff;\n}\n\n/* QQ body -\u003e outerWrapper */\n.outerWrapper{\n    /* outerWrapper 容器定位 */\n    position: absolute;\n\ttop: 54px;\n\toverflow: hidden;\n    width: 262px;\n\tleft: 32px;\n    height: 250px;\n}\n\n.outer{\n    position: absolute;\n\ttop: -84px;\n\twidth: 260px;\n    height: 250px;\n    border: 1px solid #000;\n    border-radius: 125px;\n    background: #000;\n}\n```\n![](https://upload-images.jianshu.io/upload_images/735083-3ff41fd4ce75871f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n上色后你会发现，有的图层显示先后顺序不对，需要调整下先后顺序。\n  * head \u003e body\n  * body里（scafEnd \u003e inner \u003e outer）\n\n![image.png](https://upload-images.jianshu.io/upload_images/735083-5ba38d5b1a347adc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n\n3. hand\n\n```css\n/* QQ handWrapper -left */\n.leftHandTopContainer {\n    /* 定位 */\n\tposition: absolute;\n\ttop: 55px;\n\tleft: 50px;\n    width: 118px;\n    height: 26px;\n    /* border: 1px solid #000; */\n\ttransform-origin: bottom left;\n    transform: rotate(-70deg);\n    overflow: hidden;\n}\n\n.leftHandTop {\n     /* 上半部分 */\n\twidth: 128px;\n\theight: 54px;\n    border: 1px solid #050346;\n    border-top-left-radius: 44% 38px;\n    border-top-right-radius: 56% 33px;\n    background: #000;\n}\n\n.leftHandBottomContainer {\n    /* 定位 */\n    position: absolute;\n\ttop: 78px;\n\tleft: 50px;\n\twidth: 100px;\n    height: 30px;\n    /* border: 1px solid #000; */\n\ttransform-origin: top left;\n    transform: rotate(-70deg);\n    overflow: hidden;\n}\n\n.leftHandBottom {\n    position: absolute;\n    top: -26px;\n    width: 128px;\n\theight: 44px;\n    border: 1px solid #050346;\n    border-bottom-left-radius: 48% 20px;\n    border-bottom-right-radius: 52% 23px;\n    background: #000;\n}\n\n/* QQ handWrapper -right */\n.rightHandTopContainer {\n    /* 定位 */\n    position: absolute;\n\ttop: 47px;\n\tleft: 240px;\n    width: 118px;\n    height: 34px;\n    /* border: 1px solid #000; */\n\ttransform-origin: bottom right;\n    transform: rotate(65deg);\n    overflow: hidden;\n}\n\n.rightHandTop {\n    position: absolute;\n    left: -30px;\n    width: 148px;\n\theight: 54px;\n    border: 1px solid #050346;\n    border-top-right-radius: 41% 54px;\n    border-top-left-radius: 59% 48px;\n    background: #000;\n}\n\n.rightHandBottomContainer{\n    /* 定位 */\n    position: absolute;\n\ttop: 81px;\n    left: 248px;\n\twidth: 110px;\n\theight: 58px;\n    /* border: 1px solid #000; */\n\ttransform-origin: top right;\n    transform: rotate(90deg);\n    overflow: hidden;\n}\n\n.rightHandBottom {\n    position: absolute;\n\ttop: 1px;\n\tleft: 38px;\n    width: 68px;\n\theight: 28px;\n    border: 1px solid #000;\n    border-bottom-right-radius: 100% 40px;\n    background: #000;\n}\n\n```\n\n4. footer\n\n```css\n/* QQ footerWrapper */\n.footWrapper{\n    /* 定位起始点 */\n\tposition: absolute;\n\ttop: 292px;\n    left: 80px;\n    width: 300px;\n    height: 80px;\n    /* border: 1px solid #000; */\n}\n\n/* QQ footerWrapper -\u003e left */\n.leftFootTopWrapper {\n    /* 定位左脚上容器 */\n    position: absolute;\n\ttop: 16px;\n\tleft: -1px;\n    width: 130px;\n    height: 37px;\n    /* border: 1px solid #000; */\n    overflow: hidden;\n}\n\n.leftFootTop {\n    position: absolute;\n\ttop: -10px;\n    left: 3px;\n    width: 120px;\n\theight: 60px;\n    border: 4px solid black;\n    border-top-left-radius: 80% 70%;\n    background: #FF9C00;\n}\n\n.leftFootBottomWrapper {\n    position: absolute;\n    top: 52px;\n\tleft: -1px;\n\twidth: 130px;\n\theight: 38px;\n    /* border: 1px solid #000; */\n    overflow: hidden;\n}\n\n.leftFootBottom {\n    position: absolute;\n    top: -30px;\n\tleft: 3px;\n    width: 120px;\n\theight: 60px;\n    border: 4px solid #000;\n    border-top-left-radius: 50% 44%;\n\tborder-top-right-radius: 50% 44%;\n\tborder-bottom-left-radius: 50% 56%;\n    border-bottom-right-radius: 50% 56%;\n    background: #FF9C00;\n}\n\n/* QQ footerWrapper -\u003e right */\n.rightFootTopWrapper {\n    /* 定位左脚上容器 */\n    position: absolute;\n\ttop: 22px;\n\tleft: 134px;\n    width: 130px;\n    height: 38px;\n    /* border: 1px solid #000; */\n    overflow: hidden;\n}\n\n.rightFootTop {\n    position: absolute;\n    top: 0px;\n\tleft: 4px;\n    width: 120px;\n\theight: 60px;\n    border: 4px solid black;\n    border-top-right-radius: 32% 65%;\n    background: #FF9C00;\n}\n\n.rightFootBottomWrapper {\n    position: absolute;\n    top: 52px;\n\tleft: 134px;\n\twidth: 134px;\n    height: 38px;\n    /* border: 1px solid #000; */\n    overflow: hidden;\n}\n\n.rightFootBottom {\n    position: absolute;\n    top: -30px;\n\tleft: 3px;\n    width: 120px;\n\theight: 60px;\n    border: 4px solid #000;\n    border-top-left-radius: 50% 56%;\n\tborder-top-right-radius: 50% 56%;\n\tborder-bottom-left-radius: 50% 44%;\n    border-bottom-right-radius: 50% 44%;\n    background: #FF9C00;\n}\n\n```\n![image.png](https://upload-images.jianshu.io/upload_images/735083-99c72e3873c6d815.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n到了这里基本完成了 90% 了， 剩下的就是线条优化，使 QQ 看起来更有层次感、立体感。\n\n**嘴唇**\n\n嘴巴的形状不够性感、立体；绘制一个斜边三角形，修复嘴唇的层次感。\n\n![斜边三角形](https://upload-images.jianshu.io/upload_images/735083-023166cf198da7d8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n绘制这样一个斜边三角形，步骤分解如图所示：\n\n![步骤分解](https://upload-images.jianshu.io/upload_images/735083-be6e95b7c5f9eb65.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n先是绘制一个普通三角形，通过逆时针旋转得到一个修复三角形，那么相对称的修复三角形可以通过使用rotateY，绕着Y轴旋转180度，来得到。\n\n```html\n\u003c!-- 嘴唇上下层次感 --\u003e\n\u003cdiv class=\"lispContainer\"\u003e\n    \u003cdiv class=\"lips\"\u003e\n        \u003c!-- 左右上下嘴唇咬合阴影  --\u003e\n        \u003cdiv class=\"lipShadow left\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"lipShadow right\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n```css\n/* 嘴唇上下层次感-咬合部位 */\n.lispContainer {\n    /* 定位 */\n    position: absolute;\n\ttop: 146px;\n\tleft: 60px;\n    width: 116px;\n    height: 24px;\n}\n\n.lips {\n    position: absolute;\n\ttop: 0;\n\tleft: 0;\n    width: 116px;\n    height: 24px;\n    border: 1px solid #FFA600;\n    border-bottom-left-radius: 50% 100%;\n    border-bottom-right-radius: 50% 100%;\n    background: #FFA600;\n}\n\n.lipShadow {\n    position: absolute;\n    width: 0px;\n    height: 0px;\n    border-top: 20px solid transparent;\n\tborder-bottom: 20px solid transparent;\n\tborder-right: 8px solid black;\n\ttransform-origin: top right;\n    transform: rotate(-60deg);\n    z-index: 2;\n}\n\n.lipShadow.left {\n    top: 4px;\n    left: -12px;\n    transform: rotate(-60deg);\n}\n\n.lipShadow.right {\n    top: 4px;\n    left: 111px;\n    transform: rotate(60deg) rotateY(180deg);\n}\n\n```\n\n![image.png](https://upload-images.jianshu.io/upload_images/735083-abec1dc060e0f831.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n**围巾**\n\n围脖竟然没折痕，不立体； 通过绘制一个“小尾巴”来进行美化\n\n![小尾巴](https://upload-images.jianshu.io/upload_images/735083-7b31b363591cc7f5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n```css\nborder-right: 6px solid black;\nwidth: 100px;\nheight: 70px;\nborder-bottom-right-radius: 70px 70px;\n```\n当对一个角应用圆角样式，如果这个角相邻的两个border一个有定义而一个无定义，那么绘制的结果就是由粗到细的“小尾巴了”。[在整个绘制过程中，同一个图形它的绘制方法有很多种，例如一个矩形可以用 width x height构成，也可以由border x height(width)构成，甚至可以由border组合(width = height = 0)构成，根据情况选择吧。]\n\n```html\n\u003c!-- 围巾 --\u003e\n\u003cdiv class=\"scarf\"\u003e\n    \u003cdiv class=\"scarfShadow\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"scarfShadowRight\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003c!-- 围巾尾 --\u003e\n\u003cdiv class=\"scarfEnd\"\u003e\n    \u003cdiv class=\"scarfEndShadow\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```css\n/* QQ body -\u003e scarf */\n.scarf {\n    position: absolute;\n    top: -2px;\n    left: 34px;\n    z-index: 5;\n    width: 258px;\n    height: 110px;\n    border: 4px solid #000;\n    border-top-left-radius: 30px 34px;\n\tborder-top-right-radius: 38px 34px;\n\tborder-bottom-left-radius: 50% 76px;\n    border-bottom-right-radius: 50% 76px;\n    border-top: none;\n    background: #FB0009;\n}\n\n.scarfShadowLeft {\n    position: absolute;\n    top: 0px;\n\tleft: 6px;\n\twidth: 60px;\n    height: 70px;\n    /* border: 4px solid #000; */\n    border-top: 6px solid #000;\n\tborder-top-left-radius: 90px 120px;\n    border-top-right-radius: 30px 30px;\n\ttransform: rotate(-79deg);\n}\n\n.scarfShadowRight {\n    position: absolute;\n    top: 8px;\n\tleft: 143px;\n\twidth: 100px;\n    height: 70px;\n    /* border: 4px solid #000; */\n    border-right: 6px solid black;\n\twidth: 100px;\n    border-bottom-right-radius: 70px 70px;\n    border-right: 6px solid black;\n}\n\n/* QQ body -\u003e scarfEnd */\n.scarfEnd {\n    position: absolute;\n    left: 74px;\n    top: 90px;\n\twidth: 52px;\n    height: 64px;\n    border: 3px solid black;\n    border-bottom-left-radius: 50% 43%;\n\tborder-bottom-right-radius: 15px;\n    border-top-left-radius: 20% 57%;\n    background: #FB0009;\n    z-index: 4;\n}\n\n.scarfEndShadow {\n    position: absolute;\n    top: 6px;\n\tleft: 12px;\n\twidth: 20px;\n    height: 20px;\n    /* border: 4px solid #000; */\n    border-top: 6px solid #000;\n    border-top-left-radius: 30px 30px;\n    transform-origin: top right;\n    transform: skewX(4deg) scaleY(1.5) rotate(-60deg);\n}\n```\n\n![image.png](https://upload-images.jianshu.io/upload_images/735083-ed8a80d97ac978cb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n**脚**\n\n也是通过绘制`小尾巴`来进行美化\n\n```html\n\u003c!-- 脚 --\u003e\n\u003cdiv class=\"footWrapper\"\u003e\n    \u003cdiv class=\"leftFootTopWrapper\"\u003e\n        \u003cdiv class=\"leftFootTop\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"leftFootBottomWrapper\"\u003e\n        \u003cdiv class=\"leftFootBottom\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n    \u003c!-- 脚趾间隔线条 --\u003e\n    \u003cdiv class=\"toe left\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"rightFootTopWrapper\"\u003e\n        \u003cdiv class=\"rightFootTop\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"rightFootBottomWrapper\"\u003e\n        \u003cdiv class=\"rightFootBottom\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n    \u003c!-- 脚趾间隔线条 --\u003e\n    \u003cdiv class=\"toe right\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```css\n/* QQ footerWrapper */\n.footWrapper{\n    /* 定位起始点 */\n\tposition: absolute;\n\ttop: 292px;\n    left: 80px;\n    width: 300px;\n    height: 80px;\n    /* border: 1px solid #000; */\n}\n\n.toe {\n    position: absolute;\n\twidth: 25px;\n\theight: 20px;\n    /* border: 4px solid #000; */\n    border-top: 4px solid black;\n    border-top: 4px solid black;\n    border-top-right-radius: 30px 30px;\n    border-top-left-radius: 10px 10px;\n    transform-origin: top left;\n    z-index: 10;\n}\n\n/* QQ footerWrapper -\u003e left */\n.leftFootTopWrapper {\n    /* 定位左脚上容器 */\n    position: absolute;\n\ttop: 16px;\n\tleft: -1px;\n    width: 130px;\n    height: 37px;\n    /* border: 1px solid #000; */\n    overflow: hidden;\n}\n\n.leftFootTop {\n    position: absolute;\n\ttop: -10px;\n    left: 3px;\n    width: 120px;\n\theight: 60px;\n    border: 4px solid black;\n    border-top-left-radius: 80% 70%;\n    background: #FF9C00;\n}\n\n.toe.left {\n    top: 50px;\n    left: 2px;\n    transform: rotate(-45deg);\n}\n\n.leftFootBottomWrapper {\n    position: absolute;\n    top: 52px;\n\tleft: -1px;\n\twidth: 130px;\n\theight: 38px;\n    /* border: 1px solid #000; */\n    overflow: hidden;\n}\n\n.leftFootBottom {\n    position: absolute;\n    top: -30px;\n\tleft: 3px;\n    width: 120px;\n\theight: 60px;\n    border: 4px solid #000;\n    border-top-left-radius: 50% 44%;\n\tborder-top-right-radius: 50% 44%;\n\tborder-bottom-left-radius: 50% 56%;\n    border-bottom-right-radius: 50% 56%;\n    background: #FF9C00;\n}\n\n/* QQ footerWrapper -\u003e right */\n.rightFootTopWrapper {\n    /* 定位左脚上容器 */\n    position: absolute;\n\ttop: 22px;\n\tleft: 134px;\n    width: 130px;\n    height: 38px;\n    /* border: 1px solid #000; */\n    overflow: hidden;\n}\n\n.rightFootTop {\n    position: absolute;\n    top: 0px;\n\tleft: 4px;\n    width: 120px;\n\theight: 60px;\n    border: 4px solid black;\n    border-top-right-radius: 32% 65%;\n    background: #FF9C00;\n}\n\n.toe.right {\n    top: 50px;\n    left: 264px;\n    transform: rotate(45deg) rotateY(180deg);\n}\n\n.rightFootBottomWrapper {\n    position: absolute;\n    top: 52px;\n\tleft: 134px;\n\twidth: 134px;\n    height: 38px;\n    /* border: 1px solid #000; */\n    overflow: hidden;\n}\n\n.rightFootBottom {\n    position: absolute;\n    top: -30px;\n\tleft: 3px;\n    width: 120px;\n\theight: 60px;\n    border: 4px solid #000;\n    border-top-left-radius: 50% 56%;\n\tborder-top-right-radius: 50% 56%;\n\tborder-bottom-left-radius: 50% 44%;\n    border-bottom-right-radius: 50% 44%;\n    background: #FF9C00;\n}\n```\n\n![](https://upload-images.jianshu.io/upload_images/735083-83d108138f73a931.png?imageMogr2/auto-orient/striCimageView2/2/w/1240)\n\n大功告成，一个生动的 QQ 企鹅就绘制完了～\n\n介绍下这个过程中几个比较典型的图形绘制方法：\n\n1、企鹅的眼睛：椭圆，直接设置border-radius:50% 50%; 即可[因为宽高分别为44px和66px，所以也可以这样设定：border-radius: 22px / 33px]\n\n2、围脖的尾部：一个圆角各异的矩形，所以这里需要对几个角分别设定border-radius，微调的结果为\n\n```css\nborder-bottom-left-radius: 50% 43%;\nborder-bottom-right-radius: 15px;\nborder-top-left-radius: 20% 57%;\n```\n3、企鹅的胳膊：手的绘制较为麻烦一点，可以分为上下两个部分，将绘制的结果拼接到一起。那么对于不需要的部分怎么办呢？我们可以将上(下)部分放到一个div(container)中，利用overflow:hidden的属性来截取所要的部分。绘制复杂图形的时候常用的方法就是切割和拼接，将图形切割成一个个简单的小块，通过层叠和旋转变化进行组合。\n\n使用transform:rotate(deg)的时候，优先设定transform-origin属性，会比较方便。设定的点作为中心点，整个图形绕着这个点进行角度变化。例如：transform-origin:bottom left， 使用左下角作为原点。也可以使用具体的像素值和百分比。\n\n在基本的框架线条中比非常多的使用了border-radius用于构造各种曲线条，小企鹅是圆圆胖胖的，:)\n\n[本文参考](http://www.alloyteam.com/2012/10/css3-draw-qq-logo/#prettyPhoto)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuntingl%2Fqq-logo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjuntingl%2Fqq-logo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuntingl%2Fqq-logo/lists"}