CSS 渐变背景动画的实现

最新推荐文章于 2025-10-12 09:06:24 发布

原创最新推荐文章于 2025-10-12 09:06:24 发布 · 3.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #动画

本文介绍了如何在CSS中为渐变背景实现动画效果。由于直接的渐变动画不支持，作者提供了两种方法：1) 利用background-position变化实现过渡；2) 使用CSS自定义变量动态调整渐变颜色值，结合动画实现平滑过渡。文中还提到CSS自定义变量的声明和使用，并指出其在渐变动画中的应用。

前言

渐变是CSS函数，例如linear-gradient()可以创建一个沿着直线的两种或多种颜色之间的渐进过渡的背景图像，请注意这是一种特殊的图像。在CSS中background-image是支持离散型(distrete)动画的。

但是渐变作为背景图像的时候，他是特殊的图像。是不支持animation动画和transition过渡的！但是有时候我们还是想要给他添加动画，我们该怎么办！

一个常识：渐变是不能够使用通过keyframes实现动画过渡效果的，只会突然的改变颜色。

下面是个演示：可以看到的是渐变只是僵硬的切换，并不会平滑的过渡。

div {width: 100px;height: 100px;background: linear-gradient(180deg, rgb(63, 47, 130) 0%, rgb(177, 111, 155) 100%);animation: 1s test linear infinite;

}

@keyframes test {from {background: linear-gradient(180deg, rgb(63, 47, 130) 0%, rgb(177, 111, 155) 100%);}to {background: linear-gradient(180deg, rgb(177, 111, 155) 0%, rgb(201, 14, 189) 100%);}
}

方法1-background-position

虽然渐变背景不支持，但是背景位置是支持的，所以我们可以改变渐变背景的位置来实现过渡。

div {width: 100px;height: 100px;background: linear-gradient(to right, rgb(63, 47, 130) 0%, rgb(177, 111, 155) 50%, rgb(201, 14, 189) 100%);animation: gradient 1slinear infinite;

}

@keyframes gradient {to{background-position: 100px;}
}

方法2-自定义变量

如果你用过SASS/LESS，你应该写过一些全局的变量。这东西不是新概念，在其他语言中早就有的！而对于CSS来说，自定义变量不亚于一场革命！

声明一个自定义属性，属性名需要以（--）开始，属性值则可以是任何有效的 CSS 值。和其他属性一样，自定义属性也是写在规则集之内的，如下：

element {--bg-color: red;
}

通过var(--*)来使用，

但是这这种方式也有缺点，就是我们只能定义变量的初始值，没有办法指定变量的类型。

于是CSS又增加了 @property 规则之后，我们还可以像下述代码这样去定义个 CSS 自定义属性,同样通过 var()使用

@property --property-name {syntax: '<color>';inherits: false;initial-value: #fff;
}

syntax：=表示属性的类型
inherits：是否允许继承
initial-value：初始值

这个规则为什么可以应用到渐变动画的过渡/动画上呢？

在上个方案中，我们是针对渐变的位置进行动画的，而使用CSS 自定义变量则可以针对渐变的值进行修改。

给定渐变颜色的初始值，定义动画，改变颜色值。

@property --colorA {syntax: '<color>';inherits: false;initial-value: rgb(63, 47, 130);
}

@property --colorB {syntax: '<color>';inherits: false;initial-value: rgb(177, 111, 155);
}

@property --colorC {syntax: '<color>';inherits: false;initial-value: rgb(201, 14, 189);
}

div {width: 100px;height: 100px;background: linear-gradient(to right, var(--colorA) 0%, var(--colorB) 50%, var(--colorC) 100%);animation: gradient 2S linear infinite;
}

@keyframes gradient {50% {--colorA: rgb(201, 14, 189);--colorB: rgb(177, 111, 155);--colorC: rgb(63, 47, 130);}
}