AI 摘要：本文探讨了如何使用 CSS 的 mix-blend-mode 属性创建类似 WebGL 着色器的视觉效果，而无需依赖 JavaScript。作者 Robb Owen 详细介绍了通过 CSS 层叠、渐变和混合模式实现动态光效（如全息图、光漏等）的技术，强调了 CSS 在视觉效果上的潜力，同时也指出了性能问题，建议在实际应用中保持克制。

• 引言
介绍了 WebGL 和 GLSL 着色器在网页设计中的重要性，并提出 CSS 也可以通过 mix-blend-mode 实现类似效果，避免引入 JavaScript 依赖。展示了滚动时图像光效从橙色渐变为蓝色的示例，包含镜头光晕效果。
• 什么是 CSS '着色器'？
解释了 CSS 着色器的基本概念，即通过图像和多层 background-image 叠加，使用渐变、遮罩和混合模式控制层间互动。提供了基础 HTML 和 CSS 结构代码，确保各层与底层图像对齐。
• 模拟镜面反射（Specularity）
描述了如何使用渐变模拟光线从明到暗的变化，并通过 background-attachment: fixed 属性引入滚动时的动态效果，模拟视角变化的光反射效果。
• 了解混合模式（Blend Modes）
详细介绍了 CSS 中常用的混合模式（如 multiply、screen、color-dodge、color-burn），通过示例图像展示了各模式如何影响像素颜色混合的效果，为后续效果实现奠定基础。
• 层叠合成（Compositing Layers）
讲解了通过嵌套 div 和多重 mix-blend-mode 实现复杂的层叠效果，使用暗色图像作为遮罩（specular map）控制光照区域，结合 color-dodge 模式增强阳光绽放效果。
• 最终着色器效果
提供了完整的 HTML 和 CSS 代码，展示了效果的最终呈现，并通过视图模式切换帮助读者理解各层如何协同工作形成最终图像。
• 进一步探索，通过多个示例展示了 CSS 着色器的多样应用，包括
• 极光效果（Aurora Borealis）：通过重复渐变和 screen 模式模拟极光波动。
• 光漏效果（Light-leak）：使用彩色遮罩和红橙渐变模拟老式相机光漏。
• 全息图效果（Hologram）：通过多层遮罩和反向渐变结合 color-burn 模式实现双向全息效果。
• 总结与性能问题
强调了现代 CSS 的强大功能，但也指出了 mix-blend-mode 的性能问题，尤其是在复杂效果和动画中的表现。作者尝试了 backface-visibility: hidden 优化性能，但效果有限，并提醒读者谨慎使用此类技术。

Robb Owen Digital

Holograms, light-leaks and how to build CSS-only shaders.

Get a shiny WebGL look without actually using WebGL. In this article we take a look at how CSS blend modes unleash the potential of cool compositing effects without the need for JavaScript