在网页设计中，使用CSS的hsla颜色和animation动画结合，可以非常方便地实现平滑且循环的渐变背景或元素着色效果。hsla相比普通的hex或rgb颜色，多了透明度通道，同时以色相为基础，更容易做出自然过渡。
什么是hsla颜色
hsla是Hue（色相）、Saturation（饱和度）、Lightness（亮度）、Alpha（透明度）的缩写。它的语法如下：
hsla(<hue>, <saturation>, <lightness>, <alpha>)- hue：色相，0到360之间的角度值，代表颜色在色环上的位置
- saturation：饱和度，百分比，0%为灰，100%为全彩
- lightness：亮度，百分比，0%黑，100%白
- alpha：透明度，0到1之间，0完全透明，1完全不透明
为什么用hsla做动画
当我们只改变hue的值，其他参数不变时，颜色会在色环上滑动，产生彩虹般的连续变化。这种特性非常适合用keyframes来驱动。
完整示例代码
下面是一段让页面背景不断变换色相的动画代码：
/* 定义动画：色相从0转到360 */
@keyframes gradientHue {
from {
background-color: hsla(0, 80%, 60%, 1);
}
to {
background-color: hsla(360, 80%, 60%, 1);
}
}
/* 应用动画到body */
body {
margin: 0;
height: 100vh;
animation: gradientHue 6s linear infinite;
}
结合透明度做淡入淡出渐变
我们也可以让alpha在动画中变化，实现颜色忽明忽暗的效果：
@keyframes fadeColor {
0% {
background-color: hsla(200, 90%, 50%, 0.2);
}
50% {
background-color: hsla(200, 90%, 50%, 1);
}
100% {
background-color: hsla(200, 90%, 50%, 0.2);
}
}
.box {
width: 200px;
height: 200px;
animation: fadeColor 4s ease-in-out infinite;
}
注意事项
在使用hsla与animation时，建议把会变化的颜色属性写在keyframes里，避免触发不必要的重排。另外，如果动画用于大面积的背景，可以考虑加will-change来提升渲染性能。
hsla加animation是一种纯CSS、无脚本依赖的动态渐变方案，适合大多数现代浏览器。