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

2019-11-20 15:01:09

字体：大中小

来源：转载

供稿：网友

说起“渐变色”，你会想起什么？

当我开始搜索查找这个名词的时候，才发现它实际上是有两种理解或者说是两种形式的：动态渐变和静态渐变。

所谓动态渐变，举个简单的例子：他来了，她的脸渐渐红了...渐渐的，渐渐改变的，是不断在改变的；而静态渐变，也就更简单了：天上一到彩虹，赤橙黄绿青蓝紫啊...在当前展示的成品中，颜色从一部分到另一部分的颜色是不一样的，可能幅度比较小，是逐渐改变的，但有一点是至关重要的，它已经存在了，形成了变化的现状且无法再改变。

这样我们先来用javascript实现一下所谓的动态渐变，考虑动态原因就不上图了，我来简单介绍下思路：

* 动态渐变

复制代码代码如下:

 
<span style="font-size:12px;"><html> 
... 
<body> 
<center> 
<div id="fade" style="width:600px;height:200px;"></div> 
</center> 
</body> 
</html></span> 

为了方便查看，我写的是内嵌样式，还是推荐使用外链样式的使用啊，接下来进行简单编写动态实现渐变效果：

复制代码代码如下:

 
<span style="font-size:12px;"><script type="text/javascript"> 
var node=document.getElementById("fade"); 
var color="#0000"; 
var level=1; 

window.load=function fading(){ 
node.style.background=color.+level.toString()+level.toString(); 
level++; 
if(level>16){ 
clearTimeOut(fading); 
}else{ 
setTimeOut(fading,300); 
} 
} 
<script></span> 

这样看来我不用多说了吧，就一个拼接和一个重复调用的问题。

* 静态渐变

先来附图，大家看看效果，大体明白神马意思。

在不考虑兼容的前提下，额，真改研究下兼容了，这弄界面不考虑兼容有点缺啊，好吧，先这样继续说，我是用的webkit内核，就先用这个来介绍

在css样式中添加：

background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ffffff),color-stop(0.5,#0000ff),to(#ffffff));

简单解释下：

linear：这个就碰到了线性渐变和径向渐变的两个概念，无非是在一条线上进行变化的线性和像圆一样向四周扩散的径向；

后面的四个值：分别代表相应方向的px值，可以从左顺时针转的顺序记忆，但是它代表的是to，截止到的颜色

from：这就是开始的颜色了

to：和from是同时出现的，最后渐变结束的颜色

而color-stop：则是指在变化到线的哪个位置的时候会出现什么颜色，当然是从周围过渡过去的，相当于from，to过渡点，from过渡点，to；

好了，这样就明白多了吧，附送下简单的其他的基本代码

复制代码代码如下:

 
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#b8c4cb,endColorStr=#f6f6f8);/*IE6*/ 
background:-moz-linear-gradient(left,#ffffff,#ff0000);/*非IE6的其它*/ 
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ff0000), to(#0000ff));/*非IE6的其它*/ 

今天看了一集《开讲了》，原来还有这么好看的节目，太lower了么我....

上一篇：jquery缓动swing liner控制动画过程不同时刻的速度

下一篇：js实现页面跳转重定向的几种方式