css-filter属性-融合效果-1.1

css-filter属性-融合效果-1.1首先灰常感谢你所不知道的CSS滤镜技巧与细节。我看完这个filter属性后还是迷迷糊糊的。因为不清楚能干什么。但看完这篇文章的例子后发现filter属性真的很厉害。现在记录一些我的理解。融合效果如果你想直接看动图效果建议去上面的文章看,因为我不会做动图。不过可以大致截个图。前面的图是有融合效果的,那正常的如果两个圆交叠是什么样子的呢?…

    首先灰常感谢 你所不知道的 CSS 滤镜技巧与细节 。我看完这个filter属性后还是迷迷糊糊的。因为不清楚能干什么。但看完这篇文章的例子后发现filter属性真的很厉害。

    现在记录一些我的理解。

 

融合效果

    如果你想直接看动图效果建议去上面的文章看,因为我不会做动图。不过可以大致截个图。

    融合前面的图是有融合效果的,那正常的如果两个圆交叠是什么样子的呢?

    正常就是这个样子,你们可以对比一下,发现了么?

   为什么会有这种粘稠的感觉呢?他是先通过模糊,让一定区域内都有颜色,然后当两个圆交汇的时候,两个颜色融合也会形成颜色。然后再通过加强对比度,让边缘颜色不深的地方变得不明显,这样就形成了粘稠的效果。不懂?来上步骤。

<!doctype html>
<html lang="zh">
<head>
    <style>
        .base {
            background: #fff;
            height: 200px;
            position: absolute;
            width: 300px;
        }
        .base::before {
            background: #333;
            border-radius: 50%;
            content: "";
            height: 120px;
            left: 50px;
            position: absolute;
            top: 40px;
            width: 120px;
        }
        .base::after {
            background: #3F51B5;
            border-radius: 50%;
            content: "";
            height: 80px;
            left: 10px;
            position: absolute;
            top: 60px;
            width: 80px;
        }
    </style>
</head>
<body>
    <div class="base"></div>
</body>
</html>

    先定义两个圆。正常然后加模糊。代码就是给before和after的样式加

filter: blur(6px);

    模糊看到毛边没,这个其实就是粘稠感的根源。这个时候我们不能一直这样模糊的呀,不然什么也看不清。加大对比度,让毛边看不清。这时候我们给base加样式

filter: contrast(20);

    融合您要的粘稠感已送达,请注意查收。一波代码正在来袭,请做好准备。

<!doctype html>
<html lang="zh">
<head>
    <style>
        .base {
            background: #fff;
            filter: contrast(20);
            height: 200px;
            position: absolute;
            width: 300px;
        }
        .base::before {
            background: #333;
            border-radius: 50%;
            content: "";
            filter: blur(6px);
            height: 120px;
            left: 50px;
            position: absolute;
            top: 40px;
            width: 120px;
        }
        .base::after {
            background: #3F51B5;
            border-radius: 50%;
            content: "";
            filter: blur(6px);
            height: 80px;
            left: 10px;
            position: absolute;
            top: 60px;
            width: 80px;
        }
    </style>
</head>
<body>
    <div class="base"></div>
</body>
</html>

 

今天的文章css-filter属性-融合效果-1.1分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/30185.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注