javascript - 是否可以在 javascript 中为文本设置渐变动画？

Question

我希望它是一个链接上的渐变，在悬停时动画...除了制作 gif 图像之外，我没有看到任何这样的脚本，但这似乎最接近我正在寻找的东西。 .

CSS

.a:hover {
  font-size: 20px;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#111));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#caca5a', endColorstr='#909501');
}

js

<script language="javascript" type="text/javascript">
     $(document).ready(function(){
            var iAniSpeed = 2000;
        var sBgColor = 'gold';
        $('#headerWrap').hover(function(){
          $('li a:hover').animate( { backgroundColor: sBgColor }, iAniSpeed);
            return false;       
        });
    });
</script>

有什么想法吗？如果这个已经存在，抱歉..我找不到它，搜索了一段时间...

Answer 1

不幸的是，Chrome 不支持动画渐变(嘿，你猜怎么着，IE 支持!耶!)

然而，根据具体情况，您可以简单地通过设置 background-position 属性的动画来滑动渐变 - 请注意，您可以在渐变末端之外定义色标!