用CSS畫小豬佩奇，你就是下一個社會人！

我是佩奇，哼，這是我的弟弟喬治，呱呱，這是我的媽媽，嚯，這是我的爸爸，嚯~

小豬佩奇已經火了好一陣了，其實一開始我是不屑的。縱觀小朋友的曆屆動畫，無論喜洋洋、熊出沒還是小兔兵兵、小熊維尼，火過一陣便迅速隕落，回想起來也沒多少沉澱的東西。是以一開始讓我看小豬佩奇的時候我是拒絕的，因為你不能讓我看，我就馬上去看，第一我要試一下。深入了解之後發現，卧槽，世間竟有如此出塵絕豔的卡通片！正如某個浙江人說過：你不喜歡小豬佩奇那是因為你不了解。魔性的豬叫聲，任性的踩泥坑。這不是一隻簡單的豬，從此路轉粉。我在淘寶買了小豬佩奇貼紙貼上了社會人紋身、電腦桌面桌面換上了佩奇全家福、買了小豬佩奇公仔。但真正給我工作上帶來積極作用的是我偶然發掘出來的小豬佩奇調試法。

“喜歡一個事情，而這個事情又正好能與工作結合，這是非常幸運的事情。小豬佩奇調試法給我帶來了工作效率的提升，也帶來了全天的好心情。” —— Cristiano Bottlejiang

很多人号稱自己是社會人是佩奇粉，其實大部分都是路人粉。路人粉就是說路過認識成為了粉絲，就比如我回家看到小孩子在看小豬佩奇而知道了這個事。這裡我舉三個問題大概可以用來判斷是路人粉還是真愛粉。

1.先來個簡單的，請說出小豬佩奇動畫中的7個角色。

這個問題考察的是人物的基本認識，大部分人都能說出小豬佩奇、弟弟喬治、豬爸爸、豬媽媽、豬爺爺、豬奶奶這六個，是以說出第7個才算過關，比如小馬佩德羅，小羊蘇西，小象艾米麗，小狗丹尼，小貓坎迪，小兔瑞貝卡。

2.來個選擇題，以下哪一句是小豬佩奇的開場動畫台詞：

A. 你好我是小豬佩奇，哼，這是我的弟弟喬治，呱呱，這是我的媽媽，嚯，這是我的爸爸，嚯~

B. 我是佩奇，哼，這是我的弟弟喬治，呱呱，這是我的媽媽，嚯，這是我的爸爸，嚯~

C. 你好我是小豬佩奇，哼，這是我的弟弟喬治，呱呱，這是我的媽媽，哼，這是我的爸爸，嚯~

D. 我是佩奇，哼，這是我的弟弟喬治，呱呱，這是我的媽媽，哼，這是我的爸爸，嚯~

真愛粉是連開頭動畫都不會跳過而認真看的，答案是B。

3.來個難的，請說出某一集的完整劇情。

其實這道題對于真正看了小豬佩奇的人來說是送分題，就看是不是真的看了。

我必須承認，其實就上面三個問題來答，我隻能算路人粉了！

預研

找了騰訊視訊上面小豬佩奇第四季紙飛機一集11秒處的畫面作為繪畫模闆。出于習慣，我做了一個x軸的水準翻轉。

觀察這個圖像可以發現，小豬佩奇在構圖基本是各種曲線，類抛物線、類圓、類橢圓、類二次貝塞爾曲線。這裡說的都是“類”，這也正是小豬佩奇的構圖精髓，一種手繪風格，而不是标準刻闆的線條。在前端技術選型上，畫圖首先想到的是svg、canvas，但它們本身就擅長畫圖，而且網上都有線上編輯svg的工具，這就沒意思了，我想佩奇也不會答應的。于是我想用純粹的css來做，這樣更有挑戰，因為畫圖畫曲線不是css擅長的事情。

難點

CSS是沒法直接畫曲線的，曲線救國的辦法就是 border-radius。後面整個繪畫都是圍繞這個屬性展開。

border-radius 的使用通常直接定一個具體像素去控制圓角的大小，比如border-radius:5px;此外可以單獨指定水準和垂直半徑，通過“/”分隔，接受長度值或百分比。border-radius:5px; 即border-radius: 5px 5px 5px 5px/ 5px 5px 5px 5px。依次是左上水準半徑，右上，右下，左下，/，左上垂直半徑，右上，右下，左下。

畫

豬頭

