Smashing Animations Part 8: Theming Animations Using CSS Relative Colour
该教程探讨了如何利用CSS相对颜色（Relative Colour）与OKLCH色彩空间，为动画图形创建灵活且易于维护的主题系统。作者指出，传统方法中手动从基础色生成不同明度、饱和度和色相的调色板，一旦更改基础色就需要重复劳动，效率低下。通过采用相对颜色语法，可以基于一个基础色，通过计算自动派生出所有需要的衍生色。这要求理解绝对变化（如加减固定值）与比例变化（如乘法）的区别：前者在更改基础色时可能导致关系断裂，而后者能保持颜色间的比例关系。具体实践上，作者定义了三条规则：移动明度、缩放色度、旋转色相，从而构建出填充、描边、渐变等完整配色方案。更进一步，通过注册CSS自定义属性（`@property`），可以将颜色通道视为可动画的数值，从而实现基础色本身的平滑动画。所有从它派生的颜色随之自动更新，无需逐一手动调整。这大大简化了动态主题（如日夜模式、季节主题）的实现，并使得创建如光照效果等复杂交互动画变得更加高效和直观。