自定义动画实现无缝轮播的源码
时间: 2024-04-14 14:26:55 浏览: 12
以下是一个使用自定义动画实现无缝轮播的源码示例:
HTML:
```html
<div class="carousel">
<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>
```
CSS:
```css
.carousel {
display: flex;
overflow: hidden;
width: 100%;
}
.slide {
flex: 0 0 100%;
animation: slideAnimation 10s infinite;
}
img {
width: 100%;
}
@keyframes slideAnimation {
0% {
transform: translateX(0);
}
20% {
transform: translateX(0);
}
25% {
transform: translateX(-100%);
}
45% {
transform: translateX(-100%);
}
50% {
transform: translateX(-200%);
}
70% {
transform: translateX(-200%);
}
75% {
transform: translateX(-300%);
}
95% {
transform: translateX(-300%);
}
100% {
transform: translateX(-400%);
}
}
```
在这个示例中,我们仍然使用了一个容器 `.carousel` 和每个 `.slide` 包含一个图片的结构。不同之处在于我们自定义了动画 `slideAnimation` 的关键帧,以实现无缝轮播的效果。我们将容器 `.carousel` 设置为 `display: flex` 来实现横向排列,使用 `overflow: hidden` 来隐藏超出容器的部分。
关键帧的设定如下:
- 0%: 初始状态,图片位于容器最左侧
- 20%: 维持初始状态
- 25%: 图片向左平移一个容器宽度
- 45%: 维持平移状态
- 50%: 图片再次向左平移一个容器宽度
- 70%: 维持平移状态
- 75%: 图片再次向左平移一个容器宽度
- 95%: 维持平移状态
- 100%: 图片向左平移一个容器宽度,回到初始位置
我们将动画应用于每个 `.slide` 上,并设置为无限循环播放。
这只是一个示例,你可以根据需要调整关键帧和动画的细节。