使用CSS巧妙地制作背景色渐变动画实例

来源：懂视网责编：小采时间：2020-11-27 18:52:15

使用CSS巧妙地制作背景色渐变动画实例

使用CSS巧妙地制作背景色渐变动画实例:解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS属性，赶紧去补习一下吧。不断更新，不断更新，不断更新，重要的事情说三遍。正文从这里开始。有的时候，嗯，应该说某些特定场合，我们可能需要下面这样的动画效果，渐变 +

推荐度：

点击下载本文 文档为doc格式

导读使用CSS巧妙地制作背景色渐变动画实例:解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS属性，赶紧去补习一下吧。不断更新，不断更新，不断更新，重要的事情说三遍。正文从这里开始。有的时候，嗯，应该说某些特定场合，我们可能需要下面这样的动画效果，渐变 +

background-size：设置背景图片大小。当取值为百分比时，表示指定背景图片相对背景区的百分比大小。当设置两个参数时，第一个值指定图片的宽度，第二个值指定图片的高度。

通过 background-size: 200% 100% 将图片的宽度设置为两倍背景区的宽度，再通过改变 background-position 的 x 轴初始位置来移动图片，由于背景图设置的大小是背景区的两倍，所以 background-position的移动是由 0 0 -> 100% 0 。最终效果如下：

通过 background-size 模拟渐变动画

既然 background-position 可以，那么另一个 background-size 当然也是不遑多让。与上面的方法类似，只是这次 background-position 辅助 background-size ，CSS 代码如下：

p {
 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%;
 }
}

效果如下：

通过改变 background-size 的第一个值，我将背景图的大小由 3 倍背景区大小向 1 倍背景区大小过渡，在背景图变换的过程中，就有了一种动画的效果。

而至于为什么要配合 background-position: 100% 0 。是由于如果不设置 background-position ，默认情况下的值为 0% 0%，会导致动画最左侧的颜色不变，像下面这样，不大自然：

使用CSS巧妙地制作背景色渐变动画实例

通过 transform 模拟渐变动画

上面两种方式虽然都可以实现，但是总感觉不够自由，或者随机性不够大。

不仅如此，上述两种方式，由于使用了 background-position 和 background-size，并且在渐变中改变这两个属性，导致页面不断地进行大量的重绘（repaint），对页面性能消耗非常严重，所以我们还可以试试 transfrom 的方法：

使用伪元素配合 transform 进行渐变动画，通过元素的伪元素 before 或者 after ，在元素内部画出一个大背景，再通过 transform 对伪元素进行变换：

p {
 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%;
 }
}

实现原理如下图所示：

使用CSS巧妙地制作背景色渐变动画实例