纯js和css实现渐变色包括静态渐变和动态渐变
更新时间：2014年05月29日 15:40:29 作者：
用javascript实现一下所谓的动态渐变，考虑动态原因就不上图了，我来简单介绍下思路
说起“渐变色”，你会想起什么？
当我开始搜索查找这个名词的时候，才发现它实际上是有两种理解或者说是两种形式的：动态渐变和静态渐变。
所谓动态渐变，举个简单的例子：他来了，她的脸渐渐红了...渐渐的，渐渐改变的，是不断在改变的；而静态渐变，也就更简单了：天上一到彩虹，赤橙黄绿青蓝紫啊...在当前展示的成品中，颜色从一部分到另一部分的颜色是不一样的，可能幅度比较小，是逐渐改变的，但有一点是至关重要的，它已经存在了，形成了变化的现状且无法再改变。
这样我们先来用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了么我....
当我开始搜索查找这个名词的时候，才发现它实际上是有两种理解或者说是两种形式的：动态渐变和静态渐变。
所谓动态渐变，举个简单的例子：他来了，她的脸渐渐红了...渐渐的，渐渐改变的，是不断在改变的；而静态渐变，也就更简单了：天上一到彩虹，赤橙黄绿青蓝紫啊...在当前展示的成品中，颜色从一部分到另一部分的颜色是不一样的，可能幅度比较小，是逐渐改变的，但有一点是至关重要的，它已经存在了，形成了变化的现状且无法再改变。
这样我们先来用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怎么样了，他说简单的还可以，复杂的就不行了，我又问是哪种程度的复杂？2010-11-11
本文介绍一种网页中实现右键功能的方案–contextMenu,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
这篇文章主要介绍了Javascript图片无缝滚动的相关内容,感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要介绍了封装微信小程序http拦截器过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
相对于ES5,ES6的对象字面量得到了很大程度的增强，下面这篇文章主要给大家介绍了关于ES6学习教程之对象字面量的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。2017-10-10
这篇文章主要介绍了JS手写一个自定义Promise操作,结合实例形式分析了JS自定义Promise的实现与使用相关操作技巧,需要的朋友可以参考下2020-03-03
layui 图片上传+表单提交+ Spring MVC的实例
今天小编就为大家分享一篇layui 图片上传+表单提交+ Spring MVC的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
浮点数的精度问题不是JavaScript特有的，因为有些小数以二进制表示位数是无穷的2014-03-03
这篇文章主要为大家详细介绍了JavaScript实现星级评价效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
本文主要介绍了js对table和ul li实现前台分页,需要的朋友可以参考下2014-02-02
最新评论