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 ❤
如果,就是用代码来设计的到动画演示,估计国外工作生活休闲,大部分时间都是来搞创作……
第9名.SVG Hover 效果
鼠标经过卡片区域,以动画形式显示图像。
第8名. 多层视差效果
一个视差特效代码,重点是代码量不多,可以学习或直接拿来用用……
第7名. 超 Cool 的图片布局展现效果
第6名. 纯 CSS 实现页面阅读进度条
现在有些网页流行使用「阅读进度」状态,但大部分需要 JS实现,而这个仅仅是用了 CSS,而且很简单,大家可以参考参考。
第5名. 实时音乐Arpeggiator发声器
支持在线实时创作、实时试听,对于音乐爱好者,这个很实用吧!
第4名. 诺曼·布劳格 的一个纪念页面
诺曼·布劳格,美国生物学家、人道主义者、诺贝尔和平奖得主。被称为绿色革命之父。
第3名.用 CSS 实现的小狗动画
第2名. 惊艳的图像切的特效
这个代码浏览量这么多,估计是因为之前设计达人网报道过「惊艳的图像切换动画效果」一文,并且被多家媒体转载。但不得不说,这代码确实很赞。
第1名. CSS Flexbox 属性演示(超实用)
实时演示每个 Flexbox 属性的作用,让初学 Flexbox 的前端人员能快速了解它的作用,绝对值得收藏。
一些不错的代码片段
表单提交流程
小游戏
头部网页导航动画
JS鼠标跟随特效
超赞的天气动画效果
推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com