神奇！js+CSS+DIV实现文字颜色渐变效果_javascript技巧

本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果，供大家参考，具体内容如下

下面是 CSS 部分代码：

body{
 font:12px/1.5 Microsoft Yahei;
}
h3{
 padding:10px;
 margin:0;
 background-color:#999;
 color:#fff;
 font:16px/1.5 Microsoft Yahei;
 text-align:center;
}
.box{
 position:relative;
 background-color:#fff;
 width:auto;
 margin:0 auto;
 padding:0 30px;
 font:700 20px/1.5 "Microsoft Yahei",Microsoft Yahei;
 border-top:1px dashed #ccc;
 border-bottom:1px dashed #ccc;
 height:30px;
 margin-top:8px;
}
.box a{
 position:absolute;
 font-style:normal;
 white-space:nowrap;
}
.f999{
 color:#999;
}

下面是 DIV 部分代码：

CSS多彩渐变字



  

文字：
  

 

R值：
  

RGB颜色中的R值（0-255）

 

G值：
  

RGB颜色中的G值（0-255）

 

B值：
  

RGB颜色中的B值（0-255）

 

渐变方式：
  

灰度渐变
变化R值
变化G值
变化B值相应的数值会强制在0~255之间变化

 


OK，上色！

以下是 JavaScript 部分代码：

// JavaScript代码开始
var rs = document.getElementById("rvalue");
var gs = document.getElementById("gvalue");
var bs = document.getElementById("bvalue");
function init(){
 var str;
 for(var i=0;i"+font+"";
 var num = boxObj.getElementsByTagName("a")[0].scrollWidth;
 boxObj.innerHTML="";
 for(var i=0;i

效果图：

完整代码：

CSS多彩渐变字



  

文字：
  

 

R值：
  

RGB颜色中的R值（0-255）

 

G值：
  

RGB颜色中的G值（0-255）

 

B值：
  

RGB颜色中的B值（0-255）

 

渐变方式：
  

灰度渐变
变化R值
变化G值
变化B值相应的数值会强制在0~255之间变化

 


OK，上色！

以上就是本文的全部内容，希望对大家的学习有所帮助。