欢迎光临
我们一直在努力

基于jQuery立体文字渐变特效

 

基于jQuery立体文字渐变特效。上面是效果图。

效果很不错吧?会不会误以为这些字体是图片?这可不是图片,而是用JS实现的,或许有些可以用CSS3弄。
下面来简单分享下实现过程及原理(网站中使用了jquery这个lib,我们这里就不再自己单独实现了,我们这里分享的也是jquery的实现方法):
HTML代码:

  1. <span class=“rainbows”>&copy; 2017 www.cssfan.cn. All Rights Reserved.</span>

为了便于代码重用,我们通过class来标识出哪些文字需要增加这个特效,这里用的是rainbows。

CSS代码:

  1. .rainbows{position:relative;display:block;} 
  2. .rainbow { background: transparent; display: block; position: relative; height: 1px; overflow: hidden; zindex: 5; }
  3.  .rainbow span { position: absolute; display: block; top: 0; left: 0px; } 
  4. .rainbows .highlight { color: #fff; display:block; position: absolute; top: 2px; left: 0px; zindex: 4; } 
  5. .rainbows .shadow { color: #000; display:block; position: absolute; opacity: 0.5; filter:alpha(opacity=50); top: 2px; left: 2px; zindex: 3;}
  6. .rainbows{position:relative;display:block;} 
  7. .rainbow { background: transparent; display: block; position: relative; height: 1px; overflow: hidden; zindex: 5; } 
  8. .rainbow span { position: absolute; display: block; top: 0; left: 0px; }  
  9. .rainbows .highlight { color: #fff; display:block; position: absolute; top: 2px; left: 0px; zindex: 4; } 
  10.  .rainbows .shadow { color: #000; display:block; position: absolute; opacity: 0.5; filter:alpha(opacity=50); top: 2px; left: 2px; zindex: 3; }

这里主要说明下highlight和shadow这两个class的意义,其实从字面也基本可以理解,这两个class是为了增加字体的立体性而设定,一个是白色的高亮,一个是黑色阴影。
JS部分:

  1. function initGradients(s) {
  2.       $(function() {
  3.           $(s).each(function() {
  4.               var el = this;
  5.               var from = $(el).attr(‘gradFromColor’)||‘#ffffff’, to = $(el).attr(‘gradToColor’)||‘#000000’;
  6.               var fR = parseInt(from.substring(1, 3), 16),
  7.               fG = parseInt(from.substring(3, 5), 16),
  8.               fB = parseInt(from.substring(5, 7), 16),
  9.               tR = parseInt(to.substring(1, 3), 16),
  10.               tG = parseInt(to.substring(3, 5), 16),
  11.               tB = parseInt(to.substring(5, 7), 16);
  12.  
  13.               var h = $(this).height() * 1.5;
  14.               var html,cacheHTML=[];
  15.               this.initHTML = html = this.initHTML||this.innerHTML;
  16.               this.innerHTML = ;
  17.               for (var i = 0; i < h; i++) {
  18.                   var c = ‘#’ + (Math.floor(fR * ( i) / h + tR * (/ h))).toString(16) + (Math.floor(fG * ( i) / h + tG * (/ h))).toString(16) + (Math.floor(fB * ( i) / h + tB * (/ h))).toString(16);
  19.                   cacheHTML.push(‘<span class=”rainbow rainbow-‘ + i + ‘” style=”color: ‘ + c + ‘;”><span style=”top: ‘ + (  i  1) + ‘px;”>’ + html + ‘</span></span>’)
  20.               }
  21.               cacheHTML.push(‘<span class=”highlight”>’ + html + ‘</span>’,‘<span class=”shadow”>’ + html + ‘</span>’);
  22.               $(cacheHTML.join()).appendTo(this)
  23.           })
  24.       })
  25.   }
  26.   //这个部分就是调用了,传入要添加效果的元素,这里可以是jquery的任意选择符。 
  27.   initGradients(‘.rainbows’);
代码看起来并不算多,但是如果想明白原理的话还是要认真的理解下这个代码的。
结合JS/CSS我们可以看出其大概的思路如下:
程序首先算出字体所在容器的高度N,然后清空容器内容,并添加N个span,每个span内容都为原容器的文字,每个span的颜色根据渐变色进行计算,而且其中的文字定位都相比之前一个span的文字向上偏移一个像素。CSS中可以看到,每个span的高度都为1。这样,我们就通过N各不同颜色的1px的span把字体“拼”出来了,然后加上“高光/阴影”就搞定。最后我们一起来看下完整的DEMO代码:
<code class="prism- language-markup"><span class="prism-token prism-doctype"><span class="dec">&lt;!DOCTYPE html&gt;</span></span>
<span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;</span></span><span class="tag">html</span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span>
<span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;</span></span><span class="tag">head</span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span>
<span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;</span></span><span class="tag">meta</span> <span class="prism-token prism-attr-name"><span class="atn">http-equiv</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">Content-Type</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span> <span class="prism-token prism-attr-name"><span class="atn">content</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">text/html; charset</span><span class="prism-token prism-punctuation"><span class="atv">=</span></span><span class="atv">gb2312</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span> <span class="prism-token prism-punctuation"><span class="tag">/&gt;</span></span></span>
  <span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;</span></span><span class="tag">title</span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span><span class="pln"> 文字立体渐变 - 前端范 </span><span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;/</span></span><span class="tag">title</span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span>
  <span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;</span></span><span class="tag">meta</span> <span class="prism-token prism-attr-name"><span class="atn">name</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">generator</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span> <span class="prism-token prism-attr-name"><span class="atn">content</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">editplus</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span> <span class="prism-token prism-punctuation"><span class="tag">/&gt;</span></span></span>
  <span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;</span></span><span class="tag">meta</span> <span class="prism-token prism-attr-name"><span class="atn">name</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">author</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span> <span class="prism-token prism-attr-name"><span class="atn">content</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span> <span class="prism-token prism-punctuation"><span class="tag">/&gt;</span></span></span>
  <span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;</span></span><span class="tag">meta</span> <span class="prism-token prism-attr-name"><span class="atn">name</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">keywords</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span> <span class="prism-token prism-attr-name"><span class="atn">content</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span> <span class="prism-token prism-punctuation"><span class="tag">/&gt;</span></span></span>
  <span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;</span></span><span class="tag">meta</span> <span class="prism-token prism-attr-name"><span class="atn">name</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">description</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span> <span class="prism-token prism-attr-name"><span class="atn">content</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span> <span class="prism-token prism-punctuation"><span class="tag">/&gt;</span></span></span>
  <span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;</span></span><span class="tag">style</span> <span class="prism-token prism-attr-name"><span class="atn">type</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">text/css</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span> <span class="prism-token prism-attr-name"><span class="atn">title</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span><span class="prism-token prism-style language-css">
    <span class="prism-token prism-selector"><span class="pln">body</span></span><span class="prism-token prism-punctuation"><span class="pun">{</span></span><span class="prism-token prism-property"><span class="pln">background</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span><span class="prism-token prism-hexcode"><span class="pun">#</span><span class="lit">333</span></span><span class="prism-token prism-punctuation"><span class="pun">}</span></span>
    <span class="prism-token prism-selector"><span class="prism-token prism-class"><span class="pun">.</span><span class="pln">en</span></span></span><span class="prism-token prism-punctuation"><span class="pun">{</span></span><span class="prism-token prism-property"><span class="pln">font</span><span class="pun">-</span><span class="pln">family</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span><span class="prism-token prism-string"><span class="str">"lucida grande"</span></span><span class="pun">,</span><span class="pln">verdana</span><span class="pun">,</span><span class="pln">sans</span><span class="pun">-</span><span class="pln">serif</span><span class="prism-token prism-punctuation"><span class="pun">;</span></span><span class="prism-token prism-property"><span class="pln">font</span><span class="pun">-</span><span class="pln">size</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span><span class="prism-token prism-number"><span class="lit">35</span></span><span class="lit">px</span><span class="prism-token prism-punctuation"><span class="pun">;</span></span><span class="prism-token prism-punctuation"><span class="pun">}</span></span>
    <span class="prism-token prism-selector"><span class="prism-token prism-class"><span class="pun">.</span><span class="pln">cn</span></span></span><span class="prism-token prism-punctuation"><span class="pun">{</span></span><span class="prism-token prism-property"><span class="pln">font</span><span class="pun">-</span><span class="pln">family</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span><span class="pun">黑体</span><span class="prism-token prism-punctuation"><span class="pun">;</span></span><span class="prism-token prism-property"><span class="pln">font</span><span class="pun">-</span><span class="pln">size</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span><span class="prism-token prism-number"><span class="lit">50</span></span><span class="lit">px</span><span class="prism-token prism-punctuation"><span class="pun">;</span></span><span class="prism-token prism-property"><span class="pln">height</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span><span class="prism-token prism-number"><span class="lit">80</span></span><span class="lit">px</span><span class="prism-token prism-punctuation"><span class="pun">;</span></span><span class="prism-token prism-property"><span class="pln">overflow</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span><span class="pln">hidden</span><span class="prism-token prism-punctuation"><span class="pun">}</span></span>

<span class="prism-token prism-selector"><span class="prism-token prism-class"><span class="pun">.</span><span class="pln">rainbows</span></span></span><span class="prism-token prism-punctuation"><span class="pun">{</span></span><span class="prism-token prism-property"><span class="pln">position</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span><span class="pln">relative</span><span class="prism-token prism-punctuation"><span class="pun">;</span></span><span class="prism-token prism-property"><span class="pln">display</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span><span class="pln">block</span><span class="prism-token prism-punctuation"><span class="pun">;</span></span><span class="prism-token prism-punctuation"><span class="pun">}</span></span>
<span class="prism-token prism-selector"><span class="prism-token prism-class"><span class="pun">.</span><span class="pln">rainbow</span></span> </span><span class="prism-token prism-punctuation"><span class="pun">{</span></span>
    <span class="prism-token prism-property"><span class="pln">background</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span><span class="pln"> transparent</span><span class="prism-token prism-punctuation"><span class="pun">;</span></span>
    <span class="prism-token prism-property"><span class="pln">display</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span><span class="pln"> block</span><span class="prism-token prism-punctuation"><span class="pun">;</span></span>
    <span class="prism-token prism-property"><span class="pln">position</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span><span class="pln"> relative</span><span class="prism-token prism-punctuation"><span class="pun">;</span></span>
    <span class="prism-token prism-property"><span class="pln">height</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span> <span class="prism-token prism-number"><span class="lit">1</span></span><span class="lit">px</span><span class="prism-token prism-punctuation"><span class="pun">;</span></span>
    <span class="prism-token prism-property"><span class="pln">overflow</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span><span class="pln"> hidden</span><span class="prism-token prism-punctuation"><span class="pun">;</span></span>
    <span class="prism-token prism-property"><span class="pln">z</span><span class="pun">-</span><span class="pln">index</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span> <span class="prism-token prism-number"><span class="lit">5</span></span><span class="prism-token prism-punctuation"><span class="pun">;</span></span>
<span class="prism-token prism-punctuation"><span class="pun">}</span></span>

<span class="prism-token prism-selector"><span class="prism-token prism-class"><span class="pun">.</span><span class="pln">rainbow</span></span><span class="pln"> span </span></span><span class="prism-token prism-punctuation"><span class="pun">{</span></span>
    <span class="prism-token prism-property"><span class="pln">position</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span><span class="pln"> absolute</span><span class="prism-token prism-punctuation"><span class="pun">;</span></span>
    <span class="prism-token prism-property"><span class="pln">display</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span><span class="pln"> block</span><span class="prism-token prism-punctuation"><span class="pun">;</span></span>
    <span class="prism-token prism-property"><span class="pln">top</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span> <span class="prism-token prism-number"><span class="lit">0</span></span><span class="prism-token prism-punctuation"><span class="pun">;</span></span>
    <span class="prism-token prism-property"><span class="pln">left</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span> <span class="prism-token prism-number"><span class="lit">0</span></span><span class="lit">px</span><span class="prism-token prism-punctuation"><span class="pun">;</span></span>
<span class="prism-token prism-punctuation"><span class="pun">}</span></span>

<span class="prism-token prism-selector"><span class="prism-token prism-class"><span class="pun">.</span><span class="pln">rainbows</span></span> <span class="prism-token prism-class"><span class="pun">.</span><span class="pln">highlight</span></span> </span><span class="prism-token prism-punctuation"><span class="pun">{</span></span>
    <span class="prism-token prism-property"><span class="pln">color</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span> <span class="prism-token prism-hexcode"><span class="com">#fff</span></span><span class="prism-token prism-punctuation"><span class="com">;</span></span>
    <span class="prism-token prism-property"><span class="pln">display</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span><span class="pln">block</span><span class="prism-token prism-punctuation"><span class="pun">;</span></span>
    <span class="prism-token prism-property"><span class="pln">position</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span><span class="pln"> absolute</span><span class="prism-token prism-punctuation"><span class="pun">;</span></span>
    <span class="prism-token prism-property"><span class="pln">top</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span> <span class="pun">-</span><span class="prism-token prism-number"><span class="lit">2</span></span><span class="lit">px</span><span class="prism-token prism-punctuation"><span class="pun">;</span></span>
    <span class="prism-token prism-property"><span class="pln">left</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span> <span class="prism-token prism-number"><span class="lit">0</span></span><span class="lit">px</span><span class="prism-token prism-punctuation"><span class="pun">;</span></span>
    <span class="prism-token prism-property"><span class="pln">z</span><span class="pun">-</span><span class="pln">index</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span> <span class="prism-token prism-number"><span class="lit">4</span></span><span class="prism-token prism-punctuation"><span class="pun">;</span></span>
<span class="prism-token prism-punctuation"><span class="pun">}</span></span>

<span class="prism-token prism-selector"><span class="prism-token prism-class"><span class="pun">.</span><span class="pln">rainbows</span></span> <span class="prism-token prism-class"><span class="pun">.</span><span class="pln">shadow</span></span> </span><span class="prism-token prism-punctuation"><span class="pun">{</span></span>
    <span class="prism-token prism-property"><span class="pln">color</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span> <span class="prism-token prism-hexcode"><span class="com">#000</span></span><span class="prism-token prism-punctuation"><span class="com">;</span></span>
    <span class="prism-token prism-property"><span class="pln">display</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span><span class="pln">block</span><span class="prism-token prism-punctuation"><span class="pun">;</span></span>
    <span class="prism-token prism-property"><span class="pln">position</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span><span class="pln"> absolute</span><span class="prism-token prism-punctuation"><span class="pun">;</span></span>
    <span class="prism-token prism-property"><span class="pln">opacity</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span> <span class="prism-token prism-number"><span class="lit">0.5</span></span><span class="prism-token prism-punctuation"><span class="pun">;</span></span>
    <span class="prism-token prism-property"><span class="pln">filter</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span><span class="prism-token prism-function"><span class="pln">alpha</span></span><span class="prism-token prism-punctuation"><span class="pun">(</span></span><span class="pln">opacity</span><span class="pun">=</span><span class="prism-token prism-number"><span class="lit">50</span></span><span class="prism-token prism-punctuation"><span class="pun">)</span></span><span class="prism-token prism-punctuation"><span class="pun">;</span></span>
    <span class="prism-token prism-property"><span class="pln">top</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span> <span class="prism-token prism-number"><span class="lit">2</span></span><span class="lit">px</span><span class="prism-token prism-punctuation"><span class="pun">;</span></span>
    <span class="prism-token prism-property"><span class="pln">left</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span> <span class="prism-token prism-number"><span class="lit">2</span></span><span class="lit">px</span><span class="prism-token prism-punctuation"><span class="pun">;</span></span>
    <span class="prism-token prism-property"><span class="pln">z</span><span class="pun">-</span><span class="pln">index</span></span><span class="prism-token prism-punctuation"><span class="pun">:</span></span> <span class="prism-token prism-number"><span class="lit">3</span></span><span class="prism-token prism-punctuation"><span class="pun">;</span></span>
<span class="prism-token prism-punctuation"><span class="pun">}</span></span>
  </span><span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;/</span></span><span class="tag">style</span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span>
 <span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;/</span></span><span class="tag">head</span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span>
 <span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;</span></span><span class="tag">body</span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span>
  <span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;</span></span><span class="tag">span</span> <span class="prism-token prism-attr-name"><span class="atn">class</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">rainbows</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span><span class="prism-token prism-entity" title="©"><span class="pln">&amp;copy;</span></span><span class="pln"> 2017 www.jiangweishan.com. All Rights Reserved.</span><span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;/</span></span><span class="tag">span</span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span> 
  <span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;</span></span><span class="tag">span</span> <span class="prism-token prism-attr-name"><span class="atn">class</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">rainbows cn</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span> <span class="prism-token prism-attr-name"><span class="atn">gradToColor</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">#ff0000</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span><span class="pln">汉字测试:红色渐变</span><span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;/</span></span><span class="tag">span</span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span>
  <span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;</span></span><span class="tag">span</span> <span class="prism-token prism-attr-name"><span class="atn">class</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">rainbows cn</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span> <span class="prism-token prism-attr-name"><span class="atn">gradToColor</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">#00ff00</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span><span class="pln">汉字测试:绿色渐变</span><span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;/</span></span><span class="tag">span</span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span>
  <span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;</span></span><span class="tag">span</span> <span class="prism-token prism-attr-name"><span class="atn">class</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">rainbows cn</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span> <span class="prism-token prism-attr-name"><span class="atn">gradToColor</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">#0000ff</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span><span class="pln">汉字测试:蓝色渐变</span><span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;/</span></span><span class="tag">span</span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span>
  <span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;</span></span><span class="tag">span</span> <span class="prism-token prism-attr-name"><span class="atn">class</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">rainbows cn</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span> <span class="prism-token prism-attr-name"><span class="atn">gradToColor</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">#ffff00</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span><span class="pln">汉字测试:黄色渐变</span><span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;/</span></span><span class="tag">span</span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span>
  <span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;</span></span><span class="tag">span</span> <span class="prism-token prism-attr-name"><span class="atn">class</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">rainbows cn</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span> <span class="prism-token prism-attr-name"><span class="atn">gradToColor</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">#ff00ff</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span><span class="pln">汉字测试:粉色渐变</span><span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;/</span></span><span class="tag">span</span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span>
  <span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;</span></span><span class="tag">span</span> <span class="prism-token prism-attr-name"><span class="atn">class</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">rainbows cn</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span> <span class="prism-token prism-attr-name"><span class="atn">gradToColor</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">#00ffff</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span><span class="pln">汉字测试:浅绿渐变</span><span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;/</span></span><span class="tag">span</span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span>
  <span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;</span></span><span class="tag">span</span> <span class="prism-token prism-attr-name"><span class="atn">class</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">rainbows cn</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span> <span class="prism-token prism-attr-name"><span class="atn">gradFromColor</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">#000000</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span> <span class="prism-token prism-attr-name"><span class="atn">gradToColor</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">#ffffff</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span><span class="pln">汉字测试:黑白渐变(不是从白色开始的渐变显示有点异常)</span><span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;/</span></span><span class="tag">span</span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span>


  <span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;</span></span><span class="tag">script</span> <span class="prism-token prism-attr-name"><span class="atn">src</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">/demo/js/jq.js</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span> <span class="prism-token prism-attr-name"><span class="atn">type</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">text/javascript</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span><span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;/</span></span><span class="tag">script</span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span>
  <span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;</span></span><span class="tag">script</span> <span class="prism-token prism-attr-name"><span class="atn">type</span></span><span class="prism-token prism-attr-value"><span class="prism-token prism-punctuation"><span class="pun">=</span></span><span class="prism-token prism-punctuation"><span class="atv">"</span></span><span class="atv">text/javascript</span><span class="prism-token prism-punctuation"><span class="atv">"</span></span></span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span>
  <span class="prism-token prism-comment" spellcheck="true"><span class="pun">&lt;!--</span>
  <span class="kwd">function</span><span class="pln"> initGradients</span><span class="pun">(</span><span class="pln">s</span><span class="pun">)</span> <span class="pun">{</span><span class="pln">
      $</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span><span class="pln">
          $</span><span class="pun">(</span><span class="pln">s</span><span class="pun">).</span><span class="pln">each</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span>
              <span class="kwd">var</span><span class="pln"> el </span><span class="pun">=</span> <span class="kwd">this</span><span class="pun">;</span>
              <span class="kwd">var</span><span class="pln"> from </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="pln">el</span><span class="pun">).</span><span class="pln">attr</span><span class="pun">(</span><span class="str">'gradFromColor'</span><span class="pun">)||</span><span class="str">'#ffffff'</span><span class="pun">,</span><span class="pln"> to </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="pln">el</span><span class="pun">).</span><span class="pln">attr</span><span class="pun">(</span><span class="str">'gradToColor'</span><span class="pun">)||</span><span class="str">'#000000'</span><span class="pun">;</span>
              <span class="kwd">var</span><span class="pln"> fR </span><span class="pun">=</span><span class="pln"> parseInt</span><span class="pun">(</span><span class="pln">from</span><span class="pun">.</span><span class="pln">substring</span><span class="pun">(</span><span class="lit">1</span><span class="pun">,</span> <span class="lit">3</span><span class="pun">),</span> <span class="lit">16</span><span class="pun">),</span><span class="pln">
              fG </span><span class="pun">=</span><span class="pln"> parseInt</span><span class="pun">(</span><span class="pln">from</span><span class="pun">.</span><span class="pln">substring</span><span class="pun">(</span><span class="lit">3</span><span class="pun">,</span> <span class="lit">5</span><span class="pun">),</span> <span class="lit">16</span><span class="pun">),</span><span class="pln">
              fB </span><span class="pun">=</span><span class="pln"> parseInt</span><span class="pun">(</span><span class="pln">from</span><span class="pun">.</span><span class="pln">substring</span><span class="pun">(</span><span class="lit">5</span><span class="pun">,</span> <span class="lit">7</span><span class="pun">),</span> <span class="lit">16</span><span class="pun">),</span><span class="pln">
              tR </span><span class="pun">=</span><span class="pln"> parseInt</span><span class="pun">(</span><span class="pln">to</span><span class="pun">.</span><span class="pln">substring</span><span class="pun">(</span><span class="lit">1</span><span class="pun">,</span> <span class="lit">3</span><span class="pun">),</span> <span class="lit">16</span><span class="pun">),</span><span class="pln">
              tG </span><span class="pun">=</span><span class="pln"> parseInt</span><span class="pun">(</span><span class="pln">to</span><span class="pun">.</span><span class="pln">substring</span><span class="pun">(</span><span class="lit">3</span><span class="pun">,</span> <span class="lit">5</span><span class="pun">),</span> <span class="lit">16</span><span class="pun">),</span><span class="pln">
              tB </span><span class="pun">=</span><span class="pln"> parseInt</span><span class="pun">(</span><span class="pln">to</span><span class="pun">.</span><span class="pln">substring</span><span class="pun">(</span><span class="lit">5</span><span class="pun">,</span> <span class="lit">7</span><span class="pun">),</span> <span class="lit">16</span><span class="pun">);</span>

              <span class="kwd">var</span><span class="pln"> h </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">height</span><span class="pun">()</span> <span class="pun">*</span> <span class="lit">1.5</span><span class="pun">;</span>
              <span class="kwd">var</span><span class="pln"> html</span><span class="pun">,</span><span class="pln">cacheHTML</span><span class="pun">=[];</span>
              <span class="kwd">this</span><span class="pun">.</span><span class="pln">initHTML </span><span class="pun">=</span><span class="pln"> html </span><span class="pun">=</span> <span class="kwd">this</span><span class="pun">.</span><span class="pln">initHTML</span><span class="pun">||</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">innerHTML</span><span class="pun">;</span>
              <span class="kwd">this</span><span class="pun">.</span><span class="pln">innerHTML </span><span class="pun">=</span> <span class="str">''</span><span class="pun">;</span>
              <span class="kwd">for</span> <span class="pun">(</span><span class="kwd">var</span><span class="pln"> i </span><span class="pun">=</span> <span class="lit">0</span><span class="pun">;</span><span class="pln"> i </span><span class="pun">&lt;</span><span class="pln"> h</span><span class="pun">;</span><span class="pln"> i</span><span class="pun">++)</span> <span class="pun">{</span>
                  <span class="kwd">var</span><span class="pln"> c </span><span class="pun">=</span> <span class="str">'#'</span> <span class="pun">+</span> <span class="pun">(</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">floor</span><span class="pun">(</span><span class="pln">fR </span><span class="pun">*</span> <span class="pun">(</span><span class="pln">h </span><span class="pun">-</span><span class="pln"> i</span><span class="pun">)</span> <span class="pun">/</span><span class="pln"> h </span><span class="pun">+</span><span class="pln"> tR </span><span class="pun">*</span> <span class="pun">(</span><span class="pln">i </span><span class="pun">/</span><span class="pln"> h</span><span class="pun">))).</span><span class="pln">toString</span><span class="pun">(</span><span class="lit">16</span><span class="pun">)</span> <span class="pun">+</span> <span class="pun">(</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">floor</span><span class="pun">(</span><span class="pln">fG </span><span class="pun">*</span> <span class="pun">(</span><span class="pln">h </span><span class="pun">-</span><span class="pln"> i</span><span class="pun">)</span> <span class="pun">/</span><span class="pln"> h </span><span class="pun">+</span><span class="pln"> tG </span><span class="pun">*</span> <span class="pun">(</span><span class="pln">i </span><span class="pun">/</span><span class="pln"> h</span><span class="pun">))).</span><span class="pln">toString</span><span class="pun">(</span><span class="lit">16</span><span class="pun">)</span> <span class="pun">+</span> <span class="pun">(</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">floor</span><span class="pun">(</span><span class="pln">fB </span><span class="pun">*</span> <span class="pun">(</span><span class="pln">h </span><span class="pun">-</span><span class="pln"> i</span><span class="pun">)</span> <span class="pun">/</span><span class="pln"> h </span><span class="pun">+</span><span class="pln"> tB </span><span class="pun">*</span> <span class="pun">(</span><span class="pln">i </span><span class="pun">/</span><span class="pln"> h</span><span class="pun">))).</span><span class="pln">toString</span><span class="pun">(</span><span class="lit">16</span><span class="pun">);</span><span class="pln">
                  cacheHTML</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="str">'&lt;span class="rainbow rainbow-'</span> <span class="pun">+</span><span class="pln"> i </span><span class="pun">+</span> <span class="str">'" style="color: '</span> <span class="pun">+</span><span class="pln"> c </span><span class="pun">+</span> <span class="str">';"&gt;&lt;span style="top: '</span> <span class="pun">+</span> <span class="pun">(</span> <span class="pun">-</span><span class="pln"> i </span><span class="pun">-</span> <span class="lit">1</span><span class="pun">)</span> <span class="pun">+</span> <span class="str">'px;"&gt;'</span> <span class="pun">+</span><span class="pln"> html </span><span class="pun">+</span> <span class="str">'&lt;/span&gt;&lt;/span&gt;'</span><span class="pun">)</span>
              <span class="pun">}</span><span class="pln">
              cacheHTML</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="str">'&lt;span class="highlight"&gt;'</span> <span class="pun">+</span><span class="pln"> html </span><span class="pun">+</span> <span class="str">'&lt;/span&gt;'</span><span class="pun">,</span><span class="str">'&lt;span class="shadow"&gt;'</span> <span class="pun">+</span><span class="pln"> html </span><span class="pun">+</span> <span class="str">'&lt;/span&gt;'</span><span class="pun">);</span><span class="pln">
              $</span><span class="pun">(</span><span class="pln">cacheHTML</span><span class="pun">.</span><span class="pln">join</span><span class="pun">(</span><span class="str">''</span><span class="pun">)).</span><span class="pln">appendTo</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">)</span>
          <span class="pun">})</span>
      <span class="pun">})</span>
  <span class="pun">}</span><span class="pln">
  initGradients</span><span class="pun">(</span><span class="str">'.rainbows'</span><span class="pun">);</span>
  <span class="com">//--&gt;</span></span>
  <span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;/</span></span><span class="tag">script</span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span>
 <span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;/</span></span><span class="tag">body</span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span>
<span class="prism-token prism-tag"><span class="prism-token prism-punctuation"><span class="tag">&lt;/</span></span><span class="tag">html</span><span class="prism-token prism-punctuation"><span class="tag">&gt;</span></span></span></code>

 

 

 

赞(6) 打赏
未经允许不得转载:前端范 » 基于jQuery立体文字渐变特效
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

更专业 更方便

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