div css 轮播图
时间: 2023-07-27 21:08:54 浏览: 39
以下是一个简单的 CSS 轮播图实现:
HTML 代码:
```
<div class="slider">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
</div>
```
CSS 代码:
```
.slider {
width: 500px;
height: 300px;
overflow: hidden;
}
.slide {
width: 500px;
height: 300px;
float: left;
transition: all 0.5s ease;
}
.slide1 {
background-image: url(slide1.jpg);
}
.slide2 {
background-image: url(slide2.jpg);
}
.slide3 {
background-image: url(slide3.jpg);
}
.slider:hover .slide {
transform: scale(1.1);
}
@keyframes carousel {
0% {
transform: translateX(0);
}
33.33% {
transform: translateX(-100%);
}
66.66% {
transform: translateX(-200%);
}
100% {
transform: translateX(0);
}
}
.slider > .slide {
animation: carousel 10s infinite;
}
```
在这个示例中,我们使用了一个具有三个子项的 `.slider` 容器,每个子项都有一个类名为 `.slide`,并且具有不同的背景图像。我们使用 `overflow: hidden` 隐藏了超出容器视口的部分。
使用 `float: left` 让每个 `.slide` 元素水平排列。我们定义了一个 CSS 动画 `carousel`,它将整个轮播图向左移动,并且在结束时重新开始。最后,我们将此动画应用于每个 `.slide` 元素,并在 `.slider:hover` 时缩放每个 `.slide` 元素。