剛,
被《啥是佩奇》這支廣告片刷屏了。
佩奇明明是個喜劇角色,
卻看哭了所有人。
▼
《啥是佩奇》???
快過年了
在農村爺爺給城里的小孫子打電話
小孫子說想要“佩奇”
為了滿足小孫子的愿望
爺爺開始滿村子找佩奇
開片爺爺在電話這頭的一段話就很抓人心,
全世界的爺爺都是這樣疼孫兒的,
一下子就讓觀眾有共情的心理。
一句“什么是佩奇?”
鋪墊了爺爺接下來的一段尋找佩奇之路,
最后爺爺找到的佩奇骨絡清奇,
卻是圈主見過的全世界最可愛的小豬佩奇!
不知道大家看完什么感覺
反正我看完是哭了
我看網友們也紛紛留言
說自己哭笑兩重奏
看著爺爺滿村子找佩奇,我有點心疼了。為此我想用代碼來告訴爺爺,啥是佩奇?
找了小豬佩奇的圖片作為模板。
觀察這個圖像可以發現,小豬佩奇在構圖基本是各種曲線,類拋物線、類圓、類橢圓、類二次貝塞爾曲線。這里說的都是“類”,這也正是小豬佩奇的構圖精髓,一種手繪風格,而不是標準刻板的線條。在前端技術選型上,畫圖首先想到的是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 參數設置。大體繪畫步驟如下:
豬頭輪廓樣式代碼:
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>
最后合體如下:
跟模板比對一下~
哪個是真的佩奇?
文將教大家如何用中繼器做漏斗圖,其中包括了功能介紹與制作方法。
在線演示地址:http://demo.axureshop.com/?url=http://cloud.axureshop.com/t7wlih&buyurl=https://www.axureshop.com/a/1017510.html
通過中繼器導入數據,自動生成折線圖。制作的方法請參考我之前寫的:axure教程:折線圖
通過在表格中填寫數據,自動生成環形。制作的方法請參考我之前寫的:axure教程:環形圖
在中繼器中填寫數據,地圖自動顯示效果,制作的方法可以參考我之前寫的:axure教程:中國地圖和世界地圖
通過中繼器導入數據,自動生成排名圖。制作的方法請參考我之前寫的:Axure 教程:用中繼器做排名圖
通過中繼器導入數據,自動生成漏斗圖。制作的方法請參考我之前寫的:Axure 教程:用中繼器做漏斗圖
制作完成后,以后使用方便,僅需簡單填寫中繼器的內容,即可擁有完美的效果,所以強烈推薦給各位使用。
有需要原型的小朋友給我留言哦,謝謝閱讀。
本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
為程序界都知道,最麻煩的還是跟人打交道,對于軟件,跟人交互的地方都會十分麻煩,并不是說技術會復雜,只是要滿足所有人的喜好和口味,就會比較麻煩。
前端就是這么一個職業,專門做跟用戶直接打交道的頁面,用到的語言繁雜,單是基礎的就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
加油吧,薪資馬上再漲一萬。大神記得分享你的代碼哦,為全人類開源。喜歡的給個贊。我去寫代碼了,不廢話了。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。