html五张平行图片滚动
时间: 2023-12-25 11:29:39 浏览: 26
以下是一个实现HTML五张平行图片滚动的示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
}
.container img {
width: 20%;
height: auto;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.container img.active {
opacity: 1;
}
@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%);
}
}
.container img:nth-child(1) {
animation: slide 20s infinite;
}
.container img:nth-child(2) {
animation: slide 20s infinite 5s;
}
.container img:nth-child(3) {
animation: slide 20s infinite 10s;
}
.container img:nth-child(4) {
animation: slide 20s infinite 15s;
}
.container img:nth-child(5) {
animation: slide 20s infinite 20s;
}
</style>
</head>
<body>
<div class="container">
<img src="image1.jpg" class="active">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
<img src="image5.jpg">
</div>
</body>
</html>
```
这个示例中,我们使用了CSS的动画和过渡效果来实现图片的滚动。通过设置不同的动画延迟时间,使得每张图片在不同的时间点开始滚动,从而实现平行滚动的效果。同时,通过设置透明度的过渡效果,使得当前可视的图片逐渐变得清晰,其他图片逐渐变得模糊。
请注意,你需要将示例中的`image1.jpg`、`image2.jpg`等图片路径替换为你自己的图片路径。