网页图片滚动效果代码
时间: 2023-07-10 13:14:39 浏览: 44
以下是一个简单的网页图片滚动效果的代码示例,你可以在其中添加自己的图片和样式来实现你想要的效果:
HTML代码:
```html
<div class="slider">
<div class="slider-wrapper">
<img src="https://picsum.photos/200/300" alt="">
<img src="https://picsum.photos/200/300" alt="">
<img src="https://picsum.photos/200/300" alt="">
<img src="https://picsum.photos/200/300" alt="">
</div>
</div>
```
CSS代码:
```css
.slider {
overflow: hidden;
width: 100%;
height: 300px;
}
.slider-wrapper {
display: flex;
width: 400%;
animation: slide 10s infinite;
}
.slider-wrapper img {
width: 25%;
}
@keyframes slide {
0% {
transform: translateX(0%);
}
20% {
transform: translateX(0%);
}
25% {
transform: translateX(-25%);
}
45% {
transform: translateX(-25%);
}
50% {
transform: translateX(-50%);
}
70% {
transform: translateX(-50%);
}
75% {
transform: translateX(-75%);
}
95% {
transform: translateX(-75%);
}
100% {
transform: translateX(0%);
}
}
```
在上面的代码中,我们创建了一个名为“slider”的容器,设置了它的宽度和高度,并将其溢出设置为隐藏。在该容器中,我们创建了一个名为“slider-wrapper”的div,其中包含了几个图片。这个div使用了Flexbox布局,将其中的图片横向排列,并设置了宽度为400%。然后,我们使用CSS动画,将整个div向左移动,从而实现了图片滚动的效果。
你可以根据自己的需要调整代码中的样式和动画效果,来实现自己想要的滚动效果。