这是什么?

这个demo展示正在由webkit实现的 CSS Filter Effects 1.0, 以及 filter功能

在Webkit, filter可以用于启动硬件加速的内容(比如img { -webkit-transform: translateZ(0); } ). 在Chrome中,用户硬件加速内容的filter还在实现中(可以使用 --enable-accelerated-filters设置).

浏览器支持: Chrome 18.0.976.0 (currently canary), Webkit nightly

CSS Filter Effects

-webkit-filter: none;
blur grayscale drop-shadow sepia brightness contrast hue-rotate invert saturate opacity
动画: