css写一个四张图片滚动效果
时间: 2023-11-14 11:20:37 浏览: 36
可以使用CSS的animation和keyframes属性来实现四张图片滚动效果。代码如下:
HTML部分:
```html
<div class="slider">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
</div>
```
CSS部分:
```css
.slider {
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
.slider img {
width: 25%;
height: 300px;
float: left;
}
.slider img:nth-child(1) {
animation: slide 12s infinite;
}
.slider img:nth-child(2) {
animation: slide 12s infinite 3s;
}
.slider img:nth-child(3) {
animation: slide 12s infinite 6s;
}
.slider img:nth-child(4) {
animation: slide 12s infinite 9s;
}
@keyframes slide {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-25%);
}
50% {
transform: translateX(-50%);
}
75% {
transform: translateX(-75%);
}
100% {
transform: translateX(0);
}
}
```
这段代码实现的功能是,将四张图片分别设置为相邻的四个元素,其中第一张图片使用animation属性和keyframes属性来实现12秒钟的无限循环滚动效果,第二张图片在第3秒开始滚动,第三张图片在第6秒开始滚动,第四张图片在第9秒开始滚动,实现四张图片的循环滚动效果。