CSS 高级✍️ CSS3 的 Filter 滤镜

2022-04-10 | 2024-05-07 | 2.3k | 11 分钟

Filter 介绍

css3 的 filter 属性(滤镜)是用来定义元素的视觉效果的 （通常是图片），其功能简单易用且强大，可以对网页中的图片进行类似 Photoshop 处理图片的效果，通过滤镜对图片进行处理，能使一张图片呈现各种不同的视觉效果；

用法：

/* 1.单属性用法 */
filter: blur();

/* 2.多属性组合使用，用空格分隔每个属性 */
filter: blur(5px) opacity(0.8)  brightness(0.8);

属性简介

属性	描述
grayscale 灰度	将图片过滤成灰色，取值为 0-1 或者 0%-100% 之间，默认值是 0
sepia 褐色	将图片过滤成怀旧复古的风格，值为 0-1 或者 0%-100% 之间的值，默认值是 0
saturate 饱和度	值只能是大于等于 0 的值，取负数的表现和默认值是一样的
contrast 对比度	调整图像的对比度，值是 0% 的话，图像会全黑，默认值是 100% 图像无变化值可以超过 100% 意味着会运用更低的对比
hue-rotate 色相旋转	让图像中的颜色，在色相环中做对应的旋转，默认值是 0deg 图像无变化该值虽然没有最大值，但超过360deg 的值相当于又绕一圈
invert 反色	将图片过滤成类似于照片底片的感觉，取值为 0-1 或者 0%-100% 之间，默认值是 0
brightness 亮度	改变图片的亮度，使其看起来更亮或更暗；如果值是 0% 图像会全黑，默认值是 100% 图像无变化值超过100% 也是可以的，图像会比原来更亮
opacity 透明度	改变图像的透明程度，值为 0% 则是完全透明，默认值是 100% 图像无变化 0-100% 之间则是部分透明；也可以用 0-1 之间的小数替代 0%-100%
blur 模糊	给图像设置高斯模糊；值越大越模糊，默认是 0
drop-shadow 阴影	给图像设置阴影

示例代码

