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

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

发表于: HTML & CSS. 评论 (2)
Sponsor

世界上有很多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实现视差效果，整体感觉很不错。

预览效果

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://codepen.io/2014/popular/
推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。
赞助商链接

与 相关的文章

赞助商链接
设计达人微信交流社区：shejidaren888
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
«
»

+ 添加评论2 Responses to “惊人技术！2014年Codepen上最热门的100个code&CSS片段代码”

  1. Swain - 回复
    2016 年 03 月 21 日 下午 4:12

    Cool![酷]

  2. 爽lorna - 回复
    2015 年 01 月 21 日 下午 5:51

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


{ 发表评论 }