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

jopen 6年前

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

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

Color Extraction Effect

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

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

查看演示

CSS True Titles

使用CSS做蒙版、遮罩特效

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

查看演示

Flipside

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

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

查看演示

Netflix Logo In CSS

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

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

查看演示

Simpsons in CSS

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

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

查看演示

Clippy

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

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

查看演示

A single DIV

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

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

查看演示

Motion Blur Experiment

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

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

查看演示

Silon

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

查看演示

CSS space shooter

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

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

查看演示

Blackout

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

查看演示

X-ray

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

查看演示

Squiggly

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

查看演示

Pure CSS content filter

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

查看演示

Elastic stroke CSS + SVG

CSS和SVG实现的文字动效

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

查看演示

Rotate Clock

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

查看演示

Isometric experiment

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