CSS градиентная анимация

Question

У меня есть кнопка (якорь), на которой есть CSS3-градиент.
Я хочу анимировать / ослабить градиент до одного цвета, когда пользователь наводит курсор на кнопку.
Проблема в том, что я не могуузнайте, как это сделать, поскольку анимация пользовательского интерфейса jQuery на цветах работает только на обычных, а не на градиентах.
Есть идеи?
Спасибо!

Answer 1

Я написал плагин jQuery для анимации градиентов Css3 для браузеров, которые его поддерживают.

Вы можете найти его здесь

Он использует Gradient cssHook, который я написал для нормализации CSS3-градиентов, чтобы упростить его использование.

Вы бы использовали это как:

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

Используются $.queue и $.dequeue/next(), поэтому вы также можете добавлять другие анимации.

Для этого нужно сначала установить градиент, чтобы он работал.

Проблема с анимацией заключается в том, что jQuery обычно делает это для значения свойства CSS, а не для числа, например, в пределах значения.

Answer 2

Вы можете использовать анимацию CSS3, хотя они поддерживаются не во всех браузерах.На этой странице есть пример изменения цвета фона, очевидно, вам нужно добавить градиент.

http://css3.bradshawenterprises.com/animations/

Answer 3

Проверьте эту библиотеку jquery под названием Backgroundor , я написал ее сам.

Это так просто, просто наберите $('#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
}