4个CSS+SVG技巧模拟百叶窗光影，模糊层数决定真实感(附代码)

字节漫游指南

2026-08-11 01:19 ·北京

这段屏幕录制展示了一个纯前端实现的“百叶窗投射阳光”效果。灵感来自 Daylight Computer 和 Sunlit Place 两个网站，但作者没有使用任何图片或 canvas，而是用 div、backdrop-filter 和 SVG 滤镜堆出了动态光影。核心思路是：所有叶片、窗框、墙壁都是普通 div 加背景色，树叶素材来自 Adobe Stock 并压缩到约 300×500 像素，因为后续本来就要模糊处理。结构上，`#blinds` 容器内包含两层：水平叶片层和垂直窗棂层，每个叶片都是一个独立的 `div.shutter`。真正让效果逼真的是“渐进模糊”的分层设计。作者没有用一个全局模糊，而是把模糊拆成 4 层，每层用不同的 `backdrop-filter` 和 `mask-image` 联合控制。靠近墙壁的物体应该比离墙远的物体更模糊，所以模糊量从 6px、12px、48px 到 96px 递进，而蒙版用 `linear-gradient` 配合 `--stop1`、`--stop2` 两个 CSS 变量限定每层的作用范围，形成从清晰到模糊的连续过渡。叶片飘动则用了两层动画：第一层是 CSS 的 `rotate` 和 `scale` 轻微变化，让整簇树叶有呼吸感；第二层是 SVG 滤镜中的 `feTurbulence` 和 `feDisplacementMap`，通过 `animate` 动态改变 `baseFrequency`，产生持续 16 秒的分形噪点位移，为每片叶子叠加高频扰动，模拟风穿过叶片时的不规则摆动。整个实现没有一张视频帧、没有一段 JavaScript 动画库，仅靠 CSS 变量、叠加模糊和 SVG 原生滤镜就把阳光透过百叶窗的动态光影做足了质感。虽然代码量不大，但对浏览器的合成和滤镜性能有一定要求。