前言
书接上回，在上次我们用SVG实现了黏糊糊效果，这一次将使用最基础的HTML、CSS、JS三件套来完成这个黏糊糊效果，不过最终呈现的效果会和SVG实现的有所不同。
效果展示
下面是效果展示。
布局分析
在效果上我们可以看出，整体是通过随机散落的元素来实现布局的，因此我们需要先创建一个元素，然后在该元素里随机添加多个其他元素。相关代码如下：
<div id="container"></div>
<script>
let container = document.getElementById('container')
let count = 40
for(let i = 0;i<count;i++){
let gooeyBox = document.createElement('div')
gooeyBox.className = 'box'
container.appendChild(gooeyBox)
}
</script>
这段代码创建了一个id为 “container” 的div元素，并在其中添加了40个class为 “box” 的div元素，并将它们添加到id为 ‘container’ 的元素节点中，如下图所示。
随机散落
如何实现随机散落呢？相关代码如下：
<script>
let gooey = document.getElementsByClassName('box')
setInterval(()=>{
for(let i=0;i<gooey.length;i++){
gooey[i].style.left = Math.floor(Math.random()*90) + 'vw'
gooey[i].style.top = Math.floor(Math.random()*90) + 'vh'
}
},2000)
</script>
我们需要定义了一个变量gooey，它通过getElementByClassName方法获取所有的 “box” 元素。然后使用setInterval函数，简单来说该函数会每隔2秒钟随机移动每个方块的位置。这个函数会循环遍历所有获取到的元素，对每个元素设置一个随机的left和top值，left和top值分别是一个随机数乘以页面宽度和高度的结果，使得元素在页面中随机移动。left和top属性是方块的水平和垂直位置，其中vw和vh是视口宽度和高度的单位，因此在不同大小的屏幕上，方块的位置会随机分布。
样式设置
最后就是进行相关样式设置了，我们需要将body元素的overflow属性被设置为hidden，这样做是为了防止页面出现滚动条。
body{
overflow: hidden;
}
实现模糊效果的关键在于滤镜函数filter：blur();，它可以将元素应用为高斯模糊效果，在我们这个效果中，我们将模糊程度设定为25px，并且还设置了过渡效果为2s，表示在改变该元素的样式时，会有一个平滑的过渡效果，持续时间为2s。
#container .box{
......
filter: blur(25px);
transition: 2s;
}
最后，我们在container元素中加入另一个滤镜函数filter：contrast();，用于调整元素的对比度。在我们的这个效果中，将对比度被设置为50%，意味着元素的亮度和暗度之间的差异将被增加。
#container{
......
filter: contrast(50);
}
如果将对比度设置为0，则元素将变为灰色，因为亮度和暗度之间的差异将被消除，如下图所示。
总结
到这里黏糊糊效果就这样完成了，该效果主要是通过JS方法和CSS滤镜支撑起来的，当然该效果还有很多可以扩展的空间，欢迎各位去尝试。如果各位有任何问题可以在评论区讨论~
