CSS渐变动画

Question

我有一个带有CSS3渐变的按钮（锚点）。
我希望当用户悬停在按钮上时，能够将渐变动画/淡入到一种颜色。
问题是我找不到如何实现这一点- 因为jQuery UI对颜色的动画仅适用于常规颜色，而不适用于渐变。
有什么想法吗？
谢谢！

- amitairos

Answer 1

我为支持此功能的浏览器编写了一个jQuery插件，用于动画化Css3渐变。

您可以在这里找到它。

它使用我编写的Gradient cssHook来规范化CSS3渐变，使其更易于使用。

您可以像这样使用它：

$("#elem").animateGradient('linear-gradient(red, blue)', 1000);

它使用$.queue和$.dequeue/next()，所以你也可以添加其他动画。

首先需要设置渐变才能使其工作。

动画的问题在于jQuery通常会对CSS属性值进行操作，而不是属性值中的数字。

- Tomgrohl

Answer 2

您可以使用CSS3动画，尽管它们并不支持所有浏览器。这个页面有一个改变背景颜色的例子，显然您需要添加渐变效果。 http://css3.bradshawenterprises.com/animations/

- DoctorMick

---

谢谢。对于旧版浏览器，我该怎么办？我应该使用SVG吗？ - amitairos

此页面不会更改背景颜色，而是更改不透明度。 - android.nick

@DoctorMick 我尝试使用CSS3过渡效果，但只有在悬停时才有效，当离开按钮时它不会动画。有什么想法吗？-transition: background 1s ease-in-out - amitairos

Answer 3

检查一下我自己写的这个名为Backgroundor的jQuery库。

它非常易用，只需输入$('#divId').backgroundor();即可工作，而且还有很多选项可供选择。请看一下：

// the values here are the default values
options = {
  opacityval    : 0; // int, only 1 or 0 are accepted now (can be boolean too)
  intervaltime  : 100; // int, interval time value
  values        : [0,51,75]; // array of int, default percentage values for the linear gradient colors
  colors        : ['#499bea','#207ce5','#1679e3']; // array of string (hex values), default colors for the linear gradient
  color         : '#000000'; // string (hex value), default color for opacity animation
  animspeed     : 'linear'; // string, default animation curve
  animdegree    : '90deg'; // string, default linear-gradient degree
}

- Khaled Al-Ansari