实用文字色彩渐变效果，这个特效使用js和css来实现，可自己输入默认文字及选择文字的颜色。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>js+css实现文字色彩渐变特效_武鸣人</title>
<style type="text/css">
body{font:12px/1.5 arial}
h3{padding:10px;margin:0;background-color:#c00;border:1px dashed #fff;color:#fff;font:16px/1.5 arial;}
.box{position:relative;background-color:#fff;width:auto;margin:0 auto;padding:0 30px;font:700 20px/1.5 "黑体",arial;border:1px dashed #f60;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;}
address{background-color:#f1f1f1;border:1px dashed #ddd;padding:10px;font-style:normal;color:#999;}
address a,address a:visited{color:#c00;}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div style="width:800px;margin:20px 20px 20px 20px;background-color:#FFFFCC">
<h3><strong>CSS多彩渐变字</strong></h3>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="10" colspan="2" align="center"></td>
</tr>
<tr>
<td width="19%" height="30" align="right">文字：</td>
<td width="81%"><input name="text" type="text" id="ctext" size="50" maxlength="16" value="武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢。" onkeyup="setDiv()" /></td>
</tr>
<tr>
<td height="30" align="right">R值：</td>
<td><select name="rvalue" id="rvalue"></select>
<span class="f999">初始化RGB颜色中的R值</span></td>
</tr>
<tr>
<td height="30" align="right">G值：</td>
<td><select name="gvalue" id="gvalue"></select>
<span class="f999">初始化RGB颜色中的G值</span></td>
</tr>
<tr>
<td height="30" align="right">B值：</td>
<td><select name="bvalue" id="bvalue"></select>
<span class="f999">初始化RGB颜色中的B值</span></td>
</tr>
<tr>
<td height="30" align="right">渐变方式：</td>
<td><select name="ctype" id="ctype"><option value="0">灰度渐变</option><option value="1" selected="selected">变化R值</option><option value="2">变化G值</option><option value="3">变化B值</option></select>
<span class="f999">相应的数值会强制在0~255之间变化</span></td>
</tr>
</table>
<div class="box" id="box"></div>
<br />
<button onclick="javascript:createData()">渐变着色</button>
<br />
<address>
Designed by Silence,转载请注明出处
</address>
</div>
<script type="text/javascript">
var rs = document.getElementById("rvalue");
var gs = document.getElementById("gvalue");
var bs = document.getElementById("bvalue");
function init(){
var str;
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
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();
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function setDiv(){
var font = document.getElementById("ctext").value;
var dObj = document.getElementById("box");
dObj.innerHTML=font;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
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);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function colorful(obj,font,r,g,b,type){
var boxObj;
if(typeof(obj)=="string"||typeof(obj)=="number"){
boxObj = document.getElementById(obj);
}else{
boxObj = obj;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
boxObj.innerHTML="<a href='#'>"+font+"</a>";
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;
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
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);
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
init();
</script>
</body>
</html>本文来自武鸣人网站，转载请注明出处