成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

Snailclimb / 1568人閱讀

摘要：所以一開始讓我看小豬佩奇的時(shí)候我是拒絕的，因?yàn)槟悴荒茏屛铱?，我就馬上去看，第一我要試一下。其實(shí)這道題對于真正看了小豬佩奇的人來說是送分題，就看是不是真的看了。這里說的都是類，這也正是小豬佩奇的構(gòu)圖精髓，一種手繪風(fēng)格，而不是標(biāo)準(zhǔn)刻板的線條。

歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~

作者：江志耿 | 騰訊TEG網(wǎng)絡(luò)工程師

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

背景

小豬佩奇已經(jīng)火了好一陣了，其實(shí)一開始我是不屑的?？v觀小朋友的歷屆動(dòng)畫，無論喜洋洋、熊出沒還是小兔兵兵、小熊維尼，火過一陣便迅速隕落，回想起來也沒多少沉淀的東西。所以一開始讓我看小豬佩奇的時(shí)候我是拒絕的，因?yàn)槟悴荒茏屛铱矗揖婉R上去看，第一我要試一下。深入了解之后發(fā)現(xiàn)，臥槽，世間竟有如此出塵絕艷的動(dòng)畫片！正如某個(gè)浙江人說過：你不喜歡小豬佩奇那是因?yàn)槟悴涣私狻?/p>

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

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

“喜歡一個(gè)事情，而這個(gè)事情又正好能與工作結(jié)合，這是非常幸運(yùn)的事情。小豬佩奇調(diào)試法給我?guī)砹斯ぷ餍实奶嵘?，也帶來了全天的好心情。?—— Cristiano Bottlejiang

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

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

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

3.來個(gè)難的，請說出某一集的完整劇情。
其實(shí)這道題對于真正看了小豬佩奇的人來說是送分題，就看是不是真的看了。

我必須承認(rèn)，其實(shí)就上面三個(gè)問題來答，我只能算路人粉了！

預(yù)研

找了騰訊視頻上面小豬佩奇第四季紙飛機(jī)一集11秒處的畫面作為繪畫模板。出于習(xí)慣，我做了一個(gè)x軸的水平翻轉(zhuǎn)。

觀察這個(gè)圖像可以發(fā)現(xiàn)，小豬佩奇在構(gòu)圖基本是各種曲線，類拋物線、類圓、類橢圓、類二次貝塞爾曲線。這里說的都是“類”，這也正是小豬佩奇的構(gòu)圖精髓，一種手繪風(fēng)格，而不是標(biāo)準(zhǔn)刻板的線條。在前端技術(shù)選型上，畫圖首先想到的是svg、canvas，但它們本身就擅長畫圖，而且網(wǎng)上都有在線編輯svg的工具，這就沒意思了，我想佩奇也不會答應(yīng)的。于是我想用純粹的css來做，這樣更有挑戰(zhàn)，因?yàn)楫媹D畫曲線不是css擅長的事情。

難點(diǎn)

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

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

畫 豬頭

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

畫橢圓；

調(diào) border-radius 參數(shù)；

上色；

調(diào)角度；

圖層遮蓋補(bǔ)充。

豬頭輪廓樣式代碼：

    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;
嘴巴

三個(gè)半橢圓依次疊加即可~同樣是圖層遮蓋來實(shí)現(xiàn)。

五肢

其實(shí)畫到這里基本上對 border-radius 的使用很熟練了，參數(shù)的設(shè)置也大概心中有數(shù)，剩下的也就工作量的問題了。

合體

其余的部分畫法大同小異，五官的擺放要特別注意比例和尺寸，比如身體就很容易因?yàn)榇笮〔缓线m而成了胖佩奇/瘦佩奇，這里可以借助 photoshop 的標(biāo)尺。同時(shí)用取色器拿到佩奇各部分顏色。接下來就是整體的調(diào)試了，對我這種繪畫處于小雞啄米水平的人來說，這個(gè)才是最難的。

最后合體如下：

跟模板比對一下~

哪個(gè)是真的佩奇？

最后

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

問答
如何驗(yàn)證CSS顏色名稱？
相關(guān)閱讀
CSS3動(dòng)畫-拋物線運(yùn)動(dòng)
CSS實(shí)戰(zhàn)訓(xùn)練之圖片點(diǎn)擊放大
9個(gè)獨(dú)特的 CSS 背景視覺效果

