北京
最近在做一个模拟自然光的网页实验，灵感来自 Daylight Computer 和 Sunlit Place 两个网站。核心想法是用纯 CSS 构建一个百叶窗场景：窗外的叶子被阳光照亮，光线透过百叶窗缝隙洒在墙面上，形成柔和的扩散光斑。 整个项目没有用任何 canvas 或 WebGL，所有元素都是 div 配合 background 完成。叶子素材来自 Adobe Stock 的图片，统一缩小到 300×500 像素左右，因为后期本来就是要模糊处理，高清图没有必要。 百叶窗结构分为两组：横向的 shutters 和纵向的 bars，全部通过绝对定位叠放。关键不在结构，而在扩散效果的还原。 真实的光学效果有个特点：离墙越近的物体，投影越清晰；离墙越远，投影越模糊。所以要做出纵深感，不能只用一个模糊层。 我的做法是叠加四个 backdrop-filter 层，每层用不同的模糊半径，配合 mask-image 线性渐变控制各自的作用范围。第一层只覆盖顶部 0% 到 0% 区域，负责锐利的窗框边缘；第二层从 40% 到 80%，开启 12px 模糊；第三层 40% 到 70%，48px 模糊；第四层 70% 到 80%，96px 最大模糊。四层叠在一起，墙面上就会自然过渡出从清晰到弥散的渐变效果，而不是一刀切的全局模糊。 叶子本身还需要一点动态。先给每片叶子施加微小的 rotate 和 scale 变换，让整体有轻微摆动；但只有低频运动还不够，风应该是多层次的。这里用到了 SVG 滤镜里的 feTurbulence 和 feDisplacementMap，这两个标签平时很少被用到。通过 fractalNoise 生成一个噪声纹理，再映射到叶子的像素坐标，就能让每片叶子产生独立的、细碎的位移。 为了让风持续变化，还用 animate 标签驱动 baseFrequency 属性，从 0.005 0.003 开始，16 秒内经过 0.01 0.009、0.008 0.004，再回到起点，循环播放。这样噪声的频率和振幅同时变化，叶子就像真的被一阵阵风吹动一样。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
