html css背景图片自动轮播
时间: 2023-12-25 10:04:36 浏览: 50
以下是一个使用HTML和CSS实现背景图片自动轮播的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>Background Image Slideshow</title>
<style>
body {
background: url("image1.jpg") center 0 no-repeat;
background-size: cover;
animation: slideshow 10s infinite;
}
@keyframes slideshow {
0% {
background-image: url("image1.jpg");
}
25% {
background-image: url("image2.jpg");
}
50% {
background-image: url("image3.jpg");
}
75% {
background-image: url("image4.jpg");
}
100% {
background-image: url("image1.jpg");
}
}
</style>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
```
这个例子中,我们使用了CSS3的动画特性来实现背景图片的自动轮播。我们首先设置了body元素的背景图片为第一张图片,并将其居中不平铺。然后,我们定义了一个名为slideshow的动画,它会在10秒钟内循环播放。在动画中,我们通过改变background-image属性来切换背景图片,从而实现了自动轮播的效果。