[閱 #24] 用 CSS 臨摹一個卡通人物來學習 CSS 你覺得怎麼樣

「閱」——JSCourse 旗下欄目，專門推薦我們為大家精心挑選的優質 JavaScript 相關技術內容

隨著 CSS 3 的大量新特性，很多以前只能用圖片做到的事情，現在用純 CSS 也能實現。從用 CSS 畫圓角、再到畫各種多邊形，甚至是更加複雜的圖形乃至動畫，CSS 都可以勝任。

最近小編髮現，國外一位名叫 Arvin 的工程師，用純 CSS 畫了一個 Rick （國外一個很有名的科幻卡通劇《Rick and Morty》的主角）的卡通人物畫像，就長這樣：

上面這個卡通人物是完全用 CSS 來畫來的，要是讓我們從頭開始畫一個估計多少有點困難，但是我們可以通過看他的代碼來學習，這其中你可以學到利用 CSS 如何來布局（比如：你可以看 Rick 的嘴巴是怎麼畫上去的）；如何使用 tranform 屬性實現各種旋轉、位移；如何來畫各種不同的多邊形形狀；以及如何妙用 border （你可以重點看它的白大褂上面的領子）。

代碼和 Demo 都在這裡：https://codepen.io/arvin0731/pen/zPPaOK

考慮到 http://codepen.io 貌似需要梯子才能訪問，如果你不能訪問的話，可以直接看下面的 HTML 和 CSS 代碼（說明：作者用了 SCSS，小編為了你能夠運行起來方便，用 codepen 直接轉化成原生 CSS，所以樣式格式有點亂，但你可以直接在瀏覽器中進行查看），可以把代碼複製到本地，自己瀏覽器打開看看他是怎麼畫出來的，相信可以學到不少東西。

<div class="sky"></div>n<div class="rick">n <div class="names">n <div class="name r"></div>n <div class="name i"></div>n <div class="name c"></div>n <div class="name k"></div>n </div>n <div class="backhairs"></div>n <div class="hairs"></div>n <div class="body">n <div class="belt"></div>n <div class="pants"></div>n <div class="shirtLeft"></div>n <div class="shirtRight"></div>n <div class="leftArm"></div>n <div class="rightArm"></div>n <div class="shoes">n <div class="leftShoe"></div>n <div class="rightShoe"></div>n </div>n </div>n <div class="head">n <div class="eyes">n <div class="right-eye"></div>n <div class="left-eye"></div>n </div>n <div class="mouth">n <div class="olip">n <div class="lip"></div>n <div class="dribble"></div>n <div class="dribble2"></div>n </div>n </div>n </div>n</div>nbody {n margin: 0;n}nn.sky {n position: fixed;n background-color: #aa8eff;n width: 100vw;n height: 100vh;n}nn.rick {n position: relative;n margin: 0 auto;n padding-top: 25px;n width: 800px;n height: 800px;n}n.rick .head {n position: absolute;n left: 0;n right: 20px;n top: 230px;n margin: auto;n width: 10rem;n height: 280px;n background-color: #DDD8D0;n border-radius: 200px;n border-width: 2px;n border-color: #333f42;n border-style: solid;n}n.rick .head:after {n content: ;n position: absolute;n background: #bae0f0;n height: 10px;n width: 100px;n top: 45px;n left: 30px;n border: solid 2px #333f42;n border-radius: 100px;n}n.rick .head:before {n content: ;n position: absolute;n height: 40px;n width: 25px;n background: #ddd8d0;n border: solid 2px #333f42;n border-bottom-right-radius: 50px;n border-top-right-radius: 50px;n border-left: 0;n right: -20px;n top: 150px;n}n.rick .head .eyes {n position: absolute;n top: 25%;n left: 0px;n width: 100%;n height: 80px;n}n.rick .head .eyes .right-eye, .rick .head .eyes .left-eye {n position: relative;n float: left;n box-sizing: border-box;n width: 80px;n height: 80px;n border-radius: 50%;n border: 2px solid #333f42;n background-color: #fff;n}n.rick .head .eyes .right-eye:before, .rick .head .eyes .left-eye:before {n position: absolute;n content: ;n box-sizing: border-box;n width: 76px;n height: 40px;n background: #ddd8d0;n border-top-left-radius: 50px;n border-top-right-radius: 50px;n border-bottom: solid 2px #333f42;n}n.rick .head .eyes .right-eye:after, .rick .head .eyes .left-eye:after {n position: absolute;n content: ;n box-sizing: border-box;n bottom: 25px;n right: 50px;n width: 6px;n height: 6px;n background: #333f42;n border-radius: 50%;n}n.rick .head .mouth {n position: absolute;n left: 0;n right: 0;n margin: 0 auto;n height: 20px;n width: 80%;n border: 2px solid #333f42;n border-radius: 50px;n bottom: 50px;n}n.rick .head .mouth:before {n content: ;n position: absolute;n width: 80%;n height: 30px;n top: -5px;n left: 50%;n transform: translateX(-50%);n background-color: #DDD8D0;n}n.rick .head .mouth .olip {n position: relative;n height: 40px;n width: 80px;n overflow: hidden;n top: 5px;n left: 20%;n}n.rick .head .mouth .olip .lip {n position: absolute;n left: -60px;n width: 200px;n height: 100px;n border-top-left-radius: 50%;n border-top-right-radius: 50%;n border-bottom: 0;n border: solid 2px #333f42;n z-index: 99;n}n.rick .head .mouth .olip .dribble {n position: absolute;n background: #d2edc9;n width: 30px;n height: 18px;n border: solid 2px #333f42;n top: 0px;n left: 30px;n border-top-left-radius: 1px;n border-top-right-radius: 8px;n border-bottom-left-radius: 5px;n border-bottom-right-radius: 10px;n}n.rick .head .mouth .olip .dribble2 {n position: absolute;n background: #d2edc9;n width: 7.5px;n height: 15px;n border: solid 2px #333f42;n top: 19px;n left: 30px;n border-bottom-left-radius: 5px;n border-bottom-right-radius: 10px;n border-top: 0;n}n.rick .hairs, .rick .backhairs {n position: absolute;n left: 0;n right: 0;n top: 188px;n margin: auto;n width: 230px;n height: 230px;n background-color: #b1daee;n}n.rick .hairs:before, .rick .backhairs:before {n content: ;n position: absolute;n left: 0;n right: 0;n width: 100%;n height: 100%;n transform: rotate(-60deg);n background-color: #b1daee;n}n.rick .hairs:after, .rick .backhairs:after {n content: ;n position: absolute;n left: 0;n right: 0;n width: 100%;n height: 100%;n transform: rotate(-120deg);n background-color: #b1daee;n}n.rick .backhairs {n width: 233px;n height: 233px;n border: 3px solid #333f42;n top: 180px;n}n.rick .backhairs:before, .rick .backhairs:after {n border: 3px solid #333f42;n width: 233px;n height: 233px;n}n.rick .body {n width: 100px;n height: 200px;n background-color: #98D5D7;n position: absolute;n top: 480px;n left: 0;n right: 0;n margin: 0 auto;n}n.rick .body .shirtLeft {n width: 50px;n height: 250px;n position: absolute;n left: -30px;n background-color: #fff;n border-top-left-radius: 50px;n border-bottom-right-radius: 50px;n box-shadow: 3px 3px 0 #333f42;n}n.rick .body .shirtLeft:before {n position: absolute;n content: ;n border-bottom-left-radius: 100%;n border-left: 3px solid #666;n top: 25px;n right: 0;n position: absolute;n background-color: white;n width: 10px;n height: 40px;n}n.rick .body .shirtRight {n width: 50px;n height: 250px;n position: absolute;n right: -30px;n background-color: #fff;n border-top-right-radius: 50px;n border-bottom-left-radius: 50px;n box-shadow: 4px 0px 0 #333f42;n}n.rick .body .shirtRight:before {n position: absolute;n content: ;n border-bottom-right-radius: 100%;n border-right: 3px solid #666;n top: 25px;n left: 0;n position: absolute;n background-color: white;n width: 10px;n height: 40px;n}n.rick .body .leftArm {n width: 25px;n height: 180px;n position: absolute;n top: 15px;n left: -40px;n background-color: #fff;n border-top-left-radius: 50px;n box-shadow: 0px 1px 0px 3px #333f42;n}n.rick .body .leftArm:after {n position: absolute;n content: ;n bottom: -25px;n left: -5px;n width: 30px;n height: 30px;n border-radius: 50%;n border: 2px solid #333f42;n background-color: #DDD8D0;n}n.rick .body .rightArm {n width: 25px;n height: 180px;n position: absolute;n top: 15px;n right: -40px;n background-color: #fff;n border-top-right-radius: 50px;n box-shadow: 1px -1px 0px 3px #333f42;n}n.rick .body .rightArm:after {n position: absolute;n content: ;n bottom: -25px;n right: -5px;n width: 30px;n height: 30px;n border-radius: 50%;n border: 2px solid #333f42;n background-color: #DDD8D0;n}n.rick .body .belt {n position: absolute;n width: 100px;n height: 20px;n background-color: #352909;n bottom: 0px;n}n.rick .body .belt:after {n position: absolute;n content: ;n width: 20px;n height: 20px;n background-color: #FDD62F;n left: 50%;n transform: translateX(-50%);n}n.rick .body .pants {n width: 100px;n height: 40px;n background-color: #7d6234;n position: absolute;n bottom: -40px;n box-shadow: -20px 8px 0 4px #333f42, 20px 6px 0 4px #333f42;n}n.rick .body .pants:after {n position: absolute;n content: ;n width: 40px;n height: 100px;n background-color: #7d6234;n left: 0;n bottom: -100px;n}n.rick .body .pants:before {n position: absolute;n content: ;n width: 40px;n height: 100px;n background-color: #7d6234;n right: 0;n bottom: -100px;n}n.rick .shoes {n width: 190px;n height: 80px;n position: absolute;n bottom: -200px;n left: -45px;n text-align: center;n}n.rick .shoes .leftShoe {n position: relative;n display: inline-block;n margin-right: 7px;n width: 80px;n height: 40px;n background-color: #444444;n border-top-left-radius: 100%;n border-top-right-radius: 10%;n border-bottom-left-radius: 20%;n border-bottom-right-radius: 10%;n}n.rick .shoes .leftShoe:after {n position: absolute;n content: ;n width: 40px;n height: 15px;n top: -12px;n right: 0;n background-color: #fff;n}n.rick .shoes .leftShoe:before {n position: absolute;n content: ;n width: 80px;n height: 3px;n bottom: 0;n left: 0;n background-color: wheat;n}n.rick .shoes .rightShoe {n position: relative;n display: inline-block;n width: 80px;n height: 40px;n margin-left: 7px;n background-color: #444444;n border-top-right-radius: 100%;n border-top-left-radius: 10%;n border-bottom-right-radius: 20%;n border-bottom-left-radius: 10%;n}n.rick .shoes .rightShoe:after {n position: absolute;n content: ;n width: 40px;n height: 15px;n top: -12px;n left: 0;n background-color: #fff;n}n.rick .shoes .rightShoe:before {n position: absolute;n content: ;n width: 80px;n height: 3px;n bottom: 0;n left: 0;n background-color: wheat;n}nn.names {n position: absolute;n left: 25%;n top: 10%;n}nn.name {n background: #111;n display: inline-block;n height: .5em;n margin: 1em;n text-indent: -9999em;n width: .5em;n}n.name.r {n box-shadow: -1em -1em 0 #111, -.5em -1em 0 #111, 0 -1em 0 #111, .5em -1em 0 #111, -1em -.5em 0 #111, 1em -.5em 0 #111, -1em 0 0 #111, -.5em 0 0 #111, .5em 0 0 #111, -1em .5em 0 #111, 1em .5em 0 #111, -1em 1em 0 #111, 1em 1em 0 #111;n}n.name.i {n box-shadow: -1em -1em 0 #111, -.5em -1em 0 #111, 0 -1em 0 #111, .5em -1em 0 #111, 1em -1em 0 #111, 0 -.5em 0 #111, 0 .5em 0 #111, -1em 1em 0 #111, -.5em 1em 0 #111, 0 1em 0 #111, .5em 1em 0 #111, 1em 1em 0 #111;n}n.name.c {n background: transparent;n box-shadow: -.5em -1em 0 #111, 0 -1em 0 #111, .5em -1em 0 #111, 1em -1em 0 #111, -1em -.5em 0 #111, -1em 0 0 #111, -1em .5em 0 #111, -.5em 1em 0 #111, 0 1em 0 #111, .5em 1em 0 #111, 1em 1em 0 #111;n}n.name.k {n box-shadow: -1em -1em 0 #111, 1em -1em 0 #111, -1em -.5em 0 #111, .5em -.5em 0 #111, -1em 0 0 #111, -.5em 0 0 #111, -1em .5em 0 #111,.5em .5em 0 #111, -1em 1em 0 #111, 1em 1em 0 #111;n}n

好了，本期就到這裡，我們下期見咯！

關注「jscourse」微信公眾號獲取更多 JS 學習課程和資源。