强大的filter

强大的filter

今天偶然看一篇关于css和js完成手风琴效果，百度相关知识的时候发现了一个非常有意思的css3 熟悉，原本以为应该是美工实现的东西，结果css就可以完成，感觉很nice。

 

以上图片全部是用css做的，并不是美工完成的。

具体的内容：

Filters主要是运用在图片上，以实现一些特效。（尽管他们也能运用于video上），

语法

 elm {        filter: none | <filter-function > [ <filter-function> ]*       } 

其默认值是none，他不具备继承性，其中filter-function一个具有以下值可选：

1. grayscale灰度

2. sepia褐色（求专业指点翻译）

3. saturate饱和度

4. hue-rotate色相旋转

5. invert反色

6. opacity透明度

7. brightness亮度

8. contrast对比度

9. blur模糊

10. drop-shadow阴影

目前chrome和360浏览器都支持了，我用的是现在最新版（2015年2月1日）的chrome和360极速。

下面一一描述吧：

①grayscale（灰度）

li  .grayscale{            -webkit-filter:grayscale(.4);        }

默认是100%；

 

②sepia（褐色）

     

 li #sepia{-webkit-filter:sepia(1);         }

 

③saturat饱和度

li #saturat{-webkit-filter:saturate(.2);         }

 

这个可以设置为500%，效果就成了这样：

 

 

 

④hue-rotate色相旋转

 

li #saturat{-webkit-filter:saturate(.2);         }

 

⑤invert反色：

 li #invert{-webkit-filter:invert(1);         }

 

⑥透明度opacity：

li #opacity{        -webkit-filter:opacity(.3);        }

//这个效果拿来做遮罩层就很不错

 

⑦最后贴上transition属性，这是实现效果过渡，

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

Safari 支持替代的 -webkit-transition 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性

语法：transition: property duration timing-function delay;

值

描述

transition-property

规定设置过渡效果的 CSS 属性的名称。

transition-duration

规定完成过渡效果需要多少秒或毫秒。

transition-timing-function

规定速度效果的速度曲线。

transition-delay

定义过渡效果何时开始。

 

我的实现：

li a img{            -webkit-transition: all .5s ease-in-out;            -moz-transition: all .5s ease-in-out;            -ms-transition: all .5s ease-in-out;            -o-transition: all .5s ease-in-out;            transition: all .5s ease-in-out;                    }