垂直轮播图做背景实例代码
时间: 2023-08-24 08:04:04 浏览: 42
以下是一个简单的垂直轮播图做背景的实例代码,你可以参考一下:
HTML代码:
```html
<div class="bg-container">
<ul class="bg-list">
<li><img src="img1.jpg" alt="图片1"></li>
<li><img src="img2.jpg" alt="图片2"></li>
<li><img src="img3.jpg" alt="图片3"></li>
</ul>
</div>
```
CSS代码:
```css
.bg-container {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
}
.bg-list {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
animation: bg-scroll 30s linear infinite;
}
.bg-list li {
width: 100%;
height: 100%;
display: block;
}
.bg-list li img {
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes bg-scroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
```
解释:
以上代码实现的垂直轮播图背景,使用了一个高为500px的容器作为背景容器,内部使用一个宽为100%、高为容器高度两倍的ul元素作为轮播块,同时使用CSS3动画实现了li元素的垂直滚动,动画时间为30秒,无限循环滚动。每个li元素包含一张图片,使用CSS的object-fit属性实现图片铺满整个li元素。
需要注意的是,以上代码仅为示例代码,实际应用时需要根据实际情况进行调整。