Webkit 对渐变过渡的支持
Posted
技术标签:
【中文标题】Webkit 对渐变过渡的支持【英文标题】:Webkit support for gradient transitions 【发布时间】:2011-04-16 23:00:00 【问题描述】:我想知道是否有人知道 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));
【问题讨论】:
我整个上午都在尝试这样做,但找不到解决方案。 相关webkit票证,供日后参考:bugs.webkit.org/show_bug.cgi?id=21725 【参考方案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/
【讨论】:
哈,这实际上有点聪明。谢谢:) 看起来在 chrome 59 / FF 54 中仍然无法使用。IE 11 可以轻松处理。【参考方案2】:您还可以使用 background-position 来产生渐变正在变化的错觉,而实际上它只是被移动了: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/
【讨论】:
这是当您将鼠标悬停在按钮上时 Twitter 的 Bootstrap 使用的:twitter.github.com/bootstrap【参考方案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);
【讨论】:
【参考方案4】:我不久前问过这个问题,您可以通过搜索我提出的问题来查看我得到的回复。他们告诉我,你还不能正确地做到这一点,但你可以通过在两个不同的 div 上设置渐变,然后将一个 div 淡化到另一个 div 上来创建效果。
【讨论】:
【参考方案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 对渐变过渡的支持的主要内容,如果未能解决你的问题,请参考以下文章