css3 渐变动画-如何在css中实现背景色渐变动画

本文主要向大家展示“如何在css中实现背景色渐变动画”。 如何实现背景颜色渐变动画》这篇文章。

通过本文，您可以了解4种不同形式的纯CSS制作的渐变背景过渡动画。

有时，我们可能需要像下面这样的动画效果，背景色渐变的过渡动画：

渐变背景的过渡动画

假设我们的梯度写成如下：

div {     background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 100%); }

按照常规的看法，有了动画，我们首先想到的是在动画步骤中改变颜色来实现颜色渐变动画，所以我们的CSS代码可能是：

div {     background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 100%);     animation: gradientChange 2s infinite; }  @keyframes gradientChange  {     100% {         // 渐变中的颜色发生了变化         background: linear-gradient(90deg,  #e91e1e 0%, #6f27b0 100%);     } }

之前我们使用了三种颜色：

最终并没有得到我们想要的结果，而是这样的：

CodePenDemo-线性-梯度变换的动画效果[1]

我们期望的过渡动画变成了逐帧动画。

换句话说，线性渐变不支持动漫动画。

简单地从一种颜色更改为另一种颜色怎么样？ 就像下面这样：

div {     background: #ffc700;     animation: gradientChange 3s infinite alternate; }  @keyframes gradientChange  {     100% {         background: #e91e1e;     } }

我们发现简单的单色值之间的变化是可以逐渐改变的：

单色渐变

部分属性不支持直接过渡动画

综上所述，线性渐变（径向渐变、角度渐变）不支持动画，但单色背景支持。

我找到了如下文档css3 渐变动画，靠近背景区域的截图如下：

哪些 CSS 属性可以设置动画？ [2]，里面的截图不完整，支持CSS动画属性，完整的可以戳一侧。

关于背景，文档中写的是支持background，并没有详细说明不支持background:linear-gradient()/radial-gradient()。

那么实现我们想要的背景色渐变动画是不是很难呢？ 接下来我们发散思维，看看是否还有其他方法可以达到我们的目的。

通过背景位置模拟渐变动画

在哪些CSS属性可以动画的截图中，列出了background-position和background-position，即background-position支持动画。 通过改变background-position的方法，可以实现渐变动画：

div {     background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 50%, #6f27b0 100%);     background-size: 200% 100%;     background-position: 0 0;     animation: bgposition 2s infinite linear alternate; }  @keyframes bgposition {     0% {         background-position: 0 0;     }     100% {         background-position: 100% 0;     } }

这里我们还匹配背景大小。 首先了解一下：

通过background-size:2000%将图片的长度设置为背景区域长度的两倍，然后改变background-position的x轴初始位置来连接图片，因为图片的大小背景图像的大小是背景区域的两倍。 所以background-position的联通是从00->100%0。

通过背景大小模拟渐变动画

既然background-position还可以，那么其他background-size其实也好不了多少。 和之前的方法类似，只不过这次是background-position辅助background-size，CSS代码如下：

div {     background: linear-gradient(90deg,  #ffc700 0%, #e91e1e 33%, #6f27b0 66%, #00ff88 100%);     background-position: 100% 0;     animation: bgSize 5s infinite ease-in-out alternate;  }  @keyframes bgSize {     0% {         background-size: 300% 100%;     }     100% {         background-size: 100% 100%;     } }

CodePen--Demo--position-size实现渐变动画[3]

通过更改background-size的第一个值，我将背景图像的大小从背景区域大小的3倍更改为背景区域大小的1倍。 在改变背景图片的过程中，有一种动画效果。

至于为什么需要配合background-position:100%0。 是因为如果不设置background-position，默认值为0%0%，会导致动画最右侧的颜色保持不变，如下图，不自然：

通过transform模拟渐变动画

前两种方法其实是可以实现的，但总感觉自由度不够，或者随机性不够大。

除此之外，上面两种方法都使用了background-position和background-size，但是改变渐变中的这两个属性会导致页面不断地进行大量的重绘（repaint），从而消耗大量的页面性能，所以我们也可以尝试transfrom的方式：

以下方法使用带有transform的伪元素来执行渐变动画，通过元素之前或之后的伪元素在元素内部绘制一个大背景，然后通过transform对伪元素进行变换：

div {     position: relative;     overflow: hidden;     width: 100px;     height: 100px;     margin: 100px auto;     border: 2px solid #000;          &::before {         content: "";         position: absolute;         top: -100%;         left: -100%;         bottom: -100%;         right: -100%;         background: linear-gradient(45deg,  #ffc700 0%, #e91e1e 50%, #6f27b0 100%);         background-size: 100% 100%;         animation: bgposition 5s infinite linear alternate;         z-index: -1;     } }   @keyframes bgposition {     0% {         transform: translate(30%, 30%);     }     25% {         transform: translate(30%, -30%);     }     50% {         transform: translate(-30%, -30%);     }     75% {         transform: translate(-30%, 30%);     }     100% {         transform: translate(30%, 30%);     } }

实现原理如右图所示：

CodePen--Demo--伪元素用transform实现背景渐变[4]

其中列出的方法只是部分方法。 从理论上来说，只有伪元素的组合能够形成位移或者变形属性，才能完成之前的疗效。 我们甚至可以使用不同的缓动函数或者学习蝉的原理来产生非常随机的疗效。

事实上css3 渐变动画，本文列出的所有方法都是纯CSS方法，也可以使用SVG或Canvas来制作，但性能更好。 有兴趣的读者可以自行研究。

通过滤镜hue-rotate实现渐变动画（更新于2019/04/06）

下面这个方法堪称新时代神器。

通过滤镜hue-rotate，可以非常方便的实现背景色渐变动画，过渡效果也非常自然，而且代码量也很少，堪称黑科技：

div {     background: linear-gradient(45deg, #ffc107, deeppink, #9c27b0);     animation: hueRotate 10s infinite alternate; }  @keyframes hueRotate {     0 {         filter: hue-rotate(0);     }     100% {         filter: hue-rotate(360deg);     } }

CodePenDemo--hue-rotate实现渐变背景动画[5]

使用CSS@property实现背景色渐变动画

明天（2021/04/15），我们还可以使用CSS@property来实现背景色渐变动画，它的出现大大提高了CSS的能力！

根据MDN--CSSProperty[6]，@propertyCSSat-rule是CSSHoudiniAPI的一部分，它允许开发者显式定义他们的CSS自定义属性，允许属性类型检测、设置默认值以及定义自定义属性是否可以继承。

@property --colorA {   syntax: '';   inherits: false;   initial-value: fuchsia; } @property --colorC {   syntax: '';   inherits: false;   initial-value: #f79188; } @property --colorF {   syntax: '';   inherits: false;   initial-value: red; } div {     background: linear-gradient(45deg,         var(--colorA),         var(--colorC),         var(--colorF));     animation: change 10s infinite linear; }  @keyframes change {     20% {         --colorA: red;         --colorC: #a93ee0;         --colorF: fuchsia;     }     40% {         --colorA: #ff3c41;         --colorC: #e228a0;         --colorF: #2e4c96;     }     60% {         --colorA: orange;         --colorC: green;         --colorF: teal;     }     80% {         --colorA: #ae63e4;         --colorC: #0ebeff;         --colorF: #efc371;     } }

看看效果，完美：

使用 CSS@property 的渐变背景动画

简单分析一下，虽然CSS@property是一个比较灵活的CSS自定义属性，但我们也可以称其为CSS Houdini自定义属性。 在：

在上面的DEMO中，我们使用CSS Houdini自定义属性将原本定义在背景上的过渡效果嫁接到颜色上，并且CSS支持从一种颜色到另一种颜色的转换。 这样，我们就巧妙地实现了渐变背景色过渡动画。

更多CSS@property相关内容，可以戳这篇文章详细了解——CSS@property，让不可能成为可能[7]

完整代码可以点击这里：

CodePenDemo--CSSHoudini自定义属性实现渐变颜色过渡动画[8]

到目前为止，我们已经获得了4种不同形式的纯CSS制作的渐变背景过渡动画。

以上就是《CSS中如何实现背景色渐变动画》一文的全部内容，感谢您的阅读！ 相信大家都有了一定的了解，希望分享的内容对大家有所帮助。 如果您还想了解更多知识，欢迎关注易速云行业资讯频道！