AUTO · 自动演示
参数调改
PLAYGROUND
颗粒强度--grain_opacity
0.050.35
颗粒尺寸--grain_size
140420
跳变周期--flicker_s
0.32
底光色 A--wash_a
底色--base
实现要点
NOTES- 01
颗粒纹理来自内联 SVG feTurbulence(fractalNoise + 去饱和)转 data-uri 背景平铺:零外部请求、零 JS,比 canvas 逐帧生成便宜得多;data-uri 里 # 必须写成 %23,属性引号用单引号避免与 url("…") 冲突。
- 02
胶片颗粒的关键是『跳变不插值』:animation-timing-function 用 steps(1, end),每个 keyframe 直接跳到下一个偏移——平滑移动的噪点会像果冻而不是颗粒。
- 03
颗粒层 inset:-60% 超出画布,8 个跳变偏移都在 ±3% 内,任何时刻都不会露出无纹理边缘;background-size(--grain_size)越大颗粒越粗。
- 04
只动 transform(合成器路径);mix-blend-mode: overlay 让噪点暗部压暗、亮部提亮,比单纯半透明更像物理颗粒,强度控制在 0.2 以内才不脏。
- 05
静态 wash 常显打底,颗粒层透明度独立可调;reduced-motion 下停用跳变,保留一层静态颗粒质感。
源代码
SOURCE
加载源代码…