在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,主要用于判断鼠标进出的边界。