神奇!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
效果图:
完整代码:
DIV+CSS+JS实现色彩渐变字体 CSS多彩渐变字
文字: R值: RGB颜色中的R值(0-255) G值: RGB颜色中的G值(0-255) B值: RGB颜色中的B值(0-255) 渐变方式: 相应的数值会强制在0~255之间变化
以上就是本文的全部内容,希望对大家的学习有所帮助。
推荐阅读
-
javascript实现颜色渐变的方法_javascript技巧
-
利用JQuery和JS实现奇偶行背景颜色自定义效果_javascript技巧
-
Js实现滚动变色的文字效果_javascript技巧
-
js实现模拟计算器退格键删除文字效果的方法_javascript技巧
-
javascript实现按钮颜色渐变效果的实例讲解
-
javascript实现颜色渐变的方法_javascript技巧
-
js实现同一个页面多个渐变效果的方法_javascript技巧
-
jQuery实现为控件添加水印文字效果(附源码)_javascript技巧
-
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果_javascript技巧
-
javascript+css实现单击颜色褪去效果_javascript技巧