html字体的渐变效果,神奇！js+CSS+DIV实现文字颜色渐变效果

本文实例为大家分享了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<=255;i++){

var opr = document.createElement("option");

var opg = document.createElement("option");

var opb = document.createElement("option");

opr.innerHTML = i;

opg.innerHTML = i;

opb.innerHTML = i;

switch(i){

case 100:opb.selected="selected";break;

case 200:opg.selected="selected";break;

}

gs.appendChild(opg);

rs.appendChild(opr);

bs.appendChild(opb);

}

setDiv();

}

function setDiv(){

var font = document.getElementById("ctext").value;

var dObj = document.getElementById("box");

dObj.innerHTML=font;

}

function createData(){

var font = document.getElementById("ctext").value;

var r = rs.options[rs.selectedIndex].text;

var g = gs.options[gs.selectedIndex].text;

var b = bs.options[bs.selectedIndex].text;

var type = document.getElementById("ctype").value;

if(font==""||font=="undefined"){

font="文字不能为空，使用默认文字";

document.getElementById("ctext").value = font;

}

colorful('box',font,r,g,b,type);

}

function colorful(obj,font,r,g,b,type){

var boxObj;

if(typeof(obj)=="string"||typeof(obj)=="number"){

boxObj = document.getElementById(obj);

}else{

boxObj = obj;

}

boxObj.innerHTML=""+font+"";

var num = boxObj.getElementsByTagName("a")[0].scrollWidth;

boxObj.innerHTML="";

for(var i=0;i<=num;i++){

var j=i+1;

var c=Math.round(255/num*i);

switch(Number(type)){

case 0:r=c;g=c;b=c;break;

case 1:r=c;break;

case 2:g=c;break;

case 3:b=c;break;

}

var iObj = document.createElement("A");

iObj.innerHTML=font;

iObj.style.clip="rect(auto "+j+"px auto "+i+"px)";

iObj.style.color="rgb("+r+","+g+","+b+")";

//iObj.href="#"; // 生成的文字超链接

boxObj.appendChild(iObj);

}

}

init();

效果图：

完整代码：

DIV+CSS+JS实现色彩渐变字体

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;}

a:link{text-decoration:none;}

a:hover{text-decoration:underline;}

a:visited{text-decoration:none;}

CSS多彩渐变字

文字：
R值：	RGB颜色中的R值(0-255)
G值：	RGB颜色中的G值(0-255)
B值：	RGB颜色中的B值(0-255)
渐变方式：	灰度渐变变化R值变化G值变化B值 相应的数值会强制在0~255之间变化

    OK，上色！

var rs = document.getElementById("rvalue");

var gs = document.getElementById("gvalue");

var bs = document.getElementById("bvalue");

function init(){

var str;

for(var i=0;i<=255;i++){

var opr = document.createElement("option");

var opg = document.createElement("option");

var opb = document.createElement("option");

opr.innerHTML = i;

opg.innerHTML = i;

opb.innerHTML = i;

switch(i){

case 100:opb.selected="selected";break;

case 200:opg.selected="selected";break;

}

gs.appendChild(opg);

rs.appendChild(opr);

bs.appendChild(opb);

}

setDiv();

}

function setDiv(){

var font = document.getElementById("ctext").value;

var dObj = document.getElementById("box");

dObj.innerHTML=font;

}

function createData(){

var font = document.getElementById("ctext").value;

var r = rs.options[rs.selectedIndex].text;

var g = gs.options[gs.selectedIndex].text;

var b = bs.options[bs.selectedIndex].text;

var type = document.getElementById("ctype").value;

if(font==""||font=="undefined"){

font="文字不能为空，使用默认文字";

document.getElementById("ctext").value = font;

}

colorful('box',font,r,g,b,type);

}

function colorful(obj,font,r,g,b,type){

var boxObj;

if(typeof(obj)=="string"||typeof(obj)=="number"){

boxObj = document.getElementById(obj);

}else{

boxObj = obj;

}

boxObj.innerHTML=""+font+"";

var num = boxObj.getElementsByTagName("a")[0].scrollWidth;

boxObj.innerHTML="";

for(var i=0;i<=num;i++){

var j=i+1;

var c=Math.round(255/num*i);

switch(Number(type)){

case 0:r=c;g=c;b=c;break;

case 1:r=c;break;

case 2:g=c;break;

case 3:b=c;break;

}

var iObj = document.createElement("A");

iObj.innerHTML=font;

iObj.style.clip="rect(auto "+j+"px auto "+i+"px)";

iObj.style.color="rgb("+r+","+g+","+b+")";

//iObj.href="#"; // 生成的文字超链接

boxObj.appendChild(iObj);

}

}

init();

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