有没有想过使用 css 可以实现两个元素之间拥有粘连的状态，当一个元素靠近另一个元素时，他们之间的间隙会越来越小，就像水滴靠近，两个水滴之间的间隙会越来越小，最后两个水滴会粘连在一起一样。
先来看看效果：
代码片段
1. 认识 filter 属性
filter 属性是 css3 新增的属性，用于对元素的渲染进行图形处理，比如模糊，颜色偏移，颜色反转等等。
filter 属性的值是一个函数，函数的参数是一个或多个数值，函数的返回值是一个图形处理后的元素。
今天我们要讲的是 filter 属性的 contrast 函数和 blur 函数。
1.1 contrast 函数
contrast 函数的作用是调整元素的对比度，参数是一个数值，数值越大，对比度越高，数值越小，对比度越低。
先看看函数的签名和用法：
/*
* contrast() 函数的签名
* contrast(<number> amount)
* amount: 0.0 - 1.0
* @param {number} amount - 对比度，数值越大，对比度越高，数值越小，对比度越低，默认值是 1.0，即不改变对比度，也可以高于 1.0，即提高对比度，或者是一个百分数，比如 50%。
contrast( <number> )
*/
div {
filter: contrast(1.5);
filter: contrast(150%);
}
稍微再讲一下对比度的概念，对比度是指两个颜色之间的明暗程度的差异，对比度越大，颜色之间的差异越明显，对比度越小，颜色之间的差异越小。
通常手机自带的相机都有一个对比度的调节功能，大家可以自己先去试一下，看一下效果。
1.2 blur 函数
blur 函数的作用是模糊元素，参数是一个数值，数值越大，模糊程度越高，数值越小，模糊程度越低。
看看函数的签名和用法：
/*
* blur() 函数的签名
* blur(<length> radius)
* radius: 0 - 100%
* @param {length} radius - 模糊程度，数值越大，模糊程度越高，数值越小，模糊程度越低，默认值是 0，即不模糊，也可以高于 100%，即模糊程度更高。
blur( <length> )
*/
div {
filter: blur(10px);
filter: blur(10%);
}
模糊的效果大家应该都很熟悉了，这里就不多说了。
2. 实现粘稠过渡
上面讲的两个函数都是用于对元素的渲染进行图形处理的，好像和我们要实现的效果没什么关系，但是他们两一结合，就可以实现我们要的效果了。
首先需要在父元素上面添加contrast函数，然后在子元素上面添加blur函数，这样就可以实现我们要的效果了。
结构如下：
<div></div>
极简主义者，依旧一个div搞定，里面的子元素就使用伪元素就好了，样式如下：
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #000;
}
div {
filter: contrast(20);
background: #000;
height: 300px;
width: 300px;
position: relative;
}
div::before,
div::after {
content: '';
border-radius: 50%;
height: 50px;
width: 50px;
filter: blur(5px);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
}
div::after {
top: 50%;
left: 50%;
transform: translate(0, 0);
}
ok，现在就可以看到效果了，虽然粘连在一起了，但是效果好像并不太好看，所以我们加点动画效果，让它动起来，效果会好很多。
动画就随便写一点吧：
div::after {
background: burlywood;
transform: rotate(45deg) translate(10px, 10px);
animation: surround 20s infinite;
}
@keyframes surround {
0% {
transform: rotate(0deg) translate(-50px, -50px);
}
25% {
transform: rotate(360deg) translate(0px, 0px);
}
50% {
transform: rotate(360deg) translate(20px, -20px);
}
75% {
transform: rotate(0deg) translate(-20px, 30px);
}
100% {
transform: rotate(0deg) translate(-50px, -50px);
}
}
这里使用到了之前写过transform的文章的知识点，所以修改了一点定位的样式，关于transform可以看我之前写的文章：卷一卷CSS的transform实现原理，头发又掉了10根！！！
ok，现在就可以看到效果了，修改了一下背景色，效果更好看一点。
3. 讲点细节
虽然不知道是谁想出这么搭配起来玩的，但是效果是真的不错呀，这里就讲讲这个效果的细节。
contrast函数需要放在父元素上面，上面讲过了，它是用来修改元素的对比度的，他的效果就是让元素的颜色变得更加鲜艳。
blur函数需要放在子元素上面，它用来模糊元素的边缘，模糊的边缘看起来不切实际，虚虚幻幻，然后通过加强对比度，模糊的边缘就看起来真切了。
但是边缘并不是真的是元素的体积，然后它们发生碰撞就会有一些奇怪的现象，比如颜色会叠加，边缘会变平滑，我们使用的就是边缘平滑这一特性，使之达到粘连的效果。
这里我就讲到这里了，我强烈建议大家自行尝试，使用控制台，将contrast的值慢慢调整对比效果，这样就明白为什么这样组合就可以达到粘连的效果了。
4. 总结
这里就讲到这里了，这个效果是我在网上看到的，然后自己尝试了一下，然后就写了这篇文章，不得不说css真的是一场创意的头脑风暴。
