说到噪音效果，第一个想到的就是信号不稳定或者画面不稳定时老式电视的效果。如果你没看过那种老电视，可以看看下面的gif动图。在真实情况下，噪音会变化得更快。对于gif的尺寸，截取时间较短，供参考。这就是今天文章的主题，我们要基于CSS来实现这个效果。当然，除了CSS之外，还可以使用SVG、canvas之类的。本文使用了一种CSS渐变技术，但是在实际项目中要谨慎使用，这种效果在不同的浏览器中会有所不同。锯齿效果首先通过radial-gradient绘制两个圆圈。你有没有发现这两个圈子有什么不同？通过仔细观察，可以看到左边的边缘是锯齿状的，右边的是光滑的。这也是实际开发中处理走样的一种方法，就是把值增加一点到小数位。background:radial-gradient(#00060%,#000060.5%)基于这个小数的效果，重复锥形渐变实现另一种渐变效果，重复锥形渐变，通过无限减小的值来发现它的奥秘小数点。可以看到下图中的值越小，中间部分的内容就会发生变化。.one{背景：重复圆锥梯度（#00005%，#0000010%）}.two{背景：重复圆锥梯度（#00002%，#000004%）}.three{background:repeating-conic-gradient(#00001%,#000002%)}基于此我们得到了一个奇怪的扭曲视觉效果，这与我们想要的颗粒效果相去甚远，因为我们仍然可以看到实际的二次方坡度。但是我们可以把这些值降低到非常非常小的值（比如0.0001%），突然就没有渐变了，只有纯颗粒感，如下图所示。background:repeating-conic-gradient(#00000.0001%,#000000.0002%)但是在真实的电视噪音中，会有一些条纹。这时候我们可以增加repeating-radial-gradient，结合混合模式background-blend-mode:difference让效果更加逼真。背景：重复径向渐变（#00000.0001%，#fff00.0002%）60%60%/3000px3000px，重复圆锥渐变（#00000.0001%，#fff00.0002%）40%40%/3000px3000px;background-blend-mode:difference;动画效果以上只是静态效果。如果要模拟没有信号的电视，需要增加动画效果。基于上面的代码，我们设置了background-position，那么你可以在动画中修改这个值，让每个动画中显示的值比较随机。animation:b.2sinfinitealternate;@keyframesb{100%{background-position:50%0,60%50%}}结合TV元素的加入，可以进一步感受真实效果。应用效果在此基础上，我们可以将其应用到其他场景，对图片应用噪点，通过鼠标悬停从噪点变为清晰效果。对文字应用噪声，这里主要使用文字背景裁剪，background-clip:text，结合上面的代码，可以产生如下效果。背景：重复径向渐变（#00000.0001%，#fff00.0002%）50%0/2500px2500px，重复圆锥渐变（#00000.0001%，#fff00.0002%）50%50%/2500像素2500像素；背景混合模式：差异；混合混合模式：变亮；-webkit-背景剪辑：文本；背景剪辑：文本；艺术效果，通过调整不同的小数值可以产生不同的效果。background:repeating-conic-gradient(#BF4D280.00005%,#E1F5C40.00017%)00/5000px4000px增加滤镜效果。过滤器：模糊（10px）对比度（150）亮度（80）；终于来了一个怪物效果。在线效果：https://code.juejin.cn/pen/71...最后结合混合模式和滤镜可以制作出各种效果。看到这里，你是不是也想试试呢？有许多新大陆等着你去发现。看完如果觉得有用，记得点个赞再走。说不定哪天会用到~关注前端开发，分享前端相关技术干货，公众号：南城大学前端（ID：nanchengfe）参考https://css-tricks.com/making...
