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

 想说点什么吗?

 (拖动评论框右下角可扩展评论框面积;若评论发表后未显示请耐心等待审核)

左半红印发表于2020.04.19th