CSS图书馆 » 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

这个画面相当强大啊。

预览效果

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

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

  1. Swain - 回复

    Cool![酷]

  2. 爽lorna - 回复

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


{ 发表评论 }