CSS配合JS实现的黏糊糊效果，不来看看？

前言

书接上回，在上次我们用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滤镜支撑起来的，当然该效果还有很多可以扩展的空间，欢迎各位去尝试。如果各位有任何问题可以在评论区讨论~