手把手教你用SVG实现黏糊糊效果

前言

好久没更文了，距离上次更文差不多一个多月了，这次兴致起来了，便想着来更新一波文章。这次带来的是SVG相关的内容，一个多月前在学习SVG，这一个月内忙于其他事情，对SVG就是浅浅地看了一下，但是并不影响我将要介绍的黏糊糊效果。

码上效果

这个是我们即将要实现的效果图，感兴趣的朋友可以继续往下阅读。

初始化布局

关于SVG的简介这里就不介绍了，想看的朋友可以去看看这篇文章手把手教你用SVG实现具有波浪状态的盒子。这里我们直接进入主题。

我们根据效果可以得知，是两个圆形“碰撞”到一起之后又离开，这个过程中产生了黏糊糊效果。因此我们需要准备两个圆形。

 <div class="container">
        <div class="circle circle1"></div>
        <div class="circle circle2"></div>
 </div>

手把手教你用SVG实现黏糊糊效果

这两个圆形是主体部分，接下来就可以进行SVG的绘制了。

SVG绘制

 <svg>
        <filter id="gooey">
            <feGaussinaBlur in="SourceGraphic" stdDeviation="10"/>
            <feColorMatrix values="
            1 0 0 0 0
            0 1 0 0 0
            0 0 1 0 0
            0 0 0 20 -10
            "/>
        </filter>>
 </svg>

这是一个ID名为“gooey”的SVG滤镜。”gooey“是一种图形效果过滤器，它可以在图像或文本上创建一种类似于液体的效果，使其看起来像是被粘在一起或被拉伸。

feGaussianBlur会对输入的图形进行高斯模糊处理，in="SourceGraphic"表示输入图形是SourceGraphic，使用当前元素作为输入源。stdDeviation属性指定了模糊程度，在这里我们设置了模糊程度为10。

feColorMatrix则用于改变颜色矩阵，从而改变图形的颜色。其中，values属性中的五个数字分别对应了颜色矩阵中的a、b、c、d、e五个参数，用于实现不同的调整效果。在我们这个效果中，它将所有红色、绿色和蓝色的值分别乘以1保持不变，再将最后一个参数-10加到每个像素中，将整个图像变暗，以产生一种黏糊糊的效果。

样式设置

上面的工作完成后，此时页面是不会出现任何效果的，因为没有CSS部分。接下来就来添加CSS了。

.container{
    ......
    filter: url(#gooey);
}

首先我们需要在主体部分表明我们使用了ID为“gooey”的SVG滤镜元素。

.container .circle::before{
    ......
    filter: blur(50px);
}
.container .circle.circle1, .container .circle.circle1::before{
    background: #da00ff;
}
.container .circle.circle2, .container .circle.circle2::before{
    background: #ffeb3b;
}
.container .circle.circle1{
    animation: animate1 5s linear infinite;
}
.container .circle.circle2{
    animation: animate2 5s linear infinite;
}

这段CSS代码是用来创建一个圆形的背景效果，并且使用动画让圆形不断地变化。首先使用伪元素:before创建一个圆形，并使用模糊滤镜让其模糊。然后为两个circle类创建不同的背景颜色，分别为紫色和黄色，并为circle类设置动画animateX，让其在5秒钟内线性无限循环。总的来说，这段代码的作用是添加一个动态的背景效果。

动画相关代码如下所示，此处省略了animate2。

@keyframes animate1 {
    0%{
        transform: translateX(0)
    }
    30%{
        transform: translateX(150px)
    }
    60%{
        transform: translateX(150px)
    }
    100%{
        transform: translateX(0)
    }
}

该动画的主要作用是让这两个circle类进行偏移，从而产生“碰撞”而又离开的效果。