对 :after 元素的背景图像进行动画处理

Animate background image of a :after element

本文关键字：动画 处理 图像 背景 after 元素      更新时间：2023-09-26

有这段代码：

#header .banner { background-color:#000; height:270px; }
#header .banner:after { content: ""; background:url(/images/header_1.jpg) center center; width:100%; min-width: 1024px; height:270px; margin: auto; display: block;}

我需要使用 javascript （jquery） 或 css3 将/images/header_1.jpg 转换为其他图像。

这可能吗？

如果您希望

图像来回交替，有几种方法可以做到这一点。最简单的方法是将setInterval与JQuery的.css功能结合使用。

var state = 0;
function start(){
    setInterval(function(){
        if(state=0){
            state = 1;
            $("header").css("background","url(/images/header_1.jpg)")
        } else {
            state = 0;
            $("header").css("background","url(/images/header_2.jpg)")
        }
    },1000);
}
start();

1000 表示更改发生之前的时间（以毫秒为单位）。

您也可以简单地将图像转换为动画 png。

相关文章：