您现在的位置是:首页 > Javascript
当前栏目
css渐变实现杂色
2023-02-19 12:22:59 时间
团结就是力量——毛泽东
思路出处:https://css-tricks.com/making-static-noise-from-a-weird-css-gradient-bug/
这是一个通过css
渐变产生的锯齿BUG
实现的噪点效果
例如我们使用径向渐变画两个圆,这里用的径向渐变函数radial-gradient
,其中第一个参数是距离中心点近的渐变样式,第二个是远一些的,每个参数中第一项是颜色,第二项是区域
这里的:
从中心点进行沿半径进行渐变
<div class="box"></div>
<div class="box"></div>
<style>
.box {
display: inline-block;
width: 300px;
aspect-ratio: 1;
margin: 10px;
border: 2px solid red;
background: radial-gradient(#000 60%,#0000 0)
}
.box + .box {
background: radial-gradient(#000 60%,#0000 60.5%)
}
</style>
距离近一些的颜色是#000
黑色,且显示区域占60%
距离远一些的也显示黑色,但透明度为0
(即不显示),且显示区域为0
(第二个圆是60.5%
,比第一个的区域多出了0.5%
)
可以看到第一个圆,包含了一些锯齿,第二个没有是因为第二个的第二项渐变,盖过了锯齿
我们用这个锯齿的BUG
,将显示比例的数值改到特别小,再允许其重复渲染
<div class="x-noise"></div>
<style>
.x-noise {
width: 300px;
height: 300px;
background:
repeating-conic-gradient(#000 0 0.0001%,#0000 0 0.0002%)
}
</style>
效果:
但这并不是一个完全版,仔细看中间还有一个圆心,完全版可以在径向渐变的基础上,再加上一个锥形渐变、调整圆心位置实现:
<div class="noise"></div>
<style>
.noise {
width: 300px;
height: 300px;
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;
}
</style>
我们可以将其覆盖到另一张图片上,因为有background-blend-mode: difference;
能够实现这种效果
相关文章
- [你必须知道的JavaScript]解构赋值
- JavaScript基础
- 手写一个格式化json工具
- threejs旋转入门
- 我用nodejs实现了热加载接口文件,感觉又离“serverless”进了一步
- nodejs 解决sql注入方案
- nvm-windows管理nodejs版本神器——代理和镜像配置
- 关于node代码如何丝滑执行多条命令行这件事
- JavaMoney规范(JSR 354)与对应实现解读
- Node.js 应用全链路追踪技术——[全链路信息获取]
- api接口返回动态的json格式?我太难了,尝试一下 linq to json
- 对 JsonConvert 的认识太肤浅了,终于还是遇到了问题
- Node.js 模块化你所需要知道的事
- 初识 D3.js :打造专属可视化
- knockoutjs如何动态加载外部的file作为component中的template数据源
- NodeJs和NPM的基本操作
- 使用 System.Text.Json 时,如何处理 Dictionary 中 Key 为自定义类型的问题
- 如何使用 System.Text.Json 序列化 DateTimeOffset 为 Unix 时间戳
- javascript使用正则表达式替换或者捕获子字符串
- FastAPI从入门到实战(14)——JSON编码兼容与更新请求