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属性的动画来滑动渐变 - 请注意，您可以在渐变结束之外定义颜色停止！

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

1 个答案: