使用CSS滤镜属性filter实现电影、模糊及融合效果

作者: 酷酷的凯先生 | 来源:发表于2022-08-08 15:14 被阅读0次

前言

在处理图片时，若想让一张图像呈现各种不同的视觉效果，可使用CSS中的filter属性，可为元素指定各种滤镜效果，比如模糊、灰度、明暗度、颜色偏移等。

CSS filter的基础使用非常简单可参照官网，也可以通过指定这些函数的值来实现想要的效果，如下：

/*使用单个滤镜  */
filter: blur(5px);  // 高斯模糊
filter: brightness(0.4);  // 变得明亮，值为 0% 将创建全黑图像
filter: contrast(200%);  // 图像的对比度，值是 0% 的话，图像会全黑
filter: drop-shadow(16px 16px 20px blue);  // 图像阴影效果
filter: grayscale(50%);  // 图像灰度
filter: hue-rotate(90deg); // 色相旋转
filter: invert(75%);  // 反转图像
filter: opacity(25%);  // 透明度
filter: saturate(30%);  // 图像饱和度
filter: sepia(60%);  // 转换为深褐色

/* 多个滤镜 */
filter: contrast(175%) brightness(3%);

/* 不使用滤镜 */
filter: none;

模糊效果

假定情景：有三张默认全部清晰显示的图片，鼠标hover时，其余两张模糊，当前的清晰显示，实现如下:

1659927608986.png

html 代码

<div>
    <p> <span>这是第一张</span>  </p>
    <p> <span>这是第二张</span> </p>
    <p> <span>这是第三张</span> </p>
</div>

css 代码

div {
    display: flex;
    width: 660px;
    margin: 100px auto;
    padding: 30px 30px 20px;
    justify-content: space-between;
    background: #f2f2f2;
    p {
        position: relative;
        height: 180px;
        width: 180px;
        span {
            position: absolute;
            left: 52px;
            bottom: 30px;
            font-weight: 700;
            z-index: 1;
        }
    }
}

实现思路：是将背景加在p元素的伪类上，当元素不是焦点时，为该元素的伪类加上滤镜

div {
    display: flex;
    width: 660px;
    margin: 100px auto;
    padding: 30px 30px 20px;
    justify-content: space-between;
    background: #f2f2f2;
    p {
        position: relative;
        height: 180px;
        width: 180px;
        span {
            position: absolute;
            left: 52px;
            bottom: 30px;
            font-weight: 700;
            z-index: 1;
        }
        &::before {
            z-index: 1;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            border-radius: 20px;
            filter: blur(0px) opacity(1);
            transition: filter 200ms linear, transform 200ms linear;
            background: url(./assets/logo.png);
            background-size: 100% 100%;
        }
    }
}

注意：这里不能将滤镜直接加在p元素上而是其伪类上。因为父元素加了滤镜，它的子元素都会一起由该滤镜改变，会导致上面的文字也变模糊。

增加hover模糊效果：通过css选择器选出非hover的p元素，给其伪类添加模糊、透明度和明暗度的滤镜

div {
    display: flex;
    width: 660px;
    margin: 100px auto;
    padding: 30px 30px 20px;
    justify-content: space-between;
    background: #f2f2f2;
    p {
        position: relative;
        height: 180px;
        width: 180px;
        span {
            position: absolute;
            left: 52px;
            bottom: 30px;
            font-weight: 700;
            z-index: 1;
        }
        &::before {
            z-index: 1;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            border-radius: 20px;
            filter: blur(0px) opacity(1);
            transition: filter 200ms linear, transform 200ms linear;
            background: url(./assets/logo.png);
            background-size: 100% 100%;
        }
        &:hover:before {
            filter: saturate(1.2);
            transform: scale(1.05);
        }
    }
    &:hover > p:not(:hover):before {
        filter: blur(5px) opacity(0.6) brightness(0.8);
    }
}

效果如下：

1659929463168.png

褪色效果

实现思路：通过sepia滤镜将图像基调转换为深褐色，再通过降低饱和度saturate和色相旋转hue-rotate微调，模拟老照片的效果，代码如下：

p {
    position: relative;
    height: 180px;
    width: 180px;
    filter: sepia(30%) saturate(40%) hue-rotate(5deg);
    transition: transform 0.5s;
    span {
        position: absolute;
        left: 52px;
        bottom: 30px;
        font-weight: 700;
        z-index: 1;
    }
    &::before {
        z-index: 1;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        border-radius: 20px;
        filter: blur(0px) opacity(1);
        transition: filter 200ms linear, transform 200ms linear;
        background: url(./assets/logo.png);
        background-size: 100% 100%;
    }
    
    &:hover {
        filter: none;
        transform: scale(1.2) translateX(10px);
        z-index: 1;
    }
}

