Question

我想知道是否有人知道webkit何时支持渐变转换？
例如，以下代码在Chrome 6中不起作用（假设渐变过渡是一个链接）：

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

Answer 1

尝试做同样的事情。

截至目前，我认为不可能为渐变设置动画。

我正在使用解决方法。我没有为渐变设置动画，而是为背景图像使用半透明渐变，然后为背景颜色设置动画。

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

Answer 2

你也可以使用background-position来给出渐变正在改变的错觉，实际上它只是被移动： http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

Answer 3

可以使用一点点黑客进行渐变过渡：

以下代码将透明度设置为最暗颜色的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);
}

Answer 4

我前一段时间问过这个问题，你可以通过搜索我提出的问题看到我得到的答案。他们告诉我你还不能正确地做到这一点，但你可以通过在两个不同的div上设置渐变，然后在另一个上面淡化一个div来创建效果。

Answer 5

我正在研究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);
    });

github Demo

Webkit支持渐变过渡

5 个答案: