人才啊！鵝廠程序猿居然用CSS畫出小豬佩奇

科技 05-19

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

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

▌背景

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

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

壁紙

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

小豬佩奇調試法

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

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

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

來個選擇題，以下哪一句是小豬佩奇的開場動畫台詞：A. 你好我是小豬佩奇，哼，這是我的弟弟喬治，呱呱，這是我的媽媽，嚯，這是我的爸爸，嚯~B. 我是佩奇，哼，這是我的弟弟喬治，呱呱，這是我的媽媽，嚯，這是我的爸爸，嚯~C. 你好我是小豬佩奇，哼，這是我的弟弟喬治，呱呱，這是我的媽媽，哼，這是我的爸爸，嚯~D. 我是佩奇，哼，這是我的弟弟喬治，呱呱，這是我的媽媽，哼，這是我的爸爸，嚯~真愛粉是連開頭動畫都不會跳過而認真看的，答案是B。

來個難的，請說出某一集的完整劇情。其實這道題對於真正看了小豬佩奇的人來說是送分題，就看是不是真的看了。

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

▌預研

找了騰訊視頻上面小豬佩奇第四季紙飛機一集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 參數設置。大體繪畫步驟如下：

畫橢圓；

調 border-radius 參數；

上色；

調角度；

圖層遮蓋補充。

豬頭

豬頭輪廓樣式代碼：

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;