纯js和css实现渐变包括静态渐变和动态渐变

当你谈到“渐变颜色”时，你会想到什么？当我开始搜索这个名词时，我发现它其实有两种理解或形式：动态渐变和静态渐变。所谓动态渐变，举一个简单的例子：他来的时候，她的脸正在变红.逐渐地，逐渐地变化，不断地变化；而静态渐变就更简单了：一旦天空到达彩虹，它就是红色、橙色、黄色、绿色、蓝色和紫色.在目前展示的成品中，各个部分的颜色是不同的，范围可能比较小，是在逐渐变化的，但有一点很重要，它已经存在，形成了变化的现状，不能再变化了。这样，我们先用javascript实现所谓的动态渐变，考虑到动态的原因，就不会在图片中显示了。我简单介绍一下以下思路：*复制动态渐变的代码如下： span style=' font-size :12 px；'超文本标记语言.body center div id=' fade ' style=' width :600 px；' height:200px'/div /center /body /html/span为了方便查看，我写了一个内嵌样式，或者推荐使用外链样式。接下来我简单写了一下，动态实现渐变效果：复制的代码如下： span style=' font-size :12 px；'脚本类型=' text/JavaScript ' var node=document . getelementbyid(' fade ')；var color=' # 0000var级别=1；window.load=函数fading(){ node . style . background=color。level . ToString()；level . ToString()；水平；if(level16){ clearTimeOut(衰落)；}else{ setTimeOut(渐弱，300)；}} script/span所以我不需要多说什么，只是拼接和重复调用的问题。*静态梯度。首先来看附图。让我们看看效果，大致了解神马的含义。

在不考虑兼容性的前提下，诶真的研究兼容性，不考虑兼容性就让界面有点短。好了，我们继续这样，我用的是webkit内核，所以我就用这个来介绍添加：Background 3360-WebKit-Gradient(线性，100% 0%，0% 0%，从(# ffff)。简单解释一下：线性：这就遇到了线性渐变和径向渐变两个概念，无非是在一条线上线性变化，像圆一样径向向四周扩散；最后四个值：分别表示对应方向的px值，可以从左到顺时针记忆，但表示到，结束色从：这是起始色。to:和from同时出现，而color-stop:指的是当改变到线的哪个位置时会出现什么颜色，当然是从周围过渡过来的，这就相当于from，to过渡点，和from过渡点。好吧，这会让你明白很多。以下是其他简单基本代码的复制代码： Filter : ProgID : dximagetransform . Microsoft . gradient(gradient type=1，StartColorStr=# b8c4cb，endcolorst=# F6 F8)；/* IE6 */background :-moz-linear-gradient(左，#ffffff，# ff 0000)；/* IE6 */background :以外-WebKit-渐变(线性，100% 0%，0% 0%，从(# ff0000)到(# 0000 ff))；/*除了IE6 */今天看了一集《开讲了》。原来有这么好看的节目。对我来说太低了吗？