DIV+CSS+JS实现的文字色彩渐变

Stella981
• 阅读 442

如题,这是一个简单的 CSS + DIV + JavaScript 实现的文字色彩渐变效果。

点击查看:**Demo | 右键另存下载, 或拷贝以下代码**

下面是 CSS 部分代码:

<!--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 部分代码:

<!--DIV代码开始-->
<div style="width:400px;margin:200px auto;background-color:#f2f2f2;border: 1px dashed #ccc;">
<h3><strong>CSS多彩渐变字</strong></h3>
<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">文字:</td>
    <td width="81%"><input name="text" type="text" id="ctext" size="30" maxlength="16" style="font:12px Microsoft Yahei" value="请在此输入您需要生成渐变色的文字" onkeyup="setDiv()" /></td>
  </tr>
  <tr>
    <td height="30" align="right">R值:</td>
    <td><select name="Rvalue" style="font:12px Microsoft Yahei" id="rvalue"></select>
    <span class="f999">RGB颜色中的R值(0-255)</span></td>
  </tr>
  <tr>
    <td height="30" align="right">G值:</td>
    <td><select name="Gvalue" style="font:12px Microsoft Yahei" id="gvalue"></select>
      <span class="f999">RGB颜色中的G值(0-255)</span></td>
  </tr>
  <tr>
    <td height="30" align="right">B值:</td>
    <td><select name="Bvalue" style="font:12px Microsoft Yahei" id="bvalue"></select>
      <span class="f999">RGB颜色中的B值(0-255)</span></td>
  </tr>
  <tr>
    <td height="30" align="right">渐变方式:</td>
    <td><select name="ctype" style="font:12px Microsoft Yahei" id="ctype"><option value="0">灰度渐变</option><option value="1" selected="selected">变化R值</option><option value="2">变化G值</option><option value="3">变化B值</option></select>
    <span class="f999">相应的数值会强制在0~255之间变化</span></td>
  </tr>
</table>
<div class="box" id="box"></div>
<br />
    <button onclick="javascript:createData()">OK,上色!</button>
<br />
 
</div>

以下是 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="<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="#";  // 生成的文字超链接
        boxObj.appendChild(iObj);
    }
}
init();
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
3年前
Opencv中Mat矩阵相乘——点乘、dot、mul运算详解
Opencv中Mat矩阵相乘——点乘、dot、mul运算详解2016年09月02日00:00:36 \牧野(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fme.csdn.net%2Fdcrmg) 阅读数:59593
Stella981 Stella981
3年前
Jenkins+Ansible+Gitlab自动化部署三剑客
JenkinsAnsibleGitlab自动化部署三剑客小中大showerlee2016031113:00Ansible(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.
Wesley13 Wesley13
3年前
P2P技术揭秘.P2P网络技术原理与典型系统开发
Modular.Java(2009.06)\.Craig.Walls.文字版.pdf:http://www.t00y.com/file/59501950(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.t00y.com%2Ffile%2F59501950)\More.E
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Easter79 Easter79
3年前
Swift项目兼容Objective
!456.jpg(http://static.oschina.net/uploads/img/201509/13172704_1KcG.jpg"1433497731426906.jpg")本文是投稿文章,作者:一叶(博客(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2F00red
Easter79 Easter79
3年前
The Complete Guide To Rooting Any Android Phone
PhoneWhitsonGordon(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.lifehacker.com.au%2Fauthor%2Fwhitsongordon%2F)7April,20118:00AMShare(https://ww
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这