前言
大家都经历过在屏幕上出现卡顿的情况吧，它会出现很多小像素方块，这种效果被称作为电视噪音效果。因此这次带来的是一款电视噪音特效，模拟电视噪音。
效果一览
整体实现
还是老样子，我们需要创建一个 id 为 container 的 div 元素。
<div id="container"></div>
然后在 CSS 中为它加入一个全屏背景图片的效果，将其宽度和高度都设置为 100%，这样它就会占满整个页面。这里需要注意的是，将 background-attachment 属性设置为 fixed，这样背景图片就不会随着页面的滚动而移动了。
#container{
position: absolute;
width: 100%;
height: 100%;
background: url(......);
background-attachment: fixed;
}
关于这个效果关键实现部分在 JS 代码中，我们来分析一下 JS 代码。相关代码如下：
<script>
......
setInterval(()=>{
let glitch = document.getElementsByClassName('box')
for(let i=0;i<glitch.length;i++){
glitch[i].style.left=Math.floor(Math.random()*100)+"vw"
glitch[i].style.top=Math.floor(Math.random()*100)+"vh"
glitch[i].style.width=Math.floor(Math.random()*400)+"px"
glitch[i].style.height=Math.floor(Math.random()*100)+"px"
......
}
},200)
</script>
我们通过 JS 方法获取该元素，将其赋值给变量 bg。然后设置一个循环来创建 30 个 div 元素，每个元素的类名为 box，并将它们添加到 container 元素中。
接下来，在 setInterval 函数每 0.2 秒执行一次回调函数。该函数获取所有类名为 box 的元素，并对它们进行随机的 CSS 样式设置，包括位置、宽度、高度和背景位置，该样式设置就可以实现了一个随机闪烁的效果。
我们再回到 CSS 部分，在 CSS 中我们需要创建一个黑色的半透明遮罩层，相当于噪点。相关代码如下：
.box{
position: absolute;
background: #000;
background: url(......);
background-attachment: fixed;
}
该段 CSS 代码是作用在 box 元素上的，同理需要将 background-attachment 属性设置为 fixed，防止背景图片随着页面的滚动而移动。
到这里该效果就算完成了。
总结
以上就是电视噪音效果的实现过程了，整体而言并不难，其实关于它的实现还有很多种方式，比如 jQuery，感兴趣的朋友可以去尝试一下。在介绍过程中代码并未完全给出，完整代码可以前往码上掘金查看。如果大家还有更好的实现方式的话，欢迎各位在评论区告诉我~
