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

334 查看

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

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

Color Extraction Effect

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

图片描述

查看演示

CSS True Titles

使用CSS做蒙版、遮罩特效

图片描述

查看演示

Flipside

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

图片描述

查看演示

Netflix Logo In CSS

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

图片描述

查看演示

Simpsons In CSS

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

图片描述

查看演示

Clippy

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

图片描述

查看演示

A Single DIV

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

图片描述

查看演示

Motion Blur Experiment

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

图片描述

查看演示

Silon

图片描述

查看演示

CSS Space Shooter

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

图片描述

查看演示

Blackout

图片描述

查看演示

X-Ray

图片描述

查看演示

Squiggly

图片描述

查看演示

Pure CSS Content Filter

图片描述

查看演示

Elastic Stroke CSS + SVG

CSS和SVG实现的文字动效

图片描述

查看演示

Rotate Clock

图片描述

查看演示

Isometric Experiment

图片描述

查看演示

文章源自:www.shejidaren.com/15-css3-effects.html