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
查看演示

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

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

  1. 路杨 - 回复

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

  2. 静水流深8907 - 回复

    CSS3没有做不到,只有想不到!


{ 发表评论 }