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

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

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

TOP 10: 摇摆的电灯

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

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

预览效果

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实现视差效果,整体感觉很不错。

062806SxV

预览效果

TOP 3: PULL MENU

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

预览效果

TOP 2: CSS 文本干扰效果

像是信号被干扰而形成的花屏特效。这让我想起一个很酷的404页面效果:http://codepen.io/kaypooma/full/ehfjC

预览效果

TOP 1: SVG loading

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

预览效果

最后

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

CSS天气应用

预览效果

100个CSS HOVER样式

预览效果

模糊背景

预览效果

Admin 后台界面

预览效果

调色版

预览效果

响应式界面设计

预览效果

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

预览效果

CSS过山车动画

预览效果

Howl’s Moving Castle

这个画面相当强大啊。

预览效果

转自:http://www.shejidaren.com/top-10-code-and-css-snippets-2014.html

发表评论