前言
马上就要放假了，不知道还有没有在公司的。我趁着在公司站好最后几天岗的摸鱼时间，学习了几个新的CSS特效，于是把它们整理成文章，这段时间会陆续发出。而这次首先带来的是一个关于裂变方块的效果。
这个裂变方块和普通的方块不一样，由于它加入了SVG，因此会让它看起来更高级一些。
效果预览
以上就是整个效果的预览状态，接下来将带大家实现这个不一样的方块。
HTML
首先我们来看到HTML部分的搭建，我们设定了四个div元素，代表裂变后的四个小方块。
<div class="cubes">
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
</div>
每个方块都有一个类名为cube的div元素。这四个方块都是嵌套在一个类名为cubes的div元素中。总的来说，这里创建了一个简单的方块组合。
CSS && SVG
有了HTML，接下来我们就可以来设计CSS样式了。这里代码会比较多，因此会省略一部分代码和只介绍关键重要的部分，完整代码大家可以前往码上掘金查看。
.cubes {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.cube {
position: absolute;
background: skyblue;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
border-radius: 25px;
animation: cube-left-top-anim cubic-bezier(0.75, 0, 0.175, 1) 4s infinite;
}
@keyframes cube-left-top-anim {
0% {
transform: scale(1.1) translate(0, 0);
}
33% {
transform: scale(0.9) translate(-65px, 0);
}
62% {
transform: scale(0.7) translate(-65px, -65px);
}
94% {
transform: scale(1.1) translate(0, 0);
}
}
.cube:nth-child(2) {
animation-name: cube-right-top-anim;
}
@keyframes cube-right-top-anim {
0% {
transform: scale(1.1) translate(0, 0);
}
33% {
transform: scale(0.9) translate(65px, 0);
}
62% {
transform: scale(0.7) translate(65px, -65px);
}
94% {
transform: scale(1.1) translate(0, 0);
}
}
3和4同理
......
我们定义了一个名为cube-left-top-anim的关键帧动画。这个关键帧动画包含了四个关键帧，分别是0%、33%、62%和94%。每个关键帧对应着动画在不同时间点的样式变化。
在 0% 关键帧，元素的transform属性被设置为scale(1.1) translate(0, 0)，这表示元素在原始大小的基础上进行了1.1倍的缩放，并且没有进行任何位移。
在 33% 关键帧，元素的transform属性被设置为scale(0.9) translate(-65px, 0)，这表示元素在原始大小的基础上进行了0.9倍的缩放，并且向左移动了65像素。
在 62% 关键帧，元素的transform属性被设置为scale(0.7) translate(-65px, -65px)，这表示元素在原始大小的基础上进行了0.7倍的缩放，并且向左上方移动了65像素。
在 94% 关键帧，元素的transform属性被设置为scale(1.1) translate(0, 0)，这表示元素在原始大小的基础上进行了1.1倍的缩放，并且没有进行任何位移。
总体来说，这里通过CSS动画实现了四个方块在页面中的不断变换位置和大小的效果。
接下来就是SVG的加入了，通过SVG可以给页面增加了一些动态和视觉上的吸引力。
<svg>
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" 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>
这里我们使用了两个滤镜效果：高斯模糊和颜色矩阵。首先，使用feGaussianBlur滤镜将原始图形进行高斯模糊处理，stdDeviation属性定义了模糊的程度。
然后，使用feColorMatrix滤镜对模糊后的图形进行颜色矩阵处理。values属性中的矩阵数值可以调整图像的颜色和亮度。这里的矩阵数值将原始图形的红、绿、蓝通道的值分别乘以1、0、0，0、1、0，0、0、1，0、0、0，最后一行的数值将图形进行了拉伸和偏移。
最后，使用feBlend将原始图形和经过颜色处理后的图形进行混合，得到最终的效果。
另外我们需要记住要在CSS中应用上去，否则看不到效果。
.cubes {
filter: url(#goo);
......
}
这个滤镜效果可以通过将其应用到SVG元素的filter属性上，例如<rect filter="url(#goo)" />，来实现粘性液体的效果，在此之前我也实现过一个关于SVG的黏糊糊效果，感兴趣的朋友可以去我主页看看。
总结
以上就是整个效果的实现过程，代码简单易懂，不仅适合入门学习基础知识，而且还可以了解到SVG方面的内容。关于SVG方面的内容在之前也发过一些相关的文章，欢迎大家去主页搜索阅读。最后，该效果的完整代码在码上掘金里可以查看，如果有什么问题欢迎大家在评论区里讨论~
（PS：这最后几天，都没心思写公司的代码了，只能在公司慢慢地摸鱼了）
原文链接：https://juejin.cn/post/7332735079162200099 作者：一条会coding的Shark
