css filter 滤镜效果与特效

前言

css 中的 filter 属性可用于修改页面元素的渲染风格，并通过各种组合搭配实现各种特效。文内收录了部分关于由其实现的页面特效与应用场景。

css filter 函数

通过设置 filter 属性，可在web端对页面元素进行渲染处理。

filter: blur(3px);           // 高斯模糊
filter: brightness(200%);    // 亮度
filter: contrast(150%);      // 对比度
filter: grayscale(50%);      // 灰度
filter: hue-rotate(270deg);  // 色相旋转
filter: invert(100%);        // 反色
filter: opacity(25%);        // 透明度
filter: saturate(200%);      // 饱和度
filter: sepia(100%);         // 深褐色
filter: drop-shadow(1px 1px 2px red); // 阴影

css filter 复合属性

通过组合值，可生成较为复杂的滤镜效果。需注意：使用时滤镜参数可略微调整，避免与图片本身风格冲突。并且由于组合顺序不同，相同的参数值也可能会产生不同变化效果。

另外 filter 当前无法产生如PS般强大且受官方背书的复杂效果，如“噪点“、”颗粒“等。

// 黑白
filter: grayscale(100%);  
// 老照片
filter: grayscale(100%) opacity(0.8) sepia(50%);
// 素描
filter: grayscale(100%) opacity(0.8) saturate(0);
// 怀旧
filter: sepia(50%) brightness(1.2) contrast(1.5);
// 雨屏
filter: blur(1px) grayscale(100%) hue-rotate(90deg); 
// 老电影
filter: contrast(1.5) grayscale(50%) hue-rotate(90deg);
// 艺术
filter: brightness(1.5) contrast(1.8) hue-rotate(60deg) opacity(0.8);
// 深度
filter: grayscale(100%) hue-rotate(90deg) opacity(0.5) blur(1px);
// 夜视
filter: brightness(1.5) contrast(1.8) hue-rotate(90deg) opacity(0.5) blur(1px);

css filter 应用场景

通过修改滤镜属性省略重复度较高的图片，以较小前端资源消耗，实现更多的图片效果。

按钮激活状态

使用 invert 或者 grayscale 属性，控制元素的激活状态。

// 原图
.BruceWayne {
    filter: unset;
}

// 激活态
.Batman {
    filter: invert(100%);
}

修改网站主题色

通过其他滤镜使站点色彩更加明亮或沉闷，使其符合各种场合的气氛。如：在全局设置 grayscale 属性可使站点主题变为黑白，使表现效果庄严肃穆。

body {
    // 清明上河图
    filter: unset;

    // 清明上坟图
    filter: grayscale(1);
}

毛玻璃模糊效果

通过 filter: blur、backdrop-filter: blur 分别控制模糊对象，可以实现不同视角下的模糊，达到控制观察点的效果。

// 背景模糊
.in_the_room {
    backdrop-filter: blur(2px)
}

// 文字模糊
.forget_the_key {
    filter: blur(2px);
}

更亲切的阴影效果

不同于 box-shadow。使用 filter: drop-shadow 产生阴影可以忽略图片透明部分，直接作用于图像周边，使阴影与图像更加贴合。

$halo-color: 0 -10px 50px rgb(255, 213, 0);

// 原版无阴影
.come {
    box-shadow: unset;
    filter: unset;
}

// 阴影作用于边框
.really {
    box-shadow: $halo-color;
}

// 阴影作用于图像
.you-sure {
    filter: drop-shadow($halo-color);
}

css filter 复杂特效

在 filter: contrast、filter: blur、动画等属性的共同作用下，元素间的边界会产生“融合”般的特效。此类机制可与其他 css 属性搭配形成更为复杂的特效场景。

元素边界融合

通过设置 filter: contrast、filter: blur 两种效果，可以在动画元素间形成融合的效果。

// 父级-容器
.universe {
    background: #fff;
    filter: contrast(30);
}

// 子级-两个小球
.moon {
    filter: blur(10px);
}
.sun {
    filter: blur(10px);
}

火焰效果

在边界融合的基础上，调整小球出现的数量与频率，再辅助一些背景颜色，实现火焰与波动效果。

水滴效果

在边界融合的基础上，调整小球出现的数量与频率，再主要通过动画等属性，模拟出水滴与流动效果。

结语

以上内容，收录了部分 css filter 效果，感谢各参考文章的动图素材，其中各附实现代码。若各位看官另有秀笔者一脸的高级技法... ...

遛了