html - 幻灯片背景颜色过渡

Question

我在 stackoverflow 的一个线程中找到了这个例子。

<a href="#">aosgibmoa bnocibnas</a>

a{
display:inline-block;
background:#fff;
position:relative;
padding:2px 5px;

background:-webkit-gradient(linear, left top, right top, color-stop(0.5, #fff), color-stop(0.5, #000));
background-size:200% 100%;
background-position:0 0;
-webkit-transition:background-position .3s ease-out;
}

a:hover{
    background-position:100% 0;
}

http://jsfiddle.net/nsfxE/1/

但我不确定如何将 -webkit-gradient 更改为其他供应商前缀和正常的标准前缀。

我想确保它在某种程度上与现代的跨浏览器兼容。

Answer 1

background-image: -webkit-gradient(linear, left top, right top, color-stop(0.5, #fff), color-stop(0.5, #000));
background-image: -moz-linear-gradient(linear, left top, right top, color-stop(0.5, #fff), color-stop(0.5, #000));
background-image: -o-linear-gradient(linear, left top, right top, color-stop(0.5, #fff), color-stop(0.5, #000));
background-image: linear-gradient(linear, left top, right top, color-stop(0.5, #fff), color-stop(0.5, #000));

希望这就是你想要的。