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

歡迎大家前往騰訊雲+社區，獲取更多騰訊海量技術實踐干貨哦~

作者：江志耿 | 騰訊TEG網絡工程師

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

背景

小豬佩奇已經火了好一陣了，其實一開始我是不屑的。縱觀小朋友的歷屆動畫，無論喜洋洋、熊出沒還是小兔兵兵、小熊維尼，火過一陣便迅速隕落，回想起來也沒多少沉淀的東西。所以一開始讓我看小豬佩奇的時候我是拒絕的，因為你不能讓我看，我就馬上去看，第一我要試一下。深入了解之后發現，卧槽，世間竟有如此出塵絕艷的動畫片！正如某個浙江人說過：你不喜歡小豬佩奇那是因為你不了解。

魔性的豬叫聲，任性的踩泥坑。這不是一只簡單的豬，從此路轉粉。我在淘寶買了小豬佩奇貼紙貼上了社會人紋身、電腦桌面壁紙換上了佩奇全家福、買了小豬佩奇公仔。但真正給我工作上帶來積極作用的是我偶然發掘出來的小豬佩奇調試法。

小豬佩奇調試法：在程序的調試、除錯或測試過程中，操作人耐心地向小豬佩奇解釋每一行程序的作用，以此來激發靈感與發現矛盾。

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

最后合體如下：

跟模板比對一下~

哪個是真的佩奇？

最后

演示效果猛戳這里哦！https://www.doverr.com/peppa.html

 

問答

如何驗證CSS顏色名稱？

相關閱讀

CSS3動畫-拋物線運動

CSS實戰訓練之圖片點擊放大

9個獨特的 CSS 背景視覺效果

 

此文已由作者授權騰訊雲+社區發布，原文鏈接：https://cloud.tencent.com/developer/article/1128472?fromSource=waitui