强大的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;
            
        }