纯js和CSS实现的渐变颜色包括静态梯度和动态渐变。
你觉得渐变的颜色怎么样当我开始寻找这个名词时，我发现它实际上是两种理解或两种形式：动态梯度和静态梯度。
所谓动态梯度，一个简单的例子：他来了，脸慢慢红了…渐渐地，逐渐的变化，是不断的变化；而静态的渐变则比较简单：天空是一道彩虹，红橙黄绿蓝紫…在产品的展示中，色彩从一部分到另一部分的颜色是不一样的，可能是相对小的，是逐渐变化的，但一件很重要的事情是，它已经形成，而变化的状态是不能改变的。
所以我们首先用javaｓｃｒｉｐｔ来实现所谓的动态梯度，考虑到动态原因不在地图上，我来简单介绍一下以下思路：
*动态梯度
复制代码代码如下所示：
…
为了方便查看，我写了嵌入式风格，或者推荐使用外链风格，然后简单地写动态渐变的实现。
复制代码代码如下所示：
var node = document.getelementbyid（褪色）；
VaR颜色=# 0000 ；
var级别= 1；
窗口=加载=函数淡出（）{
节点。风格。背景颜色。+（）+（）level.tostring level.tostring；
水平+；
如果（水平> 16）{
ClearTimeOut（衰落）；
其他{ }
setTimeout（衰落，300）；
}
}
所以我不必说太多，只是一个拼接和重复调用。
*静态梯度
先来看看图纸，我们看看效果，一般都懂神马意思。
不考虑兼容性，我们必须与我们的研究相兼容。此接口不考虑兼容性和不足。好吧，让我们继续这样说。首先我要介绍这个WebKit内核。
添加CSS样式：
背景：-webkit-gradient（线性，100% 0%，0% 0%，从（# ffffff），色站（0.5，# 0000ff），以（# ffffff））；
简单的解释：
线性：这是线性梯度和径向梯度的两个概念。它只不过是直线的一个线性变化和围绕它的径向扩散。
接下来的四个值：相应方向的PX值，可以从顺时针方向的序列中记住，但它代表的是。
这是开始的颜色。
对：和从同一时间，结束的颜色的结束。
和颜色停止：它指的是什么颜色会出现变化时，线的位置，当然，从周围的过渡过去，相当于从，过渡点，从过渡点，到。
好吧，让我们得到很多，并发送简单的其他基本代码。
复制代码代码如下所示：
过滤器：ProgID：DXImageTransform.Microsoft.Gradient（梯度型= 1，startcolorstr = # b8c4cb，endcolorstr = # f6f6f8）； / * * / IE6
背景：-moz线性梯度（左，# ffffff，# FF0000）； / *其他非IE6
背景：-webkit-gradient（线100%，0%，0%，0%，从（# FF0000），以（# 0000ff））； / *其他非IE6
今天看到了一组演讲