• 技术文章 >web前端 >css教程

    聊聊怎么使用CSS滤镜实现圆角及波浪效果

    青灯夜游青灯夜游2022-07-28 19:42:31转载167
    怎么利用CSS实现圆角及波浪效果?下面本篇文章带大家了解一下怎么巧用CSS滤镜构建圆角及波浪效果,希望对大家有所帮助!

    本文,将另辟蹊径,介绍一种使用滤镜去构建圆角的独特方式。【推荐学习:css视频教程

    首先,我们来看这样一个图形:

    一个矩形,没什么特别的,代码如下:

    div {
        width: 200px;
        height: 40px;
        background-color: #000;
    }

    如果,我们现在需要给这个矩形的两端加上圆角,像是这样,该怎么做呢:

    So easy,不过就是加个 border-radius 而已:

    div {
        width: 200px;
        height: 40px;
      + border-radius: 40px;
        background-color: #000;
    }

    好,那如果,不再是直线,而是一条曲线,希望曲线两端,带有圆角,像是这样,又该怎么办呢:

    image

    到这,基本上触及了传统 CSS 的天花板,想通过一个属性搞定这个效果是不太可能了。

    当然,有这样一种方式,通过首尾两端,利用两个伪元素,实现两个圆形,叠加上去:

    emm,这也是一个可行的方案,主要是定位会稍微有点点麻烦。那么除了这个方式以及直接使用 SVG 外,还有没有其他方法能够实现带圆角的曲线?

    有!在 CSS 中,我们还可以通过 filter: contrast() 配合 filter: blur() 这对组合来实现这个图形。

    filter: contrast() 配合 filter: blur() 的奇妙化学作用

    神奇的滤镜!巧妙实现内凹的平滑圆角 一文中,其实已经介绍过这个组合的另类用法。

    经常阅读我的文章的小伙伴,对 filter: contrast() 配合 filter: blur() 的组合一定不陌生,上经典的一张图:

    单独将两个滤镜拿出来,它们的作用分别是:

    但是,当他们“合体”的时候,产生了奇妙的融合现象。

    仔细看两圆相交的过程,在边与边接触的时候,会产生一种边界融合的效果,通过对比度滤镜把高斯模糊的模糊边缘给干掉,利用高斯模糊实现融合效果。

    当然,重点来了,blur 与 contrast 滤镜的组合不仅能用于这种融合效果,其特殊的性质使得它们的组合可以将直角变成圆角!

    先看看之前的一个例子:

    首先,我们只需要实现这样一个图形:

    <div class="g-container">
        <div class="g-content">
            <div class="g-filter"></div>
        </div>
    </div>
    .g-container {
        position: relative;
        width: 300px;
        height: 100px;
        
        .g-content {
            height: 100px;
            
            .g-filter {
                height: 100px;
                background: radial-gradient(circle at 50% -10px, transparent 0, transparent 39px, #000 40px, #000);
            }
        }
    }

    得到这样一个简单的图形:

    看到这里,肯定会疑惑,为什么这个图形需要用 3 层 div 嵌套的方式?不是一个 div 就足够了吗?

    是因为我们又要运用 filter: contrast()filter: blur() 这对神奇的组合。

    我们简单改造一下上述代码,仔细观察和上述 CSS 的异同:

    .g-container {
        position: relative;
        width: 300px;
        height: 100px;
        
        .g-content {
            height: 100px;
            filter: contrast(20);
            background-color: white;
            overflow: hidden;
            
            .g-filter {
                filter: blur(10px);
                height: 100px;
                background: radial-gradient(circle at 50% -10px, transparent 0, transparent 29px, #000 40px, #000);
            }
        }
    }

    我们给 .g-content 添加了 filter: contrast(20)background-color: white,给 .g-filter 添加了 filter: blur(10px)

    神奇的事情发生了,我们得到了这样一个效果:

    通过对比度滤镜把高斯模糊的模糊边缘给干掉,将原本的直角,变成了圆角,Amazing。

    通过一个 Gif 图更直观的感受:

    完整的代码你可以戳这里:CodePen Demo - Smooth concave rounded corners By filter

    https://codepen.io/Chokcoco/pen/JjroBPo

    通过滤镜实现圆角圆弧

    到这里,你应该知道如何通过直角圆弧得到圆角圆弧了。就是借助 filter: contrast() 配合 filter: blur() 的组合。

    直接上代码:

    div {
        position: relative;
        width: 250px;
        height: 250px;
        filter: contrast(20);
        background-color: #fff;
        overflow: hidden;
    }
    div::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        filter: blur(7px);
        border: 25px solid transparent;
        border-bottom: 25px solid #000;
        border-radius: 50%;
    }

    效果如下:

    通过 Gif 看,更加直观:

    CodePen Demo -- Arc with rounded corners

    https://codepen.io/Chokcoco/pen/bGveoPY

    使用 filter: contrast() 配合 filter: blur() 实现波浪效果

    好了,有了上面的铺垫,我们再来看一个有意思的。使用 filter: contrast() 配合 filter: blur() 实现波浪效果。

    在之前,我们如果想使用纯 CSS,实现下述的波浪效果,是非常的困难的:

    这种波浪效果,通常会使用在优惠券等切图中:

    在之前,我们是怎么去做的呢?如果不切图,使用纯 CSS 的话,需要使用两层渐变进行叠加,大概是这样,感受一下:

    bgg2

    其代码也比较复杂,需要不断的调试渐变,使两个径向渐变吻合:

    div {
        position: relative;
        width: 400px;
        height: 160px;
        background: linear-gradient(90deg, #945700 0%, #f49714 100%);
        
        &::before,
        &::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom :0;
        }
        &::before {
            width: 10px;
            background-image: radial-gradient(circle at -5px 10px, transparent 12px, #fff 13px, #fff 0px);
            background-size: 20px 20px;
            background-position: 0 15px;
        }
        &::after {
            width: 15px;
            background-image: radial-gradient(circle at 15px 10px, #fff 12px, transparent 13px, transparent 0px);
            background-size: 20px 40px;
            background-position: 0 15px;
        }
    }

    那么,如果使用 filter: contrast() 配合 filter: blur() 的话,整个过程将会变得非常简单。

    我们只需要实现这样一个图形:

    这个图形使用渐变是容易得到的:

    div {
        background: radial-gradient(circle at 20px 0, transparent, transparent 20px, #000 21px, #000 40px);
        background-size: 80px 100%;
    }

    按照上文介绍的技巧,只需要应用上 filter: contrast() 配合 filter: blur(),就能将锐利的直角转化成圆角。我们尝试一下:

    <div class="g-container">
        <div class="g-inner"></div>
    </div>
    .g-container {
        position: relative;
        margin: auto;
        height: 200px;
        padding-top: 100px;
        filter: contrast(20);
        background-color: #fff;
        overflow: hidden;
    }
    
    .g-inner {
        position: relative;
        height: 200px;
        background: radial-gradient(circle at 20px 0, transparent, transparent 20px, #000 21px, #000 40px);
        background-size: 80px 100%;
        filter: blur(10px)
    }
    可以写在 1 个 DIV 里面(通过元素和它的伪元素构造父子关系),也可以用 2 个,都可以,问题不大。

    得到如下所示的波浪图形:

    我们希望它波浪的地方的确是波了,但是我们不希望的地方,它也变成了圆角:

    这是 filter: blur() 的一个问题,好在,我们是可以使用 backdrop-filter() 去规避掉这个问题的,我们简单改造下代码:

    .g-container {
        position: relative;
        width: 380px;
        padding-top: 100px;
        filter: contrast(20);
        background-color: #fff;
        overflow: hidden;
        
        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            backdrop-filter: blur(10px);
            z-index: 1;
        }
    }
    .g-inner {
        position: relative;
        width: 380px;
        height: 100px;
        background: radial-gradient(circle at 20px 0, transparent, transparent 20px, #000 21px, #000 40px);
        background-size: 80px 100%;
    }

    这样,我们就实现了一份完美的波浪效果:

    部分同学可能对上面的 padding-top 100px 有所疑惑,这个也是目前我所发现的一个 BUG,暂未解决,不影响使用,你可以尝试将 padding-top: 100px 替换成 height: 100px。

    基于这种方式实现的波浪效果,我们甚至可以给它加上动画,让他动起来,也非常的好做,简单改造下代码:

    .g-inner {
        position: relative;
      - width: 380px;
      + width: 480px;
        height: 100px;
        background: radial-gradient(circle at 20px 0, transparent, transparent 20px, #000 21px, #000 40px);
        background-size: 80px 100%;
      + animation: move 1s infinite linear; 
    }
    
    @keyframes move {
        100% {
            transform: translate(-80px, 0);
        }
    }

    通过一个简单的位移动画,并且使之首尾帧一致,看上去就是连续的:

    完整的代码,你可以戳这里:CodePen Demo -- Pure CSS Wave

    https://codepen.io/Chokcoco/pen/PoRzeav

    SVG 滤镜,让使用更简单

    这就结束了吗?没有!上述双滤镜的组合固然强大,确实还是有一点麻烦。

    在强大的群友的补充下,再补充一种 SVG 滤镜的方案。这里,对于大部分场景,我们可以借助 SVG 滤镜,在 CSS 中一行引入,实现同样的功能。

    看这样一个 DEMO,我们有这样一个三角形:

    我们想通过它得到一个圆角三角形:

    借助 SVG 滤镜,其实也可以快速达成,省去了上面还需要叠加一个 filter: contrast() 的烦恼:

    <div class="g-triangle"></div>
    <svg width="0">
        <filter id="blur" color-interpolation-filters="sRGB">
          <feGaussianBlur stdDeviation="10" />
          <feComponentTransfer>
              <feFuncA type="table" tableValues="0 0 10"/>
          </feComponentTransfer>
        </filter>
    </svg>
    div {
            border: 60px solid transparent;
            border-left: 120px solid #f48;
            filter: url(#blur);
    }

    效果如下:

    是的,利用 filter: url(xxx) 可以快速引入一个定义好的 SVG 滤镜。也可以这样,直接嵌入到 URL 中:

    div {
            border: 60px solid transparent;
            border-left: 120px solid #f48;
            filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='blur' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 10'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3C/svg%3E#blur");
    }

    完整的代码,你可以戳这里:CodePen Demo -- triangle with rounded corners and shadow

    https://codepen.io/Chokcoco/pen/QWmEXPY

    总结一下

    本文介绍了一种使用 filter: contrast() 配合 filter: blur() 的方式,将直角图形变为圆角图形的方式,在一些特定的场景下,可能有着妙用。同时,在很多场景下,可以使用 SVG 滤镜简化操作。

    不过,这种方式也有几个小缺陷:

    当然,我觉得这两个小缺点瑕不掩瑜,在特定的场景下,此方式还是有一定的用武之地的。

    原文地址:https://segmentfault.com/a/1190000042217200

    作者:chokcoco

    (学习视频分享:web前端入门

    以上就是聊聊怎么使用CSS滤镜实现圆角及波浪效果的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:segmentfault,如有侵犯,请联系admin@php.cn删除
    专题推荐:滤镜 css
    上一篇:聊聊CSS中如何利用柏林噪声绘制炫酷图形! 下一篇:聊聊如何使用CSS实现比普通阴影更加立体的阴影效果!
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产• JavaScript实现简单的Ps滤镜效果(附代码)• CSS滤镜和混合模式处理的图片如何上传下载?• 详细介绍CSS渐变、阴影和滤镜• 聊聊怎么使用CSS滤镜实现内凹平滑圆角效果• 巧用CSS3滤镜制作文字快闪切换动画效果!
    1/1

    PHP中文网