svg实现水滴粘合效果

最新推荐文章于 2024-07-04 10:06:01 发布

Chenlie33

最新推荐文章于 2024-07-04 10:06:01 发布

阅读量762

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_24172179/article/details/82083884

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            filter: url(#goo);
        }
        .ciclr{
            border-radius: 50%;
            width: 100px;
            height: 100px;

        }
        .t11{
            background:#00b3ee;

        }
        .t22{
            background:#ef3e4a;

        }
    </style>
</head>

<body>
    <div class="ciclr t11"></div>
    <div class="ciclr t22"></div>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <filter id="goo">
                <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
                <feBlend in="SourceGraphic" in2="goo" />
            </filter>
        </defs>
    </svg>
</body>
</html>

feGaussianBlur：设置模糊的阈值

feColorMatrix ：将决定颜色交接处的颜色此处

feBlend ：结合两个滤镜