剛，

被《啥是佩奇》這支廣告片刷屏了。

佩奇明明是個喜劇角色，

卻看哭了所有人。

▼

《啥是佩奇》？？？

快過年了

在農村爺爺給城里的小孫子打電話

小孫子說想要“佩奇”

為了滿足小孫子的愿望

爺爺開始滿村子找佩奇

開片爺爺在電話這頭的一段話就很抓人心，

全世界的爺爺都是這樣疼孫兒的，

一下子就讓觀眾有共情的心理。

一句“什么是佩奇？”

鋪墊了爺爺接下來的一段尋找佩奇之路，

最后爺爺找到的佩奇骨絡清奇，

卻是圈主見過的全世界最可愛的小豬佩奇！

不知道大家看完什么感覺

反正我看完是哭了

我看網友們也紛紛留言

說自己哭笑兩重奏

看著爺爺滿村子找佩奇，我有點心疼了。為此我想用代碼來告訴爺爺，啥是佩奇？

找了小豬佩奇的圖片作為模板。

觀察這個圖像可以發現，小豬佩奇在構圖基本是各種曲線，類拋物線、類圓、類橢圓、類二次貝塞爾曲線。這里說的都是“類”，這也正是小豬佩奇的構圖精髓，一種手繪風格，而不是標準刻板的線條。在前端技術選型上，畫圖首先想到的是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>

最后合體如下：

跟模板比對一下~

哪個是真的佩奇？

為程序界都知道，最麻煩的還是跟人打交道，對于軟件，跟人交互的地方都會十分麻煩，并不是說技術會復雜，只是要滿足所有人的喜好和口味，就會比較麻煩。

前端就是這么一個職業，專門做跟用戶直接打交道的頁面，用到的語言繁雜，單是基礎的就css，js，html。然后再加十幾個框架，什么jQuery,Angularjs,easy UI 等等吧。

如果哪天想分享個代碼，會不會很不方便，好不容易有個github了，還不能看界面。不能看界面那怎么能突顯前端的高大上?

我希望的是，首先免費，然后可以分享代碼，在線編輯代碼，編輯完一鍵分享，別人打開就能看到我所有的代碼和界面效果，然后最好在加一個文章說明，或者是評論。

小編今天就發現這么一個免費的分享網站，簡直不是一般的好用。

提前聲明，我可不是給他打廣告，只是覺得好東西就要分享，好代碼就要開源。也許會給正在開發的你提供一個很好的分享自己idea的途徑呢。

上圖：

打開是這樣的，runjs，四個模塊，左上寫html，左下寫js代碼，右上寫css，右下是預覽。界面風格跟webStorm想似。可以黑白兩種色互換。簡直跟本地的idea一樣。

可以只打開html代碼全屏編輯。

也可以只打開js代碼，全屏編輯。

同樣可以全屏編輯css代碼。

也可以這樣，左右兩個屏編寫，就跟平時用的idea一樣。

或是這樣

運行效果，其實是可以動的，我比較懶都沒截一個動態圖。湊乎看吧，想想自己的寫的炫酷特效，放在這里，一個鏈接就能給大家看到。直接演示，挺好吧。

最好用的是這里，前端是個麻煩的活，因為：框架太多，多的不知道該用什么好。我是后端程序員，偶爾會頂一下前端的空缺，寫幾行前端代碼。所以深深同情前端開發者。下邊這張圖就基本涵蓋了所有常用的框架了。而且支持最新的h5，angularjs等等。

當然，編碼沒有快捷鍵怎么行，F1看幫助文檔，是個彈窗。

別問我是怎么知道的，去國外論壇看大神們的代碼，然后鏈接就是分享在這，代碼，效果，演示一次性都看到了，分分鐘學會編程思路，問題迎刃而解。看到好的東西我就喜歡分享一下，最后附帶網站鏈接：http://runjs.cn/code

加油吧，薪資馬上再漲一萬。大神記得分享你的代碼哦，為全人類開源。喜歡的給個贊。我去寫代碼了，不廢話了。