HTML & CSS » 15个超酷的CSS3代码特效展示

15个超酷的CSS3代码特效展示

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

今天跟大家分享与CSS3相关的特效展示案例，这些例子特效主要由CSS3编写出来，除了新鲜有创意之外，编写代码质量也很高，对于前端人员或设计师都有参考的价值，当然有的不是全CSS3编写的，部分是需要与JS代码结合使用才能发挥效果。

下面大家一起看看这些CSS DEMO，确实很酷哦！

Color Extraction Effect

全个像幻灯版一样的图像色板，使用CSS滤镜和Vibrant.js实现。

color-extraction-2
查看演示

CSS True Titles

使用CSS做蒙版、遮罩特效

css-title-17
查看演示

Flipside

很酷的提示框动画效果，但在Chrome浏览器查看还是有点不完美。

flipside-3
查看演示

Netflix Logo In CSS

纯CSS实现的 netflix logo动画效果。

netflix-4
查看演示

Simpsons in CSS

纯CSS绘制卡通人物头像：阿森一族

simpson-in-css-5
查看演示

Clippy

Clippy是一个在线生成工具，主要用来实现css背景剪切功能（可查看css clip属性详解）

clippy-6
查看演示

A single DIV

好多使用CSS绘制的图像，而且只是用一个DIV标签实现！

single-div-7
查看演示

Motion Blur Experiment

一个运动模糊的弹窗，很有创意，使用 SVG 滤镜实现。

motion-blur-8
查看演示

Silon

logic-9
查看演示

CSS space shooter

一个3D游戏动画演示，CSS真强大啊

space-shooter-10
查看演示

Blackout

blackout-1
查看演示

X-ray

x-ray-11
查看演示

Squiggly

Squiggly-11
查看演示

Pure CSS content filter

css-filter-13
查看演示

Elastic stroke CSS + SVG

CSS和SVG实现的文字动效

elastic-14
查看演示

Rotate Clock

rotate-clock-15
查看演示

Isometric experiment

isometric-16
查看演示

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

与 、 相关的文章

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

+ 添加评论2 Responses to “15个超酷的CSS3代码特效展示”

  1. 路杨 - 回复
    2015 年 06 月 19 日 下午 5:08

    CSS3 的确很强大。貌似机器配置差的话有点卡

  2. 静水流深8907 - 回复
    2015 年 06 月 16 日 下午 4:23

    CSS3没有做不到，只有想不到！


Leave a Reply to 路杨

点击这里取消回复。