Поддержка Webkit для градиентных переходов - PullRequest
Новая
       12

Поддержка Webkit для градиентных переходов

31 голосов
/ 24 сентября 2010

Мне интересно, знает ли кто-нибудь, когда 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));
}

Ответы [ 5 ]

50 голосов
/ 05 января 2011

Попытка сделать то же самое.

На данный момент я не думаю, что возможно анимировать градиент.

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

#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/

10 голосов
/ 25 октября 2011

Вы также можете использовать background-position, чтобы создать иллюзию изменения градиента, когда на самом деле он просто перемещается: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

2 голосов
/ 05 сентября 2011

Можно сделать переход на градиентах, используя небольшой взлом:

Приведенный ниже код установит прозрачность на 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);
}
1 голос
/ 16 октября 2011

Я задал этот вопрос недавно, вы можете увидеть ответы, которые я получил, просматривая мои вопросы. Они сказали мне, что вы еще не можете сделать это должным образом, но вы можете сделать это, установив градиенты на два разных деления, а затем закрасьте один делитель поверх другого, чтобы создать эффект.

0 голосов
/ 31 марта 2017

Я работаю над библиотекой JS, которая делает возможным переход для градиентов: Это уже можно использовать для линейных градиентов. Использование: 

    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);
    });

GitHub Демо

...