sunilwang

V1

2022/07/26阅读:8主题:绿意

CSS3 Filter 如此简单!

作者简介

王莉:一位新妈妈

一、概念

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

二、用法

单属性用法

filternone | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

多属性组合使用

// 用空格分隔每个属性
filterblur(5pxopacity(0.8)  brightness(0.8);

三、filter的兼容性

为了兼容低版本的Safari、Chrome和Opera浏览器,需要加上前缀-webkit- 。

cookie.png
cookie.png

四、属性简介

cookie.png
cookie.png

1、grayscale(灰度)

将图片过滤成灰色,取值为0-1或者0%-100%之间,默认值是0。 cookie.png

2、sepia(褐色)

将图片过滤成怀旧复古的风格,值为0-1或者0%-100%之间的值,默认值是0 cookie.png

3、saturate(饱和度)

转换图像饱和度,值为0%是完全不饱和,图像呈现黑白色,默认值是100%,值为100%图像无变化,超过100%的值是允许的,则有更高的饱和度(图片颜色更深更亮),值只能是大于等于0的值,取负数的表现和默认值是一样的。 cookie.png

4、contrast(对比度)

调整图像的对比度,值是0%的话,图像会全黑,默认值是100%,值为100%图像无变化,值可以超过100%,意味着会运用更低的对比。 cookie.png

5、hue-rotate(色相旋转)

让图像中的颜色,在色相环中做对应的旋转,默认值是0deg,值为0deg,图像无变化,该值虽然没有最大值,但超过360deg的值相当于又绕一圈。 cookie.png

6、invert(反色)

将图片过滤成类似于照片底片的感觉,取值为0-1或者0%-100%之间,默认值是0%。 cookie.png

7、brightness(亮度)

改变图片的亮度,使其看起来更亮或更暗。如果值是0%,图像会全黑,默认值是100%,值是100%时,图像无变化,值超过100%也是可以的,图像会比原来更亮。 cookie.png

8、opacity(透明度)

改变图像的透明程度,值为0%则是完全透明,默认值是100%,值为100%图像无变化,0-100%之间则是部分透明。也可以用0-1之间的小数替代0%-100%。 cookie.png

9、blur(模糊)

给图像设置高斯模糊。值越大越模糊,默认是0。 cookie.png

10、drop-shadow(阴影)

给图像设置阴影。 cookie.png

filter属性汇总对比图

cookie.png
cookie.png

五、应用

1、电影谢幕效果

技术要点:

  • 使用brightness滤镜实现对背景图明暗度的控制。
  • 使用opacity滤镜实现对文案展示与否的控制。
  • 动画(animation)的使用。
cookie.png
cookie.png
代码实现:
<html>
    <head>
        <title>关于filter-电影谢幕效果</title>
        <meta charset="utf-8"></meta>
        <style>
            .title{
                margin20px;
                font-size25px;
            }


            .pic{
                height100%;
                width100%;
                position: absolute;
                backgroundurl('./images/movies-picture1.jpeg') no-repeat;
                background-size: cover;
                animation: fade-away 4s linear forwards;
                /*animation-fill-mode forwards当动画完成后,保持最后一帧的状态 */
            }
            .text{
                position: absolute;
                line-height55px;
                color#fff;
                font-size36px;
                text-align: center;
                left50%;
                top50%;
                transformtranslate(-50%,-50%);
                filteropacity(0);
                animation: show 4s cubic-bezier(.74,-0.1,.86,.83) forwards;
            }
            /* 背景图的明暗度动画 */
            @keyframes fade-away {
                30%{
                    filterbrightness(1);
                }
                100%{
                    filterbrightness(0);
                }
            }
            /* 文字的透明度动画 */
            @keyframes show{
                20%{
                    filteropacity(0);
                }
                100%{
                    filteropacity(1);
                }
            }
        
</style>
    </head>
    <body>
        <div class="title">filter-电影谢幕效果</div>
        <div class="container">
          <div class="pic"></div>
          <div class="text">
            <p>如果生活中有什么使你感到真正快乐,那就去做吧</p>
            <br>
            <p>不用管别人说什么</p>
          </div>
        </div>
    </body>
</html>

2、模糊效果

技术要点:

  • 将卡片的背景图加在了伪类上,因为,父元素加了滤镜,它的子元素都会一起由该滤镜改变,所以如果滤镜直接加在卡片元素上,就会导致卡片上面的文字也变模糊。
  • 非hover的卡片元素使用组合滤镜(filter:blur(5px) opacity(0.8) brightness(0.8))实现卡片背景图的模糊效果。
  • hover的卡片元素使用saturate滤镜实现对卡片背景图的突出强调。
  • 动画(transition)的使用。
cookie.png
cookie.png

代码实现:

<html>
    <head>
        <title>关于filter-模糊效果</title>
        <meta charset="utf-8"></meta>
        <style>
            .title{
                margin20px;
                font-size25px;
            }
            .cards{
                display: flex;
                justify-content: center;
            }
            .card{
                width300px;
                height400px;
                color: white;
                font-size20px;
                margin0 30px;
                padding0 20px;
            }
            .text{
                padding0 15px;
            }
            .card:hover{
                cursor: pointer;
            }


            .card:before{
                width300px;
                height400px;
                z-index: -1;
                content'';
                position: absolute;
                backgroundurl('./images/movies-picture1.jpeg') no-repeat center;
                background-size: cover;
                border-radius20px;
                transition: filter 200ms linear, transform 200ms linear;
            }
            /* 通过css选择器选出非hover的.card元素,给其伪类添加模糊、透明度和明暗度的滤镜  */
            .cards:hover > .card:not(:hover):before{
                filterblur(5pxopacity(0.8)  brightness(0.8);
            }
            /* 对于hover的元素,其伪类增强饱和度,尺寸放大 */
            .card:hover:before{
                filtersaturate(2);
                transformscale(1.05);
            }
        
</style>
    </head>
    <body>
        <div class="title">filter-模糊效果</div>
        <div class="cards">
            <div class="card">
                <p class="text">Flower</p>
                <p class="text">The flowers mingle to form a blaze of color.</p>
            </div>
            <div class="card">
                <p class="text">Sunset</p>
                <p class="text">The sunset glow tinted the sky red.</p>
            </div>
            <div class="card">
                <p class="text">Plain</p>
                <p class="text">The winds came from the north, across the plains, funnelling down the valley. </p>
            </div>
        </div>
    </body>
</html>

3、褪色效果

技术要点:

  • 图片的褪色效果使用组合滤镜(filter: sepia(30%) saturate(40%) hue-rotate(5deg))实现。
  • hover的图片去掉所有滤镜效果(filter:none)。
  • 动画(transition)的使用。
cookie.png
cookie.png

代码实现:

<html>
    <head>
        <title>关于filter-褪色效果</title>
        <meta charset="utf-8"></meta>
        <style>
            .title{
                margin20px;
                font-size25px;
            }
            .bg{
                display: flex;
                align-items: center;
                justify-content: center;
                width100%;
                height400px;
                background#edecdb;
                border-radius15px;
            }
            .pic1{
                width240px;
                height190px;
            }
            .pic2{
                width240px;
                height300px;
            }
            .pic3{
                width240px;
                height190px;
            }
            .pic4{
                width240px;
                height136px;
            }


            .bg img{
                padding0 5px;
                border3px solid #fff;
                box-shadow0 10px 50px #5f2f1182;
                filtersepia(30%saturate(40%hue-rotate(5deg); /*退色效果*/
                transition: transform 1s;
            }
            .bg img:hover{
                filter: none;
                transformscale(1.2translateX(10px);
                z-index1;
            }
        
</style>
    </head>
    <body>
        <div class="title">filter-褪色效果</div>
        <div class="bg">
            <img src="./images/movies-picture1.jpeg" class="pic1">
            <img src="./images/2.jpeg" class="pic2">
            <img src="./images/3.jpeg" class="pic3">
            <img src="./images/4.jpeg" class="pic4">
            <img src="./images/movies-picture1.jpeg" class="pic1">
        </div>
    </body>
</html>

4、融合效果

技术要点:

  • blur滤镜应用在融合元素上,实现模糊效果,融合元素四周出现毛边。
  • 通过contrast滤镜加强融合元素父元素的对比度,使融合元素四周的毛边粘黏在一起。

cookie.png 正常两个圆交叠

cookie.png 使用blur滤镜在两个圆上面

cookie.png 使用contrast滤镜在两个圆父元素上面

代码实现:

<html>
    <head>
        <title>关于filter-融合效果</title>
        <meta charset="utf-8"></meta>
        <style>
            .title{
                margin20px;
                font-size25px;
            }
            .container{
                margin50px auto;
                height140px;
                width400px;
                background#fff;   /*给融合元素的父元素设置背景色*/
                display: flex;
                align-items: center;
                justify-content: center;
                filtercontrast(50);    /*给融合元素的父元素设置contrast*/
            }
            .circle{
                border-radius50%;
                filterblur(10px);    /*给融合元素设置blur*/
            }
            .circle-1{
                height110px;
                width110px;
                background#03a9f4;
            }
            .circle-2{
                height80px;
                width80px;
                background#0000ff;
                transformtranslate(-40px);
            }
        
</style>
    </head>
    <body>
        <div class="title">filter-融合效果</div>
        <div class="container">
            <div class="circle circle-1"></div>
            <div class="circle circle-2"></div>
        </div>
    </body>
</html>

4.1、融合效果之水滴融合

技术要点:

  • blur滤镜应用在三个圆圈上。
  • contrast滤镜应用三个圆圈的父元素上面。
  • 动画(transition)的使用。
  • hover到三个圆圈的父元素上面时,将第一个和第三个圆圈分别向左右移动。
cookie.png
cookie.png

代码实现:

<html>
    <head>
        <title>关于filter-融合效果</title>
        <meta charset="utf-8"></meta>
        <style>
            .title{
                margin20px;
                font-size25px;
            }
            .box {
                height100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color#111;
                filtercontrast(30);  /*父元素设置对比度*/
            }
            .drop {
                width150px;
                height150px;
                border-radius50%;
                background-color: white;
                position: absolute;
                filterblur(15px); /*子元素设置模糊度*/
                transition: transform 1s;
            }
            .box:hover .drop-1 {
                transformtranslateX(-180px);
            }
            .box:hover .drop-3 {
                transformtranslateX(180px);
            }
        
</style>
    </head>
    <body>
        <div class="title">filter-融合效果应用之水滴融合</div>
        <div class="box">
            <div class="drop drop-1"></div>
            <div class="drop drop-2"></div>
            <div class="drop drop-3"></div>
        </div>
    </body>
</html>

4.2、融合效果之文字融合

技术要点:

  • contrast滤镜应用在文字的父元素上面。
  • 动画(animation)的使用,使用blur滤镜和letter-spacing属性制作作用在文字上的动画。 cookie.png

代码实现:

<html>
    <head>
        <title>关于filter-融合效果</title>
        <meta charset="utf-8"></meta>
        <style>
            .title{
                margin20px;
                font-size25px;
            }

            .container{
                margin-top50px;
                text-align: center;
                background-color#000;
                filtercontrast(30);  /*父元素设置对比度*/
            }
            .text{
                font-size100px;
                letter-spacing: -40px;
                color#fff;
                animation: move-letter 4s linear forwards;  /*forwards当动画完成后,保持最后一帧的状态*/
            }
            @keyframes move-letter{
                0% {
                    letter-spacing: -40px;
                    filterblur(10px); /*子元素设置模糊度*/
                }
                50% {
                    filterblur(5px);
                }
                100% {
                    letter-spacing15px;
                    filterblur(2px);
                }
            }
        
</style>
    </head>
    <body>
        <div class="title">filter-融合效果应用之文字融合</div>
        <div class="container">
            <span class="text">helloworld!</span>
        </div>
    </body>
</html>

5、水波效果

技术要点:

  • filter可以通过 URL 链接到 SVG filter。
  • 两个img标签使用同一张图片,将第二个img标签使用scaleY(-1)实现垂直方向的镜像翻转,模拟倒影。
  • 对倒影图片使用feTurbulence滤镜,通过动画不断改变feTurbulence滤镜的baseFrequency值实现水纹波动的效果。 cookie.png

代码实现:

<html>
    <head>
        <title>关于filter-水波效果</title>
        <meta charset="utf-8"></meta>
        <style>
            .title{
                margin20px;
                font-size25px;
            }
            .container{
                height520px;
                width400px;
                display: flex;
                clip-pathinset(10px);
                flex-direction: column;
            }
            img{
                height50%;
                width100%;
            }
            .reflect {
                transformscaleY(-1);
                /* 对模拟倒影的元素应用svg filter,url中对应的是上面svg filter的id */
                filterurl(#displacement-wave-filter);
            }
        
</style>
    </head>
    <body>
        <div class="title">filter-水波效果</div>
        <div class="container">
            <img src="./images/movies-picture1.jpeg">
            <img src="./images/movies-picture1.jpeg" class="reflect">
        </div>

        <!--定义svg滤镜,这里使用的是feTurbulence滤镜-->
        <svg width="0" height="0">
            <filter id="displacement-wave-filter">
                <!--baseFrequency设置0.01 0.09两个值,代表x轴和y轴的噪声频率-->
                <feTurbulence baseFrequency="0.01 0.09">
                    <!--这是svg动画的定义方式,通过动画不断改变baseFrequency的值,从而形成波动效果-->
                    <animate
                        attributeName="baseFrequency"
                        dur="20s"
                        keyTimes="0;0.5;1"
                        values="0.01 0.09;0.02 0.13;0.01 0.09"
                        repeatCount="indefinite"
                    >
</animate>
                </feTurbulence>
                <feDisplacementMap in="SourceGraphic" scale="10" />
            </filter>
        </svg>
    </body>
</html>

5、抖动效果

cookie.png
cookie.png

代码实现:

<html>
    <head>
        <title>关于filter-抖动效果</title>
        <meta charset="utf-8"></meta>
        <style>
            .title{
                margin20px;
                font-size25px;
            }
            .container{
                text-align: center;
                width100%;
                height400px;
                background: black;
            }
            .shaky{
                line-height400px;
                color: white;
                font-size60px;
                filterurl(#displacement-text-filter);
                /* url中对应的是上面svg filter的id */
            }
        
</style>
    </head>
    <body>
        <div class="title">filter-抖动效果</div>
        <div class="container">
            <p class="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>
    </body>
</html>


LBG开源项目推广:

还在手写 HTML 和 CSS 吗?
还在写布局吗?
快用 Picasso 吧,Picasso 一键生成高可用的前端代码,让你有更多的时间去沉淀和成长,欢迎Star

开源项目地址:https://github.com/wuba/Picasso
官网地址:https://picassoui.58.com

分类:

前端

标签:

CSS

作者介绍

sunilwang
V1