設計達人

愛設計，愛分享。

HTML & CSS ? 2015年度 CodePen Top 100 代碼片段

2015年度 CodePen Top 100 代碼片段

1月 29, 2016 發表于: HTML & CSS, 優秀設計資源, 前端開發. 評論 (2)

Sponsor

代碼筆（CodePen）有很多出眾的前代碼片段，設計師或喜歡前端的人員可以都可能常去那邊尋找靈感或學習一些代碼的運用。最近CodePen放出2015年度最熱門的100個代碼片段，很多代碼確實很贊，大家不要錯過哦，下面我們篩選幾個給大家欣賞。

codepen-top-100
截圖畫自 Top18

注：以下代碼內容以iframe形式嵌入，RSS訂閱用戶可能無法正常查看真實效果，請到設計達人網站查看。

加載稍慢，想看好東西，請耐心等待。

Top 1: Chill the lion

很可愛的篩子，按住鼠標左鍵風車會轉動哦。

See the Pen <a >Chill the lion</a> by Karim Maaloul (<a >@Yakudoo</a>) on <a >CodePen</a>.<br />

Top 2: pen#PwLXXP

用代碼寫的一個教學視頻教程，一邊code，一邊繪制一個心形圖案。

See the Pen <a >pen#PwLXXP</a> by Jake Albaugh (<a >@jakealbaugh</a>) on <a >CodePen</a>.<br />

Top 3: #DaftPunKonsole

一個小游戲，但沒研究出怎么玩？連成一個句子嗎？

See the Pen <a >#DaftPunKonsole</a> by Malik Dellidj (<a >@kowlor</a>) on <a >CodePen</a>.<br />

Top 4: Elastic SVG Sidebar Material Design

一個SVG側邊欄，那個彈性動畫很NICE.

See the Pen <a >Elastic SVG Sidebar Material Design</a> by Nikolay Talanov (<a >@suez</a>) on <a >CodePen</a>.<br />

Top 5: 10 stylish hover effects with less

10個文字HOVER特效，那個像游覽一樣的效果場景很適當。

See the Pen <a >10 stylish hover effects with less</a> by Renan C. Araujo (<a >@caraujo</a>) on <a >CodePen</a>.<br />

Top 6: Gooey Menu

菜單效果

See the Pen <a >Gooey Menu</a> by Lucas Bebber (<a >@lbebber</a>) on <a >CodePen</a>.<br />

Top 7: ·● MOTION for the web ●·

文字動畫，字好看，動畫也好看。

See the Pen <a >·● MOTION for the web ●·</a> by LegoMushroom (<a >@sol0mka</a>) on <a >CodePen</a>.<br />

Top 8: 10 stunning hover effects with scss

10個文字應用特效

See the Pen <a >10 stunning hover effects with scss</a> by Renan C. Araujo (<a >@caraujo</a>) on <a >CodePen</a>.<br />

Top 9: Bubble ? Layout

See the Pen <a >·?● Bubble ? Layout ●?·</a> by LegoMushroom (<a >@sol0mka</a>) on <a >CodePen</a>.<br />

Top 10: Flipside

這個彈窗的交互很贊呢。

See the Pen <a >Flipside</a> by Hakim El Hattab (<a >@hakimel</a>) on <a >CodePen</a>.<br />

小編覺得TOP10并不是最好的，在其它代碼片段中也有很多驚艷或者實用的案例，請前往Codepen網站查看。

網站名稱：The most hearted of 2015
網站地址：http://codepen.io/2015/popular/pens/

你也可以查看2014年的TOP100代碼：「2014年Codepen上最熱門的100個code&CSS片段代碼」

推薦：查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流：為設計新人提供的設計交流群，請加入UI設計交流群，分享經驗、接單、求職、聊設計。

贊助商鏈接

贊助商鏈接

設計達人微信交流社區：shejidaren888

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。

« 26個漂亮的移動端注冊/登錄界面設計作品

2016你一定要試試這8款原型設計工具 »

+ 添加評論2 Responses to “2015年度 CodePen Top 100 代碼片段”

SeanTam - 回復

2016 年 02 月 26 日下午 5:41

top3 其實是draft&punk 的一首歌，按鍵是由音效的，按得好就能成歌曲，可惜作者把音效去掉了
Louis - 回復

2016 年 02 月 25 日下午 5:15

Bravo~

{ 發表評論 }

↑

``

一级在线观看视频免费播放,一级在线看片免费,一级在线毛片毛片,一级在线网站免费看,一级真人a做片性视频直播