Мне интересно, если кто-нибудь узнает, когда webkit будет поддерживать переходы градиентов?
например, следующий код не работает в Chrome 6 (предполагая, что grad-transition - это ссылка):
.grad-transition {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(black));
-webkit-transition: background-image .5s;
}
.grad-transition:hover {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(white));
}
Попытка сделать то же самое.
Как сейчас, я не думаю, что можно анимировать градиент.
Я использую обходной путь. Вместо того, чтобы анимировать градиент, я использую полупрозрачный градиент для фонового изображения, а затем анимацию цвета фона.
#button
{
background-color: #dbdbdb;
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, rgba(255, 255, 255, 0.9)),
color-stop(100%, rgba(0, 0, 0, 0.6))
);
}
#button:hover
{
background-color: #353535;
}
Я также приведу несколько примеров здесь: http://tylergaw.com/www/lab/css-gradient-transition-sorta/
Вы также можете использовать фоновое положение, чтобы создать иллюзию изменения градиента, когда на самом деле он просто перемещается: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/
Можно сделать переход на градиентах с помощью небольшого взлома:
В приведенном ниже коде устанавливается прозрачность до 0,3 на самом темном цвете. Наведение установит этот цвет на другой цвет. Поскольку прозрачность может быть преобразована, она будет генерировать тот же эффект.
Я также добавил непереходную версию для mozilla и IE.
.menu li a {
background-color: #ffffff;
background: -webkit-gradient(linear, left top, right top, from(#eeeeee), to(rgba(238, 238, 238,0.3)));
background: linear-gradient(left,#eeeeee, #ffffff);
background: -moz-linear-gradient(180deg, #eeeeee, #ffffff);
}
.menu li a:hover {
background-color: #006613;
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
background: linear-gradient(left, #006613, #eeeeee);
background: -moz-linear-gradient(180deg, #006613, #eeeeee);
}
Я задал этот вопрос некоторое время назад, вы можете увидеть ответы, которые я получил, просмотрев мои вопросы. Они сказали мне, что вы еще не можете сделать это правильно, но вы можете сделать это, установив градиенты на двух разных div, а затем затуманив один div поверх другого, чтобы создать эффект.
Я работаю над JS lib, что делает возможным переход для градиентов: Он уже может использоваться для линейных градиентов. Использование:
var button = $('#button');
var targetGradientString = 'linear-gradient(rgb(247, 91, 52) 0%, rgb(240, 233, 93) 25%, rgb(43, 245, 12) 50%, rgb(24, 85, 240) 75%, rgb(166, 39, 230) 100%)';
var targetElement = $('#target');
button.click( function() {
targetElement.gradientTransition(targetGradientString, 1500, 60);
});