欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

神奇!js+CSS+DIV实现文字颜色渐变效果_javascript技巧

程序员文章站 2022-04-02 15:29:29
...
本文实例为大家分享了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)
渐变方式: 相应的数值会强制在0~255之间变化


以下是 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"+font+"";
 var num = boxObj.getElementsByTagName("a")[0].scrollWidth;
 boxObj.innerHTML="";
 for(var i=0;i

效果图:

神奇!js+CSS+DIV实现文字颜色渐变效果_javascript技巧

完整代码:



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

CSS多彩渐变字

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


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