前言

渐变是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);}
}

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。

有需要的小伙伴，可以点击下方卡片领取，无偿分享

CSS 渐变背景动画的实现相关推荐

CSS3实现渐变背景动画特效
效果图: 具体实现代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
85.CSS水波背景动画特效
效果 (源码网盘地址在最后) 大家都说简历没项目写,我就帮大家找了一个项目,还附赠[搭建教程]. 演示视频 [前端特效 85]CSS水波背景动画特效视频演示地址一:https://www.ixigu ...
纯css 渐变背景色动画文字贴合环绕图片
渐变背景色动画渐变色背景是不能通过纯css 动画设置的.所以换一种思路通过 background-size 设置背景的大小,让我们渐变色背景一开始的时候不展示全部的背景,然后通过css动画改变 b ...
html5 css 渐变背景,css渐变，css渐变色背景
#grad{/*Safari5.1-6.0*/ background:-o-linear-gradient(red,blue);/*Opera11.1-12.0*/ background:-moz-l ...
css滤镜属性渐变_使用滤镜对CSS渐变进行动画处理
css滤镜属性渐变 Officially, gradients can't yet be animated. However, using CSS filters, you can animate t ...
css文本,背景,动画和html列表,表格,表单总结
css文本标签的应用文本 text-shadow文本阴影:1px 2px 3px color 第1个长度值用来设置对象的阴影水平偏移值.可以为负值第2个长度值用来设置对象的阴影垂直偏移值.可以为负 ...
227.纯CSS粒子背景动画
效果 (源码网盘地址在最后) 源码 index.html <!DOCTYPE html> <html lang="en"><head><m ...
纯css实现背景颜色渐变动画
纯css实现背景颜色渐变动画,代码及效果图如下. body {width: 100wh;height: 100vh;color: #fff;background: linear-gradient(-4 ...
CSS实现兼容性的渐变背景(gradient)效果（转）
by zhangxinxu from http://www.zhangxinxu.com 本文地址: http://www.zhangxinxu.com/wordpress/?p=743 一.有点俗态 ...

CSS 渐变背景动画的实现

前言

方法1-background-position

方法2-自定义变量

最后

CSS 渐变背景动画的实现相关推荐

最新文章

热门文章