資訊專欄INFORMATION COLUMN
摘要：所以一開始讓我看小豬佩奇的時候我是拒絕的，因為你不能讓我看，我就馬上去看，第一我要試一下。其實這道題對于真正看了小豬佩奇的人來說是送分題，就看是不是真的看了。這里說的都是類，這也正是小豬佩奇的構圖精髓，一種手繪風格，而不是標準刻板的線條。
歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術實踐干貨哦~
作者：江志耿 | 騰訊TEG網(wǎng)絡工程師
我是佩奇，哼，這是我的弟弟喬治，呱呱，這是我的媽媽，嚯，這是我的爸爸，嚯~
背景小豬佩奇已經(jīng)火了好一陣了，其實一開始我是不屑的。縱觀小朋友的歷屆動畫，無論喜洋洋、熊出沒還是小兔兵兵、小熊維尼，火過一陣便迅速隕落，回想起來也沒多少沉淀的東西。所以一開始讓我看小豬佩奇的時候我是拒絕的，因為你不能讓我看，我就馬上去看，第一我要試一下。深入了解之后發(fā)現(xiàn)，臥槽，世間竟有如此出塵絕艷的動畫片！正如某個浙江人說過：你不喜歡小豬佩奇那是因為你不了解。
魔性的豬叫聲，任性的踩泥坑。這不是一只簡單的豬，從此路轉粉。我在淘寶買了小豬佩奇貼紙貼上了社會人紋身、電腦桌面壁紙換上了佩奇全家福、買了小豬佩奇公仔。但真正給我工作上帶來積極作用的是我偶然發(fā)掘出來的小豬佩奇調試法。
小豬佩奇調試法：在程序的調試、除錯或測試過程中，操作人耐心地向小豬佩奇解釋每一行程序的作用，以此來激發(fā)靈感與發(fā)現(xiàn)矛盾。
“喜歡一個事情，而這個事情又正好能與工作結合，這是非常幸運的事情。小豬佩奇調試法給我?guī)砹斯ぷ餍实奶嵘矌砹巳斓暮眯那椤！?—— Cristiano Bottlejiang
很多人號稱自己是社會人是佩奇粉，其實大部分都是路人粉。路人粉就是說路過認識成為了粉絲，就比如我回家看到小孩子在看小豬佩奇而知道了這個事。這里我舉三個問題大概可以用來判斷是路人粉還是真愛粉。
1.先來個簡單的，請說出小豬佩奇動畫中的7個角色。
這個問題考察的是人物的基本認識，大部分人都能說出小豬佩奇、弟弟喬治、豬爸爸、豬媽媽、豬爺爺、豬奶奶這六個，所以說出第7個才算過關，比如小馬佩德羅，小羊蘇西，小象艾米麗，小狗丹尼，小貓坎迪，小兔瑞貝卡。
2.來個選擇題，以下哪一句是小豬佩奇的開場動畫臺詞：
A. 你好我是小豬佩奇，哼，這是我的弟弟喬治，呱呱，這是我的媽媽，嚯，這是我的爸爸，嚯~
B. 我是佩奇，哼，這是我的弟弟喬治，呱呱，這是我的媽媽，嚯，這是我的爸爸，嚯~
C. 你好我是小豬佩奇，哼，這是我的弟弟喬治，呱呱，這是我的媽媽，哼，這是我的爸爸，嚯~
D. 我是佩奇，哼，這是我的弟弟喬治，呱呱，這是我的媽媽，哼，這是我的爸爸，嚯~
真愛粉是連開頭動畫都不會跳過而認真看的，答案是B。
3.來個難的，請說出某一集的完整劇情。
其實這道題對于真正看了小豬佩奇的人來說是送分題，就看是不是真的看了。
我必須承認，其實就上面三個問題來答，我只能算路人粉了！
預研找了騰訊視頻上面小豬佩奇第四季紙飛機一集11秒處的畫面作為繪畫模板。出于習慣，我做了一個x軸的水平翻轉。
觀察這個圖像可以發(fā)現(xiàn)，小豬佩奇在構圖基本是各種曲線，類拋物線、類圓、類橢圓、類二次貝塞爾曲線。這里說的都是“類”，這也正是小豬佩奇的構圖精髓，一種手繪風格，而不是標準刻板的線條。在前端技術選型上，畫圖首先想到的是svg、canvas，但它們本身就擅長畫圖，而且網(wǎng)上都有在線編輯svg的工具，這就沒意思了，我想佩奇也不會答應的。于是我想用純粹的css來做，這樣更有挑戰(zhàn)，因為畫圖畫曲線不是css擅長的事情。
難點CSS是沒法直接畫曲線的，曲線救國的辦法就是 border-radius。后面整個繪畫都是圍繞這個屬性展開。
border-radius 的使用通常直接定一個具體像素去控制圓角的大小，比如border-radius:5px;此外可以多帶帶指定水平和垂直半徑，通過“/”分隔，接受長度值或百分比。border-radius:5px; 即border-radius: 5px 5px 5px 5px/ 5px 5px 5px 5px。依次是左上水平半徑，右上，右下，左下，/，左上垂直半徑，右上，右下，左下。
畫 豬頭了解了 border-radius 的用法之后就可以開始實戰(zhàn)了。通過對線條的分段，豬頭如下圖拼湊而成，同時要注意圖層的層級，以及用白色背景和粉色背景來交叉覆蓋填補畫面。難的在于頭部大輪廓的 border-radius 參數(shù)設置。大體繪畫步驟如下：
畫橢圓；
調 border-radius 參數(shù)；
上色；
調角度；
圖層遮蓋補充。
豬頭輪廓樣式代碼：
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;
嘴巴
三個半橢圓依次疊加即可~同樣是圖層遮蓋來實現(xiàn)。
五肢其實畫到這里基本上對 border-radius 的使用很熟練了，參數(shù)的設置也大概心中有數(shù)，剩下的也就工作量的問題了。
合體其余的部分畫法大同小異，五官的擺放要特別注意比例和尺寸，比如身體就很容易因為大小不合適而成了胖佩奇/瘦佩奇，這里可以借助 photoshop 的標尺。同時用取色器拿到佩奇各部分顏色。接下來就是整體的調試了，對我這種繪畫處于小雞啄米水平的人來說，這個才是最難的。
最后合體如下：
跟模板比對一下~
哪個是真的佩奇？
最后演示效果猛戳這里哦！https://www.doverr.com/peppa....
問答
如何驗證CSS顏色名稱？
相關閱讀
CSS3動畫-拋物線運動
CSS實戰(zhàn)訓練之圖片點擊放大
9個獨特的 CSS 背景視覺效果
此文已由作者授權騰訊云+社區(qū)發(fā)布，原文鏈接：https://cloud.tencent.com/dev...
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113294.html
摘要：主要有以下幾個步驟找一張小豬喬治的圖片參考對圖片中的部分進行分解，并逐一實現(xiàn)廢話其實掌握了后，這些步驟都不難了，細心繪制就可以完成啦。我繪制的小豬喬治如圖參考資料用畫小豬佩奇，你就是下一個社會人 概述 之前看了一篇關于用CSS來畫小豬佩奇的文章，抱著鍛煉自己的心態(tài)造了個輪子，畫了個佩奇的小弟喬治，效果可以看這里，源碼在這里。 開發(fā)過程中也讓我對border-radius這個屬性有了更深...
摘要：每天一個社會人實現(xiàn)效果想法之前看到一篇博客，使用繪制出了小豬佩奇，所以自己想試一試，采用純繪制出低配版的小豬佩奇。在布局上，沒有堅持嵌套，導致縮放時位置錯位，如果想實行縮放一致，可采用小豬的頭部嵌套布局實現(xiàn)。 每天一個CSS-社會人 實現(xiàn)效果 showImg(https://segmentfault.com/img/remote/1460000016461611?w=667&h=620...
摘要：于是乎，我建立了這個項目，收錄一些有趣的小程序，便于閱讀和思考。下面是一些列舉一些有趣的內容這是來自編程從入門到實踐中的一個小游戲。用語言實現(xiàn)的編譯器。做的小博客，持續(xù)開發(fā)中這個項目還在不斷豐富中，如果你有什么有趣的分享，歡迎聯(lián)系我。 紙上得來終覺淺，絕知此事要躬行。 這本書或這個視頻看完了，我可以做點什么？編程難道只是命令行打印些東西？該找點什么適合練手的項目來練習練習呢？ 我想可能...
摘要：它指向構造函數(shù)的原型對象這是原型對象上的一個指向構造函數(shù)的屬性。先看代碼的構造函數(shù)創(chuàng)建一個的實例，小豬佩奇敲黑板，劃重點，理解這一句整個問題的關鍵，請多重復幾遍。也就是說小豬佩奇的原型，就是從繼承來的寫成代碼就是這個樣子。 ??沒錯，我就是標題黨！你已經(jīng)成功被我騙進來了。來都來了，那就聊聊再走唄！接下來就聽我一本正經(jīng)地跟你說道說道。 ??Javascript的原型是這門語言的一個重點和...
摘要：變量用的好或不好，和代碼質量有著非常重要的聯(lián)系。簡而言之，匈牙利命名法就是把變量的類型縮寫，放到變量名的最前面。很多情況下，使用匈牙利命名法是個不錯的主意，因為它可以改善你的代碼可讀性，尤其在那些變量眾多同一類型多次出現(xiàn)時。 歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術實踐干貨哦~ 本文由鵝廠優(yōu)文發(fā)表于云+社區(qū)專欄作者：朱雷 | 騰訊IEG高級工程師 『Python 工匠』是什么？...
閱讀 1587·2021-11-22 15:33
閱讀 1728·2021-11-15 18:01
閱讀 664·2021-10-09 09:43
閱讀 2604·2021-09-22 16:03
閱讀 758·2021-09-03 10:28
閱讀 3550·2021-08-11 10:22
閱讀 2718·2019-08-30 15:54
閱讀 1761·2019-08-30 14:21
