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

约定不等于承诺〃 2022-10-06 00:57 311阅读 0赞

本文实例为大家分享了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多彩渐变字** ###

<table> 
 <tbody> 
  <tr> 
   <td colspan="2" align="center"></td> 
  </tr> 
  <tr> 
   <td align="right">文字：</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="right">R值：</td> 
   <td><p><span>RGB颜色中的R值(0-255)</span></p></td> 
  </tr> 
  <tr> 
   <td align="right">G值：</td> 
   <td><p><span>RGB颜色中的G值(0-255)</span></p></td> 
  </tr> 
  <tr> 
   <td align="right">B值：</td> 
   <td><p><span>RGB颜色中的B值(0-255)</span></p></td> 
  </tr> 
  <tr> 
   <td align="right">渐变方式：</td> 
   <td>灰度渐变变化R值变化G值变化B值<p><span>相应的数值会强制在0~255之间变化</span></p></td> 
  </tr> 
 </tbody> 
</table>

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();

效果图：

![fae5199af4e6a1ed7e643e73dfe17ea6.png][]

完整代码：

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多彩渐变字** ###

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();

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

[fae5199af4e6a1ed7e643e73dfe17ea6.png]: /images/20221005/9e095a21e81b4e4a99b3cbba96b338d4.png

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 css实现文字颜色渐变

相关 css3 文字渐变动画效果

相关 android 字体渐变效果怎么做,Android-LinearGradient实现TextView字体渐变的效果

相关 html字体变色特效,css字体特效，渐变颜色+动画效果

相关 html 透明度渐变效果,JS实现的透明度渐变动画效果示例

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

相关颜色自动渐变效果ArgbEvaluator的使用

相关 CSS 实现背景色渐变和文字颜色渐变

相关一种文字颜色渐变效果的超级连接特效

相关 JavaFx实现-渐变效果之一