这是一段屏幕录屏，展示了一个纯前端实现的光影动画：阳光从百叶窗缝隙中洒落，树叶随风微微飘动，扩散的光斑在墙上形成层层退晕。整个效果没有使用任何视频素材，全部由 div 背景、CSS 滤镜和 SVG 滤镜组合而成。原作者表示，灵感来自 daylightcomputer.com 和 sunlit.place 这两个专注自然光线氛围的网站。 百叶窗部分由水平叶片和垂直拉杆两组容器构成，叶片直接用 div 实现，所有结构都只依赖背景色和基础样式。树叶素材来自 Adobe Stock 的照片，被压缩到约 300x500 像素。因为后续本身就要做模糊处理，所以不需要高清原图，低分辨率反而更容易处理。 真正巧妙的在于“渐次模糊”效果。为了让靠近墙面的物体比远离墙面的物体更模糊，作者设置了多层模糊叠加：每一层都使用 backdrop-filter 控制模糊程度，再通过 mask-image 配合线性渐变限定作用范围。从透明到黑的不同 stop 位置，分别对应 6px、12px、48px、96px 的模糊半径，最终形成从清晰到弥散的细腻景深变化。 为了营造树叶起伏的动态，作者先用小幅度的 rotate 和 scale 让叶子在整体上摆动，再引入两个比较冷门的 SVG 滤镜元素：feTurbulence 和 feDisplacementMap。feTurbulence 能生成分形噪声，并通过动画动态改变 baseFrequency，用来模拟无规律的阵风；feDisplacementMap 则将噪声映射到图形上，使每片叶子都产生独立、高频的抖动，效果比单纯 CSS 动画更自然。 整个项目展示了一种思路：把 blur、mask 和 SVG 噪声组合起来，就能在浏览器里模拟出相当有物理质感的光影效果。没有复杂的三维引擎，也没有预渲染视频，只有几个 div 和一段简洁的滤镜代码。
热门跟贴