css图片居中会天气30天,惊人技术！2014年Codepen上最热门的100个code&CSS片段代码

惊人技术！2014年Codepen上最热门的100个code&CSS片段代码

1月 15, 2015

评论 (2)

Sponsor

世界上有很多Web设计师、前端人员喜欢到Codepen上展示他们的片段代码，有的代码的确强大而惊人，所以我们经常到这里获取一些小灵感是很不错的。

最近Codepen官网上发布了2014年Codepen上最热门的100个code&CSS片段代码，这些片段中有不少今人惊叹和创意的CSS和code，值得一看，下面我们来看看TOP10的片段有那几个吧：

TOP 10: 摇摆的电灯

灯泡好像被微风吹动一样，左右摇摆，很写意。

TOP 9: 纯CSS视差滚动

这是比较流行的特效，用纯CSS编写很厉害！

TOP 8: Sass parallax example

又一个视差效果，强大之处是支持水平和垂直滚动时都带有视差特效。

TOP 7: Apple iMac scrolling effect

TOP 6:纯CSS实现带动画的天气图案

有多云、晴天、彩虹、晚上、下雪等效果，很漂亮。

TOP 5: CSS实现3D文字特效

TOP 4: Firewatch 视差特效

Firewatch片段代码可以看出，图片已被转成base64格式，通过CSS实现视差效果，整体感觉很不错。

TOP 3: PULL MENU

很有创意的APP导航菜单设计，参考下拉高度的弹性方式来选择菜单，有意思。

TOP 2: CSS 文本干扰效果

TOP 1: SVG loading

使用SVG图像实现的加载效果，特色是支持Retina，使用方便。这么多人气估计也许这个代码太实用了：)

最后

除了以上TOP10之外，其实还有一些不错的片段代码，有的甚至可以直接用到自己的项目上，比如：

CSS天气应用

100个CSS HOVER样式

模糊背景

Admin 后台界面

调色版

响应式界面设计

3行代码实现内容元素垂直居中

CSS过山车动画

Howl’s Moving Castle

这个画面相当强大啊。

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

Swain -

2016 年 03 月 21 日 下午 4:12

Cool![酷]

爽lorna -

2015 年 01 月 21 日 下午 5:51

学习了…..惊人技术！2014年Codepen上最热门的100个code&CSS片段代码！！！

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站