我在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;
}
但我不确定如何将-webkit-gradient更改为其他供应商前缀和普通标准。
我想确保它与现代的跨浏览器兼容。
答案 0 :(得分:0)
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));
我希望这就是你想要的。
答案 1 :(得分:0)
好吧,我试过了,这是我的答案。希望这可以作为对任何人的参考。
a{
display:inline-block;
background:#fff;
position:relative;
padding:2px 5px;
background:-webkit-gradient(linear, left top, right top, color-stop(50%, #fff), color-stop(50%, #000));
background:-webkit-linear-gradient(left, #fff 50%, #000 50%);
background:-moz-linear-gradient(left, #fff 50%, #000 50%);
background:linear-gradient(to right, #fff 50%, #000 50%);
background-size:200% 100%;
background-position:0 0;
-webkit-transition:background-position .3s ease-out;
-moz-transition:background-position .3s ease-out;
transition:background-position .3s ease-out;
}
a:hover{
background-position:-100% 0;
}
http://jsfiddle.net/nsfxE/215/
现在它应该适用于大多数现代浏览器。 我从来没有把Opera添加到前缀,因为我试过了它并且它不起作用。标准语法在Opera上运行良好。