css3动画切换背景图片 |css3 导航动画效果代码

/*定义动画*/
@keyframes backgroundFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/*应用动画*/
div.background {
animation-name: backgroundFade;
animation-duration: 1s;
animation-fill-mode: forwards;
}

代码中，大家定义了一个名为backgroundFade的动画，通过控制opacity属性来实现淡入淡出的效果。然后通过应用animation-name、animation-duration和animation-fill-mode属性，将动画应用于背景图片所在的元素中。其中animation-fill-mode属性设置为forwards，是为了让动画结束后保持最后一个关键帧的样式，防止背景图片出现闪烁。

接下来，大家需要在HTML中使用这个样式，在需要切换背景图片的元素中，添加class属性background，并设置背景图片URL。

/*HTML*/
<div class="background"></div>

最后，大家需要使用JavaScript来切换背景图片，具体代码如下：

/*JavaScript*/
var bgImgs = ['secondImg.jpg', 'thirdImg.jpg', 'fourthImg.jpg'];
var currentImg = 0;
function changeBackground() {
currentImg = (currentImg + 1) % bgImgs.length;
document.getElementsByClassName("background")[0].style.backgroundImage = "url('" + bgImgs[currentImg] + "')";
}
setInterval(changeBackground, 2000);

这段JavaScript代码将会每2秒钟切换一次背景图片，当所有图片切换完之后，再从第一张图片开始循环切换。

使用以上代码，就可以实现一个简单但炫酷的背景图片切换效果了。