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

剪秋罗迭代
• 阅读 2476

提及噪点效果,首先想到的就是以前的旧电视机信号不稳定时或者画面不稳定时的效果。如果你没有看过那种旧电视,可以看下面的gif动图,真实的情况噪点的变化速度会快很多,这里为了gif的大小,截取的时间较短供参考。

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

这就是今天文章的主题,我们要基于CSS来实现这个效果。当然除了CSS之外,使用SVG,canvas之类的也是可以实现的,本文使用CSS渐变的一个技巧,但在实际的项目中要斟酌使用,且此效果在不同的浏览器中会所不同。

锯齿效果

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

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

重复圆锥渐变

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

.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%),然后突然之间就没有梯度了,只有纯粹的颗粒感,如下图所示。

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

background: 
    repeating-conic-gradient(#000 0 0.0001%,#0000 0 0.0002%) 

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

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

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%}
}

再配合增加电视机的元素,就能进一步感觉到真实的效果了。

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

应用效果

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

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

将噪点应用到文字中,这里主要还用到了文字背景裁剪,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;

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

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

background:
    repeating-conic-gradient(#BF4D28 0 .00005%,#E1F5C4 0 .00017%) 0 0/5000px 4000px

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

增加滤镜效果。

filter: blur(10px) contrast(150) brightness(80);

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

最后来一个怪物效果。

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

在线效果:https://code.juejin.cn/pen/71...

最后

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

专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

参考

https://css-tricks.com/making...

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Stella981 Stella981
3年前
SpringBoot学习:整合shiro自动登录功能(rememberMe记住我功能)
首先在shiro配置类中注入rememberMe管理器!复制代码(https://oscimg.oschina.net/oscnet/675f5689159acfa2c39c91f4df40a00ce0f.gif)/cookie对象;rememberMeCookie()方法是设置Cookie的生成模
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
3年前
HIVE 时间操作函数
日期函数UNIX时间戳转日期函数: from\_unixtime语法:   from\_unixtime(bigint unixtime\, string format\)返回值: string说明: 转化UNIX时间戳(从19700101 00:00:00 UTC到指定时间的秒数)到当前时区的时间格式举例:hive   selec
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Easter79 Easter79
3年前
SpringBoot学习:整合shiro自动登录功能(rememberMe记住我功能)
首先在shiro配置类中注入rememberMe管理器!复制代码(https://oscimg.oschina.net/oscnet/675f5689159acfa2c39c91f4df40a00ce0f.gif)/cookie对象;rememberMeCookie()方法是设置Cookie的生成模
Stella981 Stella981
3年前
JavaScript常用函数
1\.字符串长度截取functioncutstr(str,len){vartemp,icount0,patrn/^\x00\xff/,strre"";for(vari
Java服务总在半夜挂,背后的真相竟然是... | 京东云技术团队
最近有用户反馈测试环境Java服务总在凌晨00:00左右挂掉,用户反馈Java服务没有定时任务,也没有流量突增的情况,Jvm配置也合理,莫名其妙就挂了