css五张平行图片滚动
时间: 2024-01-04 13:19:16 浏览: 62
以下是一个使用CSS实现五张平行图片滚动的示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 100%;
overflow: hidden;
}
.slider {
display: flex;
animation: slide 10s infinite;
}
.slide {
flex: 0 0 20%;
margin-right: 20px;
}
@keyframes slide {
0% { transform: translateX(0); }
20% { transform: translateX(-20%); }
40% { transform: translateX(-40%); }
60% { transform: translateX(-60%); }
80% { transform: translateX(-80%); }
100% { transform: translateX(-100%); }
}
</style>
</head>
<body>
<div class="container">
<div class="slider">
<div class="slide">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="slide">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="slide">
<img src="image3.jpg" alt="Image 3">
</div>
<div class="slide">
<img src="image4.jpg" alt="Image 4">
</div>
<div class="slide">
<img src="image5.jpg" alt="Image 5">
</div>
</div>
</div>
</body>
</html>
```
这个示例中,我们使用了flex布局和CSS动画来实现图片的滚动效果。通过设置容器的宽度和隐藏溢出部分,我们创建了一个可视区域。然后,我们使用flex布局将图片放置在一个水平的滑动容器中。通过设置动画的关键帧,我们实现了图片的平行滚动效果。