此文已由作者授權(quán)騰訊云+社區(qū)發(fā)布，原文鏈接：https://cloud.tencent.com/dev...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/113294.html

相關(guān)文章

  • 小豬喬治和border-radius

    摘要：主要有以下幾個(gè)步驟找一張小豬喬治的圖片參考對圖片中的部分進(jìn)行分解，并逐一實(shí)現(xiàn)廢話其實(shí)掌握了后，這些步驟都不難了，細(xì)心繪制就可以完成啦。我繪制的小豬喬治如圖參考資料用畫小豬佩奇，你就是下一個(gè)社會人 概述 之前看了一篇關(guān)于用CSS來畫小豬佩奇的文章，抱著鍛煉自己的心態(tài)造了個(gè)輪子，畫了個(gè)佩奇的小弟喬治，效果可以看這里，源碼在這里。 開發(fā)過程中也讓我對border-radius這個(gè)屬性有了更深...

    guqiu 評論0 收藏0

  • 每天堅(jiān)持一個(gè)CSS——社會人

    摘要：每天一個(gè)社會人實(shí)現(xiàn)效果想法之前看到一篇博客，使用繪制出了小豬佩奇，所以自己想試一試，采用純繪制出低配版的小豬佩奇。在布局上，沒有堅(jiān)持嵌套，導(dǎo)致縮放時(shí)位置錯(cuò)位，如果想實(shí)行縮放一致，可采用小豬的頭部嵌套布局實(shí)現(xiàn)。 每天一個(gè)CSS-社會人 實(shí)現(xiàn)效果 showImg(https://segmentfault.com/img/remote/1460000016461611?w=667&h=620...

    Eidesen 評論0 收藏0

  • JustDoIt：立刻開始你的編程之旅

    摘要：于是乎，我建立了這個(gè)項(xiàng)目，收錄一些有趣的小程序，便于閱讀和思考。下面是一些列舉一些有趣的內(nèi)容這是來自編程從入門到實(shí)踐中的一個(gè)小游戲。用語言實(shí)現(xiàn)的編譯器。做的小博客，持續(xù)開發(fā)中這個(gè)項(xiàng)目還在不斷豐富中，如果你有什么有趣的分享，歡迎聯(lián)系我。 紙上得來終覺淺，絕知此事要躬行。 這本書或這個(gè)視頻看完了，我可以做點(diǎn)什么？編程難道只是命令行打印些東西？該找點(diǎn)什么適合練手的項(xiàng)目來練習(xí)練習(xí)呢？ 我想可能...

    arashicage 評論0 收藏0

  • 用小豬佩奇說明Javascript的原型和原型鏈

    摘要：它指向構(gòu)造函數(shù)的原型對象這是原型對象上的一個(gè)指向構(gòu)造函數(shù)的屬性。先看代碼的構(gòu)造函數(shù)創(chuàng)建一個(gè)的實(shí)例，小豬佩奇敲黑板，劃重點(diǎn)，理解這一句整個(gè)問題的關(guān)鍵，請多重復(fù)幾遍。也就是說小豬佩奇的原型，就是從繼承來的寫成代碼就是這個(gè)樣子。 ??沒錯(cuò)，我就是標(biāo)題黨！你已經(jīng)成功被我騙進(jìn)來了。來都來了，那就聊聊再走唄！接下來就聽我一本正經(jīng)地跟你說道說道。 ??Javascript的原型是這門語言的一個(gè)重點(diǎn)和...

    vibiu 評論0 收藏0

  • Python 工匠：善用變量來改善代碼質(zhì)量

    摘要：變量用的好或不好，和代碼質(zhì)量有著非常重要的聯(lián)系。簡而言之，匈牙利命名法就是把變量的類型縮寫，放到變量名的最前面。很多情況下，使用匈牙利命名法是個(gè)不錯(cuò)的主意，因?yàn)樗梢愿纳颇愕拇a可讀性，尤其在那些變量眾多同一類型多次出現(xiàn)時(shí)。 歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~ 本文由鵝廠優(yōu)文發(fā)表于云+社區(qū)專欄作者：朱雷 | 騰訊IEG高級工程師 『Python 工匠』是什么？...

    seanHai 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<