Webkit对梯度过渡的支持 [英] Webkit support for gradient transitions
本文介绍了Webkit对梯度过渡的支持的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想知道是否有人知道webkit何时支持渐变的转换?
例如,以下代码在Chrome 6中不工作(假设grad转换是一个链接):
Im wondering if anyone know when will webkit support transitions of gradients?
for example, the following code doesnt work in Chrome 6 (assuming grad-transition is a link):
.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));
}
推荐答案
尝试做同样的事。
到目前为止,我认为不可能对渐变进行动画处理。
As of right now I do not think it is possible to animate a gradient.
使用解决方法。取而代之的动画渐变的,我使用的背景图片半透明渐变,然后动画的背景颜色。
I'm using a workaround. Instead of animating the gradient, I'm using a semi-transparent gradient for the background-image and then animating the background color.
#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/
这篇关于Webkit对梯度过渡的支持的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文