在CSS3中，有个新属性是animation，当然了如果你了解的话，transition也是一样的道理。这两个CSS3中的新属性可以让元素在页面中完成你想要的一些动画效果。但是，background-image不支持这两个属性。说实话这很扯淡，background-image也是CSS3中新增的属性，自己不支持自己还行？！
https://www.w3.org/TR/css-backgrounds-3/#the-background-image
W3有明确的显示Animatable:no，但就是不说为啥。
Name: background-image
Value: <bg-image>#
Initial: none
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified, but with URIs made absolute
Animatable: no
这个问题网上有个很麻烦的方法，简单说就是用backgrond-position属性，把整个动画过程切成N帧，然后把这N帧拼接成一张图，再利用CSS3定位这张图中不同位置的帧来造成动画的效果。超级麻烦好吗，先不说这个方法还要利用插件或者第三方工具来拼图，录制动画成N帧就没法弄。算了，自己来。
这里我用自己的实际情况来说明，本站的文章标题就是这个效果的完成品，鼠标移进移出的特效。红色渐变效果是用background-image中的渐变（background-image: linear-gradien）效果实现的。我无非需要它淡入淡出而已，所以很自然的可以想到利用jquery或者jqueryui，后者更方便，一个toggle方法既可以满足。
而需要调整的其实是html和css。首先是HTML，文章标题是一个简单的a链接，a后面接一个div作为背景。CSS如下：
#title a {
z-index: 10;
position: relative;
}
.title_background{
background-image: linear-gradient(to right, rgba(88, 199, 238, 0), rgba(255, 0, 0, 0.5), rgba(88, 199, 238, 0));
height: 40px;
z-index: 0;
position: relative;
top: -40px;
display: none;
}
需要注意的是div的position要设置成relative，这个属性的意义在于依据父元素定位。所以通过设置top或者left为一个负值，就可以使这两个元素重叠。我们发现a链接的属性也有position：relative，这个目的在于使z-index生效。我们希望a链接能够显示在div的上层。请注意，z-index是在position设置除了static以外的属性下才能生效的，而position的默认属性就是static，所以必须给position一个其他的设定值，这里卡了我很久。
还有一点需要说明，我们能不能将背景div放在a链接前面呢？看起来没啥区别，只是调整位置的变成了a链接而已，但是在下面的jquery动画中会出现问题，toggle方法的本质其实是将动画层的display属性最终设置为none或者block，但是背景div的display属性会影响到a链接的position定位，所以这导致在执行jquery动画后a链接的位置发生偏移，这不是我想要的。
然后是js代码，这里不多讲了，懂得自然懂。
function title_hover() {
let title_button = document.querySelectorAll(".title_content");
for(let i =0; i < title_button.length; i++){
$(title_button[i]).mouseenter(function () {
let title_b = this.querySelector('.title_background');
$(title_b).toggle("fade",500);
})
$(title_button[i]).mouseleave(function () {
let title_b = this.querySelector('.title_background');
$(title_b).toggle("fade",500);
})
}
}
其中的title_content是用于包裹a链接和背景div的div，主要用于判断鼠标进出的边界。
川公网安备51011202000667
