css filter滤镜介绍以及filter滤镜在菜单选中上的应用
2017-03-13 23:02

css filter滤镜效果

css filter滤镜大家应该多少都有些耳闻,但是用的相对比较少,这个滤镜据说是MicroSoft向W3C组织提案的,然后又由W3C指定的标准,IE浏览器是很早就有滤镜效果的,然而新制定的W3C滤镜跟IE的滤镜语法有很大出入,属于两个不同的体系,但其他浏览器都已经支持了filter滤镜,虽然需要添加浏览器前缀,但不影响filter滤镜大展拳脚。

下面我们先看一下由css filter 滤镜处理的图像和原图的区别,对css filter滤镜有个直观认识。

filter.png

filter 的语法

filter: <filter-function> [<filter-function>]* | none

filter滤镜可以多个滤镜函数结合使用,我们挨个看一下这些滤镜的意思。

blur()

给图像设置高斯模糊。“radius”一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起,所以值越大越模糊;如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。

brightness()

给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是0%,图像会全黑。值是100%,则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是1。

contrast()

调整图像的对比度。值是0%的话,图像会全黑。值是100%,图像不变。值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1。

drop-shadow()

给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。 函数接受<shadow>(在CSS3背景中定义)类型的值,除了“inset”关键字是不允许的。该函数与已有的box-shadow 属性很相似;不同之处在于,通过滤镜,一些浏览器为了更好的性能会提供硬件加速。box-shadow不理解的可以连接查看:box-shadow用法详解

grayscale()

将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0。

hue-rotate()

给图像应用色相旋转。“angle”一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。

invert()

反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。 若值未设置,值默认是0。

opacity()

转化图像的透明程度。值定义转换的比例。值为0%则是完全透明,值为100%则图像无变化。值在0%和100%之间,则是效果的线性乘子,也相当于图像样本乘以数量。 若值未设置,值默认是1。该函数与已有的opacity属性很相似,不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。

saturate()

转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和,值为100%则图像无变化。其他值,则是效果的线性乘子。超过100%的值是允许的,则有更高的饱和度。 若值未设置,值默认是1。

sepia()

将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0。

上面函数的定义摘自MDN。

这些文档介绍说白了,网上有很多,我们都可以很容易的看懂他们,但是我们学习这个的目的,主要还是使用,能够使用,有用武之地的才是好的。

下面我们通过filter滤镜来看看用途。

filter2.png

我们在移动端,经常会用到这种底部菜单,而这种底部菜单需要有选中效果,通常我们采用的方法就是使用两张图片切换,当选中时,将这张图片换成彩色图片。今天我们学习了css filter滤镜,以后我们就不用使用两张图片切换了,这一功能完全可以通过filter滤镜来实现。

代码如下:

<style>
    .ftap_cont{
        border:1px solid #bababa;
        background:#f7f7f7;
        margin:15px;

    }
    .ftap_menu{
        margin:0;
        padding:0;
        list-style:none;
        font-size: 0;
        margin-top:250px;
        background:#fff;
        border-top:1px solid #ccc;
    }
    .ftap_menu li{
        width:25%;
        display: inline-block;
        height:40px;
        padding:6px 0;
        background-size:auto 80%;
        background-repeat: no-repeat;
        background-position:center;
        cursor: pointer;
    }
    .mhome{
        background-image:url(images/mhome.png);
    }
    .mreverse{
        background-image: url(images/mreverse.png);
    }
    .mhuodong{
        background-image: url(images/mactive.png);
    }
    .muser{
        background-image: url(images/muser.png);
    }
    //hover时添加filter滤镜
    .ftap_menu li:not(.active):hover{
        filter:sepia(1) hue-rotate(110deg);
    }
    //active时的filter滤镜
    .ftap_menu li.active{
        filter:sepia(1) hue-rotate(110deg);
    }
</style>
<div class="ftap_cont">
    <ul class="ftap_menu">
        <li class="mhome active"></li>
        <li class="mreverse"></li>
        <li class="mhuodong"></li>
        <li class="muser"></li>
    </ul>
</div>
<script>
    var lis=document.getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){
        lis[i].onclick=selectedli;
    }
    function selectedli(){
        if(this.className.indexOf("active")!=-1){
            return ;
        }
        for(var i=0;i<lis.length;i++){
            lis[i].className=lis[i].className.replace("active","");
        }
        this.className=this.className+" active";
    }
</script>

效果如下:

filter3.png

demo连接,点击体验filter菜单效果:css filter菜单选中效果

这里我们通过filter属性的结合使用实现改变图片颜色的功能,因为图片是灰色的,所以我们先用sepia(1)将图片转换成深褐色,然后再用hue-rotate(110deg)转换颜色的色环角度值,就改变成其他颜色了,本例子中我们改变成了绿色。

.ftap_menu li:not(.active):hover{
    filter:sepia(1) hue-rotate(280deg);
}
.ftap_menu li.active{
    filter:sepia(1) hue-rotate(280deg);
}

280deg时,效果如下:

filter4.png

变成了粉红色的颜色。

.ftap_menu li:not(.active):hover{
    filter:sepia(1) hue-rotate(50deg) invert(1) saturate(4);
}
.ftap_menu li.active{
    filter:sepia(1) hue-rotate(50deg) invert(1) saturate(4);
}

效果如下:

filter6.png

变成了紫色了。通过这些变换可以filter 滤镜组合,可以变换成其他颜色。至于规律原理,我对颜色没有什么研究,只能一点点试验。但这却是是一个不错的菜单选中的实现方法。

filter: url(filters.svg#ft1)

filter不只这些内置的滤镜,还可以通过svg的定义滤镜来实现滤镜的自定义效果,可谓功能十分强大。通过svg自定义滤镜,我们可以用 <feColorMatrix>这个标签来对颜色值进行matrix矩阵变换,这样的画,转变的颜色值就好把握多了。有兴趣的可以进步一学习svg自定义滤镜。

本文就介绍到这里,日后对滤镜有了更深的理解了再进一步补充。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(2741)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1