javascript - 更改超链接的文本颜色

Question

我正在制作一个导航菜单栏。我想要它，以便其中一个 href 链接可以一个字母一个字母地改变颜色，而不会产生任何鼠标悬停效果，如果您明白我的意思的话。这是一个例子:

看到“创建免费帐户”超链接如何从一种颜色切换到另一种颜色了吗？这就是我指的。

如果这个问题听起来有点含糊，我会尝试重新措辞。

Answer 1

尝试 Sliding letters with jQuery , 你必须使用 lettering.js插件。

例子

<div class="sl_examples">
  <a href="#" id="example1" data-hover="Creativity">Illustrations</a>
</div>

.sl_examples{
   float:left;
   font-family: 'Bevan', arial, serif;
   font-size:50px;
   line-height:50px;
   color:#f0f0f0;
   margin-right:5px;
   text-transform:uppercase;
}
.sl_examples a{
   display:block;
   position:relative;
   float:left;
   clear:both;
   color:#fff;
}
.sl_examples a > span{
   height:50px;
   float:left;
   position:relative;
   overflow:hidden;
}
.sl_examples a span span{
   position:absolute;
   display:block;
   left:0px;
   top:0px;
   text-align:center;
}
.sl_examples a span span.sl-w1{
   color:#fff;
   text-shadow:0px 0px 1px #fff;
   z-index:2;
}  
.sl_examples a span span.sl-w2{
   color:#e82760;
   text-shadow:-1px 1px 2px #9f0633;
   z-index:3;
}


$(window).load(function() {
  $('#example1').hoverwords({ delay:50 });            
});