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

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

原文:http://www.shejidaren.com/top-pen-of-2016.html

每年 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

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
posted @ 2019-05-29 21:40  鬼小妞  阅读(602)  评论(0编辑  收藏  举报