这是什么?

这个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(Chrome 18.0.976.0以上版本)

-webkit-filter: none;
blur（模糊） grayscale（灰度） drop-shadow（阴影） sepia（褐色滤镜） brightness（亮度） contrast（对比） hue-rotate（色相） invert（反相） saturate（饱和度） opacity（透明度）
动画: