Magic! Js+css+div _javascript Tips for implementing text color gradient effects

This article for everyone to share the DIV+CSS+JS implementation of the text color gradient effect for everyone to refer to, the specific content as follows

Here is the CSS part of the code:

<!--CSS code starts-->
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;
}

Here is the DIV section code:

<!--div code starts--> <div style= "width:400px;margin:200px auto;background-color: #f2f2f2; border:1px dashed #ccc;" >  

The following is a JavaScript part code:

JavaScript code begins 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";
 Case 200:opg.selected= "selected";
 } 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== "" | | The= "undefined") {The text cannot be empty, use the default text ";
 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= "<a href= ' # ' >" +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= "#";
 Generated text hyperlink boxobj.appendchild (iobj);
 } init ();

Effect Chart:

Complete code:

The above is the entire content of this article, I hope to help you learn.