草庐IT

基于一段神奇的CSS渐变制作噪点效果

南城FE 2023-03-28 原文
提及噪点效果，首先想到的就是以前的旧电视机信号不稳定时或者画面不稳定时的效果。如果你没有看过那种旧电视，可以看下面的gif动图，真实的情况噪点的变化速度会快很多，这里为了gif的大小，截取的时间较短供参考。 这就是今天文章的主题，我们要基于CSS来实现这个效果。当然除了CSS之外，使用SVG，canvas之类的也是可以实现的，本文使用CSS渐变的一个技巧，但在实际的项目中要斟酌使用，且此效果在不同的浏览器中会所不同。

锯齿效果

首先通过radial-gradient画两个圆，有发现两个圆有什么不同吗，通过仔细观察可以看到左边的有锯齿，右边的很平滑。这也是在实际开发中处理锯齿的一种方式，就是将数值增加一点到小数位即可。

background: radial-gradient(#000 60%,#0000 60.5%)

重复圆锥渐变

基于这个小数的效果来实现另一种渐变的效果，重复圆锥渐变，通过无限的缩小小数的值发现其中的奥秘。可以看到下图数值越小的时候中间部分的内容发生了变化。

.one { background: repeating-conic-gradient(#000 0 5%,#0000 0 10%) } .two { background: repeating-conic-gradient(#000 0 2%,#0000 0 4%) } .three { background: repeating-conic-gradient(#000 0 1%,#0000 0 2%) } 基于此我们得到一个奇怪的扭曲的视觉，此时离我们想要的颗粒状效果还很远，因为我们仍然可以看到实际的二次曲线渐变。但我们可以将这些值减小到非常非常小的值（如0.0001%），然后突然之间就没有梯度了，只有纯粹的颗粒感，如下图所示。

background: repeating-conic-gradient(#000 0 0.0001%,#0000 0 0.0002%) 但在真实的电视噪点时还会伴随着一些条纹的效果，这时我们可以增加 repeating-radial-gradient 并结合混合模式 background-blend-mode: difference 使效果进一步的真实。

background: repeating-radial-gradient(#000 0 0.0001%,#fff 0 0.0002%) 60% 60%/3000px 3000px, repeating-conic-gradient(#000 0 0.0001%,#fff 0 0.0002%) 40% 40%/3000px 3000px; background-blend-mode: difference;

动画效果

以上仅是生成了静态的效果，如果要模拟电视没有信号的话还需要增加动画的效果，基于上面的代码我们设置了 background-position，那么可以在动画中修改这个值，让每次动画显示的值都是相对随机出现。

animation: b .2s infinite alternate; @keyframes b{ 100% {background-position: 50% 0, 60% 50%} } 再配合增加电视机的元素，就能进一步感觉到真实的效果了。

应用效果

基于此我们可以应用到其他的场景，将噪点应用到图片中，通过鼠标悬停由噪点变为清晰的效果。

将噪点应用到文字中，这里主要还用到了文字背景裁剪，background-clip: text，结合上面的代码就能生成以下的效果。

background: repeating-radial-gradient(#000 0 0.0001%,#fff 0 0.0002%) 50% 0/2500px 2500px, repeating-conic-gradient(#000 0 0.0001%,#fff 0 0.0002%) 50% 50%/2500px 2500px; background-blend-mode: difference; mix-blend-mode: lighten; -webkit-background-clip: text; background-clip: text;

艺术效果，通过调整不同的小数值能产生不同的效果。

background: repeating-conic-gradient(#BF4D28 0 .00005%,#E1F5C4 0 .00017%) 0 0/5000px 4000px 增加滤镜效果。

filter: blur(10px) contrast(150) brightness(80); 最后来一个怪物效果。 在线效果：https://code.juejin.cn/pen/7170502449210818598

最后

结合混合模式及滤镜能产生各种不同的效果，看到这你是不是也想尝试看看呢，有很多的新大陆等着你去发现。看完如果觉得有用记得点个赞再走，收藏起来说不定哪天就用上啦～

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）

参考

https://css-tricks.com/making-static-noise-from-a-weird-css-gradient-bug/

CSS基于backgroundgradientcodecss前端渐变噪点Html/CSS前端开发yyds干货盘点

有关基于一段神奇的CSS渐变制作噪点效果的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  3. 叮咚买菜基于 Apache Doris 统一 OLAP 引擎的应用实践 - 2

    导读：随着叮咚买菜业务的发展，不同的业务场景对数据分析提出了不同的需求，他们希望引入一款实时OLAP数据库，构建一个灵活的多维实时查询和分析的平台，统一数据的接入和查询方案，解决各业务线对数据高效实时查询和精细化运营的需求。经过调研选型，最终引入ApacheDoris作为最终的OLAP分析引擎，Doris作为核心的OLAP引擎支持复杂地分析操作、提供多维的数据视图，在叮咚买菜数十个业务场景中广泛应用。作者｜叮咚买菜资深数据工程师韩青叮咚买菜创立于2017年5月，是一家专注美好食物的创业公司。叮咚买菜专注吃的事业，为满足更多人“想吃什么”而努力，通过美好食材的供应、美好滋味的开发以及美食品牌的孵

  4. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  5. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  6. kvm虚拟机安装centos7基于ubuntu20.04系统 - 2

    需求：要创建虚拟机，就需要给他提供一个虚拟的磁盘，我们就在/opt目录下创建一个10G大小的raw格式的虚拟磁盘CentOS-7-x86_64.raw命令格式：qemu-imgcreate-f磁盘格式磁盘名称磁盘大小qemu-imgcreate-f磁盘格式-o?1.创建磁盘qemu-imgcreate-fraw/opt/CentOS-7-x86_64.raw10G执行效果#ls/opt/CentOS-7-x86_64.raw2.安装虚拟机使用virt-install命令，基于我们提供的系统镜像和虚拟磁盘来创建一个虚拟机，另外在创建虚拟机之前，提前打开vnc客户端，在创建虚拟机的时候，通过vnc

  7. 动漫制作技巧如何制作动漫视频 - 2

    动漫制作技巧是很多新人想了解的问题，今天小编就来解答与大家分享一下动漫制作流程，为了帮助有兴趣的同学理解，大多数人会选择动漫培训机构，那么今天小编就带大家来看看动漫制作要掌握哪些技巧？一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性，以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料，可以是手绘也可以是3d软件创建。在此步骤中，要注意的问题是色彩和平面布局。三、动漫制作制作完成后，加工成型。完成不同的表现形式后，就要对设计稿进行加工处理，使加工的难易度降低，并得到一些基本准确的概念，以便于后续的大样、准确的尺寸制定。四、

  8. Ruby 在 n *milli* 秒后超时一段代码 - 2

    在Ruby中，我需要在n毫秒秒后暂停一段代码的执行。我知道RubyTimeout库支持秒的超时:http://ruby-doc.org/stdlib/libdoc/timeout/rdoc/index.html这可能吗？ 最佳答案 只需为超时使用十进制值。n毫秒的示例:Timeout::timeout(n/1000.0){sleep(100)} 关于Ruby在n*milli*秒后超时一段代码，我们在StackOverflow上找到一个类似的问题： https:

  9. ruby-on-rails - 看不懂Ruby的神奇 - 2

    在railscasts项目中你可以看到这段代码:before(:each)dologin_asFactory(:user,:admin=>true)end函数对应的定义是:Factory.define:userdo|f|f.sequence(:github_username){|n|"foo#{n}"}end我不明白admin参数是如何传递给函数的，而函数中没有关于admin参数的字样。谢谢 最佳答案 Factory.define不是一个函数定义，它是一个方法，它接受一个符号或字符串(在本例中是用户)和一个定义你正在制作的工厂的bl

  10. ruby-on-rails - (Ruby,Rails) 基于角色的身份验证和用户管理...？ - 2

    我正在寻找用于Rails的优质管理插件。似乎大多数现有的插件/gem(例如“restful_authentication”、“acts_as_authenticated”)都围绕着self注册等展开。但是，我正在寻找一种功能齐全的基于管理/管理角色的解决方案——但不是简单地附加到另一个非基于角色的解决方案。如果我找不到，我想我会自己动手......只是不想重新发明轮子。 最佳答案 RyanBates最近做了两个关于授权的railscast(注意身份验证和授权之间的区别；身份验证检查用户是否如她所说的那样，授权检查用户是否有权访问资源

随机推荐