<style>
.filter-box {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.filter-box img {
    width: 150px;
}

.blur {
    /* 高斯模糊 */
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

.brightness {
    -webkit-filter: brightness(0.30);
    filter: brightness(0.30);
}

.contrast {
    -webkit-filter: contrast(180%);
    filter: contrast(180%);
}

.grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.huerotate {
    -webkit-filter: hue-rotate(180deg);
    filter: hue-rotate(180deg);
}

.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

.opacity {
    /* 透明度 */
    -webkit-filter: opacity(50%);
    filter: opacity(50%);
}

.saturate {
    -webkit-filter: saturate(7);
    filter: saturate(7);
}

.sepia {
    -webkit-filter: sepia(100%);
    filter: sepia(100%);
}

.shadow {
    /* 阴影  */
    -webkit-filter: drop-shadow(8px 8px 10px green);
    filter: drop-shadow(8px 8px 10px green);
}
</style>
<div class="filter-box">
<div class="blur"><img src="./meimei.jpg" alt=""></div>
<div class="brightness"><img src="./meimei.jpg" alt=""></div>
<div class="contrast"><img src="./meimei.jpg" alt=""></div>
<div class="grayscale"><img src="./meimei.jpg" alt=""></div>
<div class="huerotate"><img src="./meimei.jpg" alt=""></div>
<div class="invert"><img src="./meimei.jpg" alt=""></div>
<div class="opacity"><img src="./meimei.jpg" alt=""></div>
<div class="saturate"><img src="./meimei.jpg" alt=""></div>
<div class="sepia"><img src="./meimei.jpg" alt=""></div>
<div class="shadow"><img src="./meimei.jpg" alt=""></div>
</div>

案例

电影谢幕效果

<style>
    .ex1-container {
        width: 100%;
        height: 400px;
        position: relative;
    }

    .ex1-pic {
        height: 100%;
        width: 100%;
        position: absolute;
        background: url('./bg.jpg') no-repeat;
        background-size: cover;
        animation: fade-away 4s linear forwards;
        /*animation-fill-mode forwards当动画完成后，保持最后一帧的状态 */
    }

    .ex1-text {
        position: absolute;
        line-height: 55px;
        color: #fff;
        font-size: 24px;
        text-align: center;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        filter: opacity(0);
        animation: show 4s cubic-bezier(.74, -0.1, .86, .83) forwards;
    }

    /* 背景图的明暗度动画 */
    @keyframes fade-away {
        30% {
            filter: brightness(1);
        }

        100% {
            filter: brightness(0);
        }
    }

    /* 文字的透明度动画 */
    @keyframes show {
        20% {
            filter: opacity(0);
        }

        100% {
            filter: opacity(1);
        }
    }
</style>
<div class="ex1-container">
    <div class="ex1-pic"></div>
    <div class="ex1-text">
        <p>如果生活中有什么使你感到真正快乐，那就去做吧</p>
        <br>
        <p>不用管别人说什么</p>
    </div>
</div>

如果生活中有什么使你感到真正快乐，那就去做吧

不用管别人说什么

融合效果

blur 滤镜应用在融合元素上，实现模糊效果，融合元素四周出现毛边；

通过 contrast 滤镜加强融合元素父元素的对比度，使融合元素四周的毛边粘黏在一起；

<style>
    .ex2-container {
        margin: 50px;
        height: 140px;
        width: 400px;
        background: #fff;
        /*给融合元素的父元素设置背景色*/
        display: flex;
        align-items: center;
        justify-content: center;
        filter: contrast(50);
        /*给融合元素的父元素设置contrast*/
    }

    .ex2-circle {
        border-radius: 50%;
        filter: blur(10px);
        /*给融合元素设置blur*/
    }

    .ex2-circle-1 {
        height: 110px;
        width: 110px;
        background: #03a9f4;
    }

    .ex2-circle-2 {
        height: 80px;
        width: 80px;
        background: #0000ff;
        transform: translate(-40px);
    }
</style>
<div class="ex2-container">
    <div class="ex2-circle ex2-circle-1"></div>
    <div class="ex2-circle ex2-circle-2"></div>
</div>

融合效果之水滴融合

<style>
    .ex3-box {
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #111;
        filter: contrast(30);
        /*父元素设置对比度*/
    }

    .ex3-drop {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background-color: white;
        position: absolute;
        filter: blur(15px);
        /*子元素设置模糊度*/
        transition: transform 1s;
    }

    .ex3-box:hover .ex3-drop-1 {
        transform: translateX(-180px);
    }

    .ex3-box:hover .ex3-drop-3 {
        transform: translateX(180px);
    }
</style>
<div class="ex3-box">
    <div class="ex3-drop ex3-drop-1"></div>
    <div class="ex3-drop ex3-drop-2"></div>
    <div class="ex3-drop ex3-drop-3"></div>
</div>

融合效果之文字融合

<style>
    .ex4-container {
        margin-top: 50px;
        text-align: center;
        background-color: #000;
        filter: contrast(30);
        /*父元素设置对比度*/
    }

    .ex4-text {
        font-size: 100px;
        letter-spacing: -40px;
        color: #fff;
        animation: move-letter 4s linear forwards;
        /*forwards当动画完成后，保持最后一帧的状态*/
        animation-iteration-count: infinite;
    }

    @keyframes move-letter {
        0% {
            letter-spacing: -40px;
            filter: blur(10px);
            /*子元素设置模糊度*/
        }

        50% {
            filter: blur(5px);
        }

        100% {
            letter-spacing: 15px;
            filter: blur(2px);
        }
    }
</style>
<div class="ex4-container">
    <span class="ex4-text">helloworld!</span>
</div>

helloworld!

抖动效果

filter 可以通过 URL 链接到 SVG filter；

通过动画不断改变 feTurbulence 滤镜的 baseFrequency 值实现水纹波动的效果；

<style>
    .ex5-container {
        text-align: center;
        width: 100%;
        height: 100px;
        background: black;
    }

    .ex5-shaky {
        line-height: 100px ;
        color: white;
        font-size: 60px;
        filter: url(#displacement-text-filter);
        /* url 中对应的是上面 svg filter 的 id */
    }
</style>
<div class="ex5-container">
    <p class="ex5-shaky">Such a good night! 美好的一天</p>
</div>
<svg width="0" height="0">
    <filter id="displacement-text-filter">
        <!--定义feTurbulence滤镜-->
        <feTurbulence baseFrequency="0.02" seed="0">
            <!--这是svg动画的定义方式，通过动画不断改变seed的值，形成抖动效果-->
            <animate attributeName="seed" dur="1s" keyTimes="0;0.5;1" values="1;2;3" repeatCount="indefinite">
            </animate>
        </feTurbulence>
        <feDisplacementMap in="SourceGraphic" scale="10" />
    </filter>
</svg>

Such a good night! 美好的一天

打赏作者

您的打赏是我前进的动力

微信

支付宝

CSS 高级✍️ CSS3 的 transform 变形

CSS 高级✍️ CSS3 的 Clip-Path 裁剪

中午好👏🏻，我是 ✍🏻 疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

1. Filter 介绍
2. 案例