2016年 CodePen 最热门的前端代码 Top 100

Sponsor

每年 Codepen 都会公布年度最热门的代码片段，这些片段有的技术超弦，有的超实用、有的超有创意，有空看看都能给我们带来灵感。

同时从 Codepen 的代码上也能学习一些牛人的写法，不管是设计师还是前端人员都可以去溜达一下，说不定有意想不到的收获。

项目名称：Top pens of 2016 on CodePen
项目地址：https://codepen.io/2016/popular/pens/

看面一起看看这些优秀的 Code 作品，看到喜欢的可以直接修改使用，这里我们摘取排行前10的 Code.

第10名. I DESIGN WITH CODE ❤

如果，就是用代码来设计的到动画演示，估计国外工作生活休闲，大部分时间都是来搞创作……

查看完整 DEMO

第9名.SVG hover 效果

鼠标经过卡片区域，以动画形式显示图像。

查看完整 DEMO

第8名. 多层视差效果

一个视差特效代码，重点是代码量不多，可以学习或直接拿来用用……

查看完整 DEMO

第7名. 超 cool 的图片布局展现效果

查看完整 DEMO

第6名. 纯 CSS 实现页面阅读进度条

现在有些网页流行使用「阅读进度」状态，但大部分需要 JS实现，而这个仅仅是用了 CSS，而且很简单，大家可以参考参考。

查看完整 DEMO

第5名. 实时音乐Arpeggiator发声器

支持在线实时创作、实时试听，对于音乐爱好者，这个很实用吧！

查看完整 DEMO

第4名. 诺曼·布劳格 的一个纪念页面

诺曼·布劳格，美国生物学家、人道主义者、诺贝尔和平奖得主。被称为绿色革命之父。

第3名.用 CSS 实现的小狗动画

查看完整 DEMO

第2名. 惊艳的图像切的特效

这个代码浏览量这么多，估计是因为之前设计达人网报道过「惊艳的图像切换动画效果」一文，并且被多家媒体转载。但不得不说，这代码确实很赞。

查看完整 DEMO

第1名. CSS Flexbox 属性演示（超实用）

实时演示每个 Flexbox 属性的作用，让初学 Flexbox 的前端人员能快速了解它的作用，绝对值得收藏。

查看完整 DEMO

一些不错的代码片段

表单提交流程

查看完整 DEMO

小游戏

查看完整 DEMO

头部网页导航动画

查看完整 DEMO

JS鼠标跟随特效

查看完整 DEMO

超赞的天气动画效果

查看完整 DEMO

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。