最近有人用纯前端复刻了阳光穿过百叶窗后的光影效果。项目录屏名为 Screen.Recording.2024-11-11.at.1.49.49.PM.mov，灵感来自 Daylight Computer 和 Sunlit Place 两个网站。作者没有引入复杂的 3D 引擎，而是依靠 CSS 的多个模糊层、遮罩和 SVG 噪声，做出一套会微微晃动的“窗边阳光”。 整个效果最核心的一句话是：全部内容只是带背景的 div。百叶窗叶片素材来自 Adobe Stock 照片，统一缩到大约 300×500 像素再使用，因为后续本来就会做模糊处理，细节不需要保留太多。 结构上，页面用 #blinds 容器区分两个部分：横向的 shutters 由多个 shutter 组成，模拟百叶窗的横条；vertical 里的 bar 则模拟竖向窗棂。两部分叠加后，才有窗格和百叶的层次感。 真正的关键是渐进式模糊。如果只给整面墙加一个 backdrop-filter，靠近墙的部分和远离墙的部分会一样糊，效果立刻变得很假。作者的做法是在 #progressive-blur 里放多层绝对定位的 div，每层使用不同的 blur 值，再用 mask-image 的线性渐变控制模糊区域。例如第一层 blur 6px，负责近处清晰轮廓；第二层 12px 和第三层 48px 负责过渡；最后一层 96px 负责远处大面积柔光。这样从窗边到墙面，模糊程度按距离递增，视觉上更接近真实漫射光。 为了让叶片不显得死板，作者先给整体加上小的 rotate 和 scale 变化，形成类似被风吹动的低频率摆动。再进一步使用 SVG 滤镜 feTurbulence 和 feDisplacementMap。前者生成分形噪声，后者把噪声映射到叶片形状上，让每一片叶子的边缘都产生更细腻、更高频的位移。两层动画叠加之后，既有百叶整体的起伏，又有单张叶片的轻微翻动，整幅画面才“活”起来。 这个项目给前端做环境氛围提供了一个很实用的思路：真实感不靠复杂贴图，而靠层次。多个模糊层配合遮罩，加上少量噪声扰动，就能让简单的 div 背景拥有接近自然光影的质感。如果只想要低成本营造“阳光穿过百叶窗”的沉浸背景，这套方法可以直接拿来参考。
热门跟贴