纯js和css实现静态渐变色和动态渐变色
说起“渐变色”，你会想起什么？
当我开始搜索查找这个名词的时候，才发现它实际上是有两种理解或者说是两种形式的：动态渐变和静态渐变。
所谓动态渐变，举个简单的例子：他来了，她的脸渐渐红了...渐渐的，渐渐改变的，是不断在改变的；而静态渐变，也就更简单了：天上一到彩虹，赤橙黄绿青蓝紫啊...在当前展示的成品中，颜色从一部分到另一部分的颜色是不一样的，可能幅度比较小，是逐渐改变的，但有一点是至关重要的，它已经存在了，形成了变化的现状且无法再改变。
这样我们先来用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的其它*/
相关文章
- 分享JavaScript的求爱小特效 随鼠标移动的按照圆轨迹滚动的文字(2014-5-26 16:6:5)
- 分享一个Javascript函数实现网页标题(title)闪动效果(2014-5-16 17:23:35)
- javascript实现图片拖动改变顺序例子（带效果图）(2014-5-14 11:58:30)
- 用jquery插件来实现定时查询待处理任务数量(2014-5-9 14:41:34)
- javascript实现checkbox全选和反选的例子(2014-5-9 14:31:36)
- 分享jquery实现等待效果例子(2014-5-9 14:13:42)
- 分享一个非常不错的JS分页效果代码(2014-4-25 13:23:53)
- js和html5(canvas)实现手机端刮刮卡抽奖效果完美兼容android/IOS/PC(2014-4-15 12:22:43)
- 丰富直观的设计 用户体验设计中的巧妙过渡(2014-2-13 14:11:10)
- Crayon Syntax Highlighter是一款优秀的WordPress插件 实现代码高亮(2014-2-10 17:9:30)
