对于前端开发者而言，CodePen 一直是盛产想法与创意的圣地。它能够以在线形式，将前端代码编辑与展示。同时，你还可以与全球众多的开发者们交流想法、分享你的作品。
今天，程小狮在 CodePen 上也专门挑选了近期热门的前端项目，与前端er、设计师们分享。相信，这些优秀的作品，会让你耳目一新，或许还能带给你不少灵感呢！
Have Fun！
-
动画视差效果
--
作者：Ana Travas
使用 jQuery 插件创建视差效果，并用 CSS 动画制作的闪烁与流星。
项目地址：传送门
-
日出/日落动画
--
作者：David Khourshid
纯 CSS 还原 Dribbble 上 Denys Boldyriev 和 Andrey Pixy 所设计的日出/日落动画效果，目前只能在 Chrome 浏览器中运行。
项目地址：传送门
-
Moko's lost!
--
作者：Brook Jordan
利用 CSS 与 JS 实现的404页面——吉祥物 TradeGecko 的迷失，这风格简直萌萌哒！
项目地址：传送门
-
纯 CSS 按钮提示框
--
作者：Samuel Janes
纯 CSS 实现的4款按钮提示框，分别为蓝色、红色、绿色与紫色。
项目地址：传送门
-
可爱的狐狸
--
作者：Marcela
纯 CSS 实现 Dribbble 上可爱狐狸图标。
项目地址：传送门
-
SVG/ReactJS 实现的数学模型
--
作者：Sten Hougaard
这位作者热衷于通过数学的方式来生成图形。他使用了 ReactJS 生成了一些非常有趣的 SVG 图形，并且给出了可以自由调节的部分示例。大家来感受下。
项目地址：传送门
-
滚动 LOGO 效果
--
作者：Spencer Goldade
CSS 与 JS 实现的下拉滚动 LOGO 效果。
项目地址：传送门
-
Merry Chris-morph!
--
作者：Chris Gannon
又快到了，一年一度的圣诞节了。作者参照了由 Dmitriy Miroliubov 设计的图标，利用 CSS 与 JS 实现了圣诞动画效果。是不是很可爱呢？
项目地址：传送门
-
卧推
--
作者：Akhil Sai Ram
纯 CSS 实现的卧推效果。小狮只想说，还蛮逼真的嘛！
项目地址：传送门
-
tancerzyk CSS
--
作者：qpoziomek
纯 CSS 实现快乐的婴儿，参照了由Eran Mendel设计的舞蹈图片。
项目地址：传送门
-
吉他调音器
--
作者：Joel T Bennett
利用 CSS+JS 为 electricherald.com 网站实现的吉他调音器。点击琴弦可以发出声音哦，简直太酷了！
项目地址：传送门
-
The Wave
--
作者：Chris Coyier
纯 CSS 实现的震动效果。
项目地址：传送门
以上12个前端项目是不是有趣呢？当然，在CodePen上，这些只是冰山一角，更多的惊喜值得我们去不断地学习与挖掘。
前端开发者们，利用你手中的武器创造出新的惊喜吧！
如果觉得文章不错，不妨点个赞。_
注：本文为原创文章，转载烦请注明出处。谢谢合作！
