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