對于前端開發(fā)者而言，CodePen 一直是盛產(chǎn)想法與創(chuàng)意的圣地。它能夠以在線形式，將前端代碼編輯與展示。同時，你還可以與全球眾多的開發(fā)者們交流想法、分享你的作品。
今天，程小獅在 CodePen 上也專門挑選了近期熱門的前端項目，與前端er、設(shè)計師們分享。相信，這些優(yōu)秀的作品，會讓你耳目一新，或許還能帶給你不少靈感呢！
Have Fun！
-
動畫視差效果
--
作者：Ana Travas
使用 jQuery 插件創(chuàng)建視差效果，并用 CSS 動畫制作的閃爍與流星。
項目地址：傳送門
-
日出/日落動畫
--
作者：David Khourshid
純 CSS 還原 Dribbble 上 Denys Boldyriev 和 Andrey Pixy 所設(shè)計的日出/日落動畫效果，目前只能在 Chrome 瀏覽器中運行。
項目地址：傳送門
-
Moko's lost!
--
作者：Brook Jordan
利用 CSS 與 JS 實現(xiàn)的404頁面——吉祥物 TradeGecko 的迷失，這風(fēng)格簡直萌萌噠！
項目地址：傳送門
-
純 CSS 按鈕提示框
--
作者：Samuel Janes
純 CSS 實現(xiàn)的4款按鈕提示框，分別為藍色、紅色、綠色與紫色。
項目地址：傳送門
-
可愛的狐貍
--
作者：Marcela
純 CSS 實現(xiàn) Dribbble 上可愛狐貍圖標。
項目地址：傳送門
-
SVG/ReactJS 實現(xiàn)的數(shù)學(xué)模型
--
作者：Sten Hougaard
這位作者熱衷于通過數(shù)學(xué)的方式來生成圖形。他使用了 ReactJS 生成了一些非常有趣的 SVG 圖形，并且給出了可以自由調(diào)節(jié)的部分示例。大家來感受下。
項目地址：傳送門
-
滾動 LOGO 效果
--
作者：Spencer Goldade
CSS 與 JS 實現(xiàn)的下拉滾動 LOGO 效果。
項目地址：傳送門
-
Merry Chris-morph!
--
作者：Chris Gannon
又快到了，一年一度的圣誕節(jié)了。作者參照了由 Dmitriy Miroliubov 設(shè)計的圖標，利用 CSS 與 JS 實現(xiàn)了圣誕動畫效果。是不是很可愛呢？
項目地址：傳送門
-
臥推
--
作者：Akhil Sai Ram
純 CSS 實現(xiàn)的臥推效果。小獅只想說，還蠻逼真的嘛！
項目地址：傳送門
-
tancerzyk CSS
--
作者：qpoziomek
純 CSS 實現(xiàn)快樂的嬰兒，參照了由Eran Mendel設(shè)計的舞蹈圖片。
項目地址：傳送門
-
吉他調(diào)音器
--
作者：Joel T Bennett
利用 CSS+JS 為 electricherald.com 網(wǎng)站實現(xiàn)的吉他調(diào)音器。點擊琴弦可以發(fā)出聲音哦，簡直太酷了！
項目地址：傳送門
-
The Wave
--
作者：Chris Coyier
純 CSS 實現(xiàn)的震動效果。
項目地址：傳送門
以上12個前端項目是不是有趣呢？當(dāng)然，在CodePen上，這些只是冰山一角，更多的驚喜值得我們?nèi)ゲ粩嗟貙W(xué)習(xí)與挖掘。
前端開發(fā)者們，利用你手中的武器創(chuàng)造出新的驚喜吧！
如果覺得文章不錯，不妨點個贊。_
注：本文為原創(chuàng)文章，轉(zhuǎn)載煩請注明出處。謝謝合作！
