交互探索 |date: 2017-2-9

返回列表

2016年 CodePen 最热门的前端代码

每年 Codepen 都会公布年度最热门的代码片段,这些片段有的技术超弦,有的超实用、有的超有创意,或许会给你带来一些灵感。从 Codepen 的代码上还能学习一些牛人的写法,不管是设计师还是前端人员都可以去溜达一下,说不定有意想不到的收获。




NO.10  I DESIGN WITH CODE ❤

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




NO.9  SVG Hover 效果

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




NO.8  多层视差效果

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




NO.7  超 Cool 的图片布局展现效果




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

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




NO.5  实时音乐Arpeggiator发声器

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




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

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




NO.3  用 CSS 实现的小狗动画




NO.2  惊艳的图像切的特效

不得不说,这代码确实很赞。




NO.1  CSS Flexbox 属性演示(超实用)

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




一些不错的代码片段

01 表单提交流程




02 小游戏




03 头部网页导航动画




04 JS鼠标跟随特效




05 超赞的天气动画效果


 

内容来源:设计达人

其它文章|返回列表

大连

大连市沙河口区星海佳时科技园

/

北京

北京市朝阳区安苑路45号世纪嘉园

Copyright © 2005-2016 Aidimedia

All rights reserved

艾迪互动微信公众号