借助background-position实现渐变过渡
background-image虽然不支持CSS3 transition过渡，但是background-position支持啊，于是，通过控制背景位置，我们是可以实现渐变过渡效果的。
实现效果如下（鼠标hover）：
借助background-color实现渐变过渡
background-image虽然不支持CSS3 transition过渡，但是background-color支持啊，于是，通过控制背景颜色，和一个颜色呈现技巧，我们也是可以实现渐变过渡效果的。
鼠标hover前后效果对比：
借助伪元素和opacity实现渐变过渡
借助伪元素创建变换后的渐变效果，通过改变覆盖的渐变的opacity透明度变化实现渐变过渡效果。
下图为hover之后的效果：
相关代码如下：
扩展资料：mozilla 使用 CSS transitions
CSS3中的transition可以实现文字颜色，容器背景等的过渡效果，但IE10以下版本都是不支持的！<style>
a {font-size:24pxfont-weight:bold
-moz-transition:all .5s ease-in
-webkit-transition:all .5s ease-in
-o-transition:all .5s ease-in
-ms-transition:all .5s ease-in
transition:all .5s ease-in}
a:link,a:visited,a:active{color:#000}
a:hover{color:#f00}
</style>
<a href="">颜色Transition</a>
详细用法自己查一查吧！！