了解了 border-radius 的用法之後就可以開始實戰了。通過對線條的分段，豬頭如下圖拼湊而成，同時要注意圖層的層級，以及用白色背景和粉色背景來交叉覆寫填補畫面。難的在于頭部大輪廓的 border-radius 參數設定。大體繪畫步驟如下：

1. 畫橢圓；
2. 調 border-radius 參數；
3. 上色；
4. 調角度；
5. 圖層遮蓋補充。

豬頭輪廓樣式代碼：

position: absolute;
    z-index: 100;
    box-sizing: border-box;
    width: 300px;
    height: 200px;
    top: 100px;
    left: 100px;
    border-radius: 92% 50% 50% 50%/ 87% 80% 68% 50%;
    border: 6px solid #ef96c2;
    background-color: #ffb3da;
    transform: rotate(30deg);
    transform-origin: left top;                

嘴巴

三個半橢圓依次疊加即可~同樣是圖層遮蓋來實作。

五肢

其實畫到這裡基本上對 border-radius 的使用很熟練了，參數的設定也大概心中有數，剩下的也就工作量的問題了。

合體

其餘的部分畫法大同小異，五官的擺放要特别注意比例和尺寸，比如身體就很容易因為大小不合适而成了胖佩奇/瘦佩奇，這裡可以借助 photoshop 的标尺。同時用取色器拿到佩奇各部分顔色。接下來就是整體的調試了，對我這種繪畫處于小雞啄米水準的人來說，這個才是最難的。

<div class="pig_container">
    <!-- 尾巴 -->
    <div class="tail_left"></div>
    <div class="tail_right"></div>
    <div class="tail_blank"></div>
    <div class="tail_middle"></div>
    <div class="tail_circle"></div>
    <!-- 底部陰影 -->
    <div class="pig_shadow"></div>
    <!-- 左腳 -->
    <div class="left_foot"></div>
    <div class="left_foot right_foot"></div>
    <!-- 左鞋 -->
    <div class="left_shoes"></div>
    <div class="left_shoes right_shoes"></div>
    <!-- 左手 -->
    <div>
        <div class="hand_left_top"></div>
        <div class="hand_left_bottom"></div>
        <div class="hand_left_middle"></div>
    </div>
    <!-- 身體 -->
    <div class="pig_body_bottom"></div>
    <!-- 右手 -->
    <div>
        <div class="hand_right_top"></div>
        <div class="hand_right_bottom"></div>
        <div class="hand_right_middle"></div>
    </div>

    <!-- 豬頭 -->
    <div>
        <!-- 耳朵 -->
        <div class="ear_left"></div>
        <div class="ear_right"></div>
        <div class="pig_head">
            <div class="pig_head_white_left_bottom"></div>
            <div class="pig_head_white_left_top"></div>
        </div>
        <!-- 鼻子 -->
        <div class="pig_nose"></div>
        <!-- 下巴 -->
        <div class="pig_jaw"></div>
        <div class="pig_jaw_right"></div>
        <div class="pig_nose_bottom"></div>
        <!-- 鼻孔 -->
        <div class="nose_kong_left"></div>
        <div class="nose_kong_right"></div>
        <!-- 左眼 -->
        <div class="left_eye">
            <div class="left_eye_bg"></div>
            <div class="left_eye_ball"></div>
            <div class="left_eye_border"></div>
        </div>
        <!-- 右眼 -->
        <div class="right_eye">
            <div class="right_eye_bg"></div>
            <div class="right_eye_ball"></div>
            <div class="right_eye_border"></div>
        </div>
        <!-- 嘴巴 -->
        <div class="mouth">
            <div class="mouth_bottom"></div>
            <div class="mouth_middle"></div>
            <div class="mouth_top"></div>
        </div>
        <!-- 臉頰 -->
        <div class="face"></div>
    </div>
</div>                

最後合體如下：

哪個是真的佩奇？哈哈哈哈社會社會~

最後還是要推薦下小編的前端學習群:330336289，邀請碼（聯盟），不管你是小白還是大牛，小編我都歡迎，不定期分享幹貨，包括小編自己整理的一份2018最新的前端和0基礎入門教程，歡迎初學和進階中的小夥伴。每天晚上20:00都會開直播給大家分享前端知識和路線方法，群裡會不定期更新最新的教程和學習方法，大家都是學習前端的，或是轉行，或是大學生，還有工作中想提升自己能力的前端黨，如果你是正在學習前端的小夥伴可以加入學習。最後祝所有程式員都能夠走上人生巅峰，讓代碼将夢想照進現實，非常适合新手學習，有不懂的問題可以随時問我，工作不忙的時候希望可以給大家解惑