灰度效果

grayscale() 函数将改变输入图像灰度。amount 的值定义了转换的比例。值为 100% 则完全转为灰度图像，值为 0% 图像无变化。值在 0% 到 100% 之间，则是效果的线性乘数。若未设置值，默认是 0。

实现思路：在html上加上filter: grayscale(100%)如下：

html{
    filter: grayscale(100%);
}

1659930673466.png

电影效果

brightness()函数将线性乘法器应用于输入图像，使其看起来或多或少地变得明亮。值为 0% 将创建全黑图像。值为 100% 会使输入保持不变。其他值是效果的线性乘数。如果值大于 100% 提供更明亮的结果。若没有设置值，默认为 1。

实现思路：通过调整背景图的明暗度和文字的透明度来模拟电影谢幕的效果，代码如下：

html 代码
<div>
    <div class="box"></div>
    <div class="text">
        <p> <span>这是第一张</span> </p>
        <p> <span>这是第二张</span> </p>
        <p> <span>这是第三张</span> </p>
    </div>
</div>

css 代码

div {
    width: 660px;
    height: 200px;
    margin: 100px auto;
    background: blue;
    position: relative;
    .box {
        position: absolute;
        width: 100%;
        height: 100%;
        animation: fade-away 2.5s linear forwards; //forwards当动画完成后，保持最后一帧的状态
    }
    .text {
        position: absolute;
        line-height: 55px;
        color: #fff;
        font-size: 36px;
        text-align: center;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        animation: show 2s cubic-bezier(0.74, -0.1, 0.86, 0.83) forwards; // 用到了贝赛尔曲线
    }
    @keyframes fade-away {
        30% {
            filter: brightness(1);
        }
        100% {
            filter: brightness(0);
        }
    }
    @keyframes show {
        20% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
}

融合效果

实现思路：需要用到的滤镜是blur和contrast

html  代码

 <div>
    <div class="box1"> </div>
    <div class="box2"> </div>
</div>

css 代码

div {
    margin: 50px auto;
    height: 140px;
    width: 400px;
    background: #fff; //给融合元素的父元素设置背景色
    display: flex;
    align-items: center;
    justify-content: center;
    filter: contrast(30); //给融合元素的父元素设置contrast
    div {
        border-radius: 50%;
        position: absolute;
        filter: blur(10px); //给融合元素设置 blur => 高斯模糊
    }
    .box1 {
        height: 90px;
        width: 90px;
        background: #03a9f4;
        transform: translate(-50px);
        animation: 2s moving linear infinite alternate-reverse;
    }

    .box2 {
        height: 60px;
        width: 60px;
        background: #0000ff;
        transform: translate(50px);
        animation: 2s moving linear infinite alternate;
    }

    @keyframes moving {
        0% {
            transform: translate(50px);
        }
        100% {
            transform: translate(-50px);
        }
    }
}

友情提示：blur设置图像的模糊程度，contrast设置图像的对比度。当两者像上面那样组合时，就会产生神奇的融合效果

contrast滤镜应用在融合元素的父元素上，且父元素必须设置background

blur滤镜应用在融合的子元素上

加载动画

在上述的基础上还可以实现loading动画，如下：

html 代码

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

.container {
    margin: 10px auto;
    height: 140px;
    width: 300px;
    background: #fff; //父元素设置背景色
    display: flex;
    align-items: center;
    filter: contrast(30); //父元素设置contrast

    .box {
        height: 50px;
        width: 60px;
        background: #e00606;
        border-radius: 50%;
        position: absolute;
        filter: blur(20px);  
        transform: scale(0.1);
        transform-origin: left top;
    }

    .box {
        animation: move 4s cubic-bezier(0.44, 0.79, 0.83, 0.96) infinite;
    }
    .box:nth-child(2) {
        animation-delay: 0.4s;
    }
    .box:nth-child(3) {
        animation-delay: 0.8s;
    }
    .box:nth-child(4) {
        animation-delay: 1.2s;
    }
    .box:nth-child(5) {
        animation-delay: 1.6s;
    }

    @keyframes move {
        0% {
            transform: translateX(10px) scale(0.3);
        }
        45% {
            transform: translateX(135px) scale(0.8);
        }
        85% {
            transform: translateX(270px) scale(0.1);
        }
    }
}

本人理解的还比较粗浅，希望大神指点一二~~

使用CSS滤镜属性filter实现电影、模糊及融合效果

前言

模糊效果

褪色效果

灰度效果

电影效果

融合效果

加载动画

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读