css3 两张背景图切换 |dom改变css

首先，需要在CSS中指定两张背景图。代码如下：

.bg{
background-image: url('first-bg.jpg'), url('second-bg.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

这段代码中，大家使用了background-image属性来设置两张背景图，即’first-bg.jpg’和’second-bg.jpg’。大家还使用了background-position来指定背景图在容器中的位置为居中。background-repeat属性值为no-repeat，表示不重复显示背景图。而background-size为cover，表示铺满整个容器。

接下来，大家使用CSS3中的Animation来实现切换效果。代码如下：

@keyframes bg-switch{
0%{
background-image: url('first-bg.jpg'), url('second-bg.jpg');
}
50%{
background-image: url('second-bg.jpg'), url('first-bg.jpg');
}
100%{
background-image: url('first-bg.jpg'), url('second-bg.jpg');
}
}
.bg{
animation: bg-switch 5s infinite;
}

首先定义了一个名为bg-switch的动画，其中0%表示起始状态，50%表示中间状态，100%表示结束状态。在这个动画中，大家将两个背景图的顺序在50%的时候交换。开启无限循环。最后，在bg类上应用动画。

这样，大家就成功地实现了两张背景图的切换效果。此外，大家还可以通过调整Animation中的参数，比如延时、速度等，来定制化动画效果。