Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><ptml xmlns="http://www.w3.org/1999/xhtml"><pead><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Color gradient font with CLIP</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, address a: visited {color: # c00 ;}</style></pead><body><div ><p><strong>CSS colorful gradient words</strong></p><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">Text:</td> <td width="81%"><input name="text" type="text" id="ctext" size="30" maxlength="16" value="请在此输入您需要生成渐变色的文字" onkeyup="setDiv()" /></td> </tr> <tr> <td height="30" align="right">R value:</td> <td><select name="rvalue" id="rvalue"></select>Initializes the R value in the RGB color.</td> </tr> <tr> <td height="30" align="right">G value:</td> <td><select name="gvalue" id="gvalue"></select>Initialize the G value in the RGB color.</td> </tr> <tr> <td height="30" align="right">B value:</td> <td><select name="bvalue" id="bvalue"></select>Initializes the B value in the RGB color.</td> </tr> <tr> <td height="30" align="right">Gradient mode:</td> <td><select name="ctype" id="ctype"><option value="0">Grayscale gradient</option><option value="1" selected="selected">Variable R value</option><option value="2">Change G value</option><option value="3">Change B value</option></select>The corresponding value is forced to be 0 ~ Change between 255</td> </tr></table><div class="box" id="box"></div><br /> <button onclick="javascript:createData()">Gradient coloring</button><br /> <address><br />/? Id = 109</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; for (var I = 0; I <= 255; I ++) {var opr = document. createElement ("option"); var rg = document. createElement ("option"); var opb = document. createElement ("option"); opr. innerHTML = I; safeguard. innerHTML = I; opb. innerHTML = I; switch (I) {case 100: opb. selected = "selected"; break; case 200: safeguard. selected = "selected"; break;} gs. appendChild (Safeguard); 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 = "the text cannot be blank. 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 = "" + 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 ();</script></body></ptml>
Tip: you can modify some code before running
