超赞！CodePen 上最新的 12 个热门前端项目

**[CodePen](http://codepen.io/)**

对于前端开发者而言，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

Moko's lost!

利用 CSS 与 JS 实现的404页面——吉祥物 TradeGecko 的迷失，这风格简直萌萌哒！

项目地址：传送门

4. 纯 CSS 按钮提示框
   --
   作者：Samuel Janes

纯 CSS 按钮提示框

纯 CSS 实现的4款按钮提示框，分别为蓝色、红色、绿色与紫色。

项目地址：传送门

5. 可爱的狐狸
   --
   作者：Marcela

可爱的狐狸

纯 CSS 实现 Dribbble 上可爱狐狸图标。

项目地址：传送门

6. SVG/ReactJS 实现的数学模型
   --
   作者：Sten Hougaard

SVG/ReactJS 实现的数学模型

这位作者热衷于通过数学的方式来生成图形。他使用了 ReactJS 生成了一些非常有趣的 SVG 图形，并且给出了可以自由调节的部分示例。大家来感受下。

项目地址：传送门

7. 滚动 LOGO 效果
   --
   作者：Spencer Goldade

滚动 LOGO 效果

CSS 与 JS 实现的下拉滚动 LOGO 效果。

项目地址：传送门

8. Merry Chris-morph!
   --
   作者：Chris Gannon

Merry Chris-morph!

又快到了，一年一度的圣诞节了。作者参照了由 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

The Wave

纯 CSS 实现的震动效果。

项目地址：传送门

以上12个前端项目是不是有趣呢？当然，在CodePen上，这些只是冰山一角，更多的惊喜值得我们去不断地学习与挖掘。

前端开发者们，利用你手中的武器创造出新的惊喜吧！

---

如果觉得文章不错，不妨点个赞。^_

注：本文为原创文章，转载烦请注明出处。谢谢合作！

作者：IT程序狮
文章源自：http://www.jianshu.com/p/788babdf7e54