css动画轮播有空档期
时间: 2024-02-20 20:54:01 浏览: 22
CSS动画轮播可以通过使用关键帧动画和过渡效果来实现。以下是一个示例代码,展示了如何创建一个简单的CSS动画轮播:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.slideshow {
width: 100%;
height: 300px;
overflow: hidden;
}
.slide {
width: 100%;
height: 300px;
position: relative;
animation: slide 5s infinite;
}
@keyframes slide {
0% {
left: 0;
}
20% {
left: -100%;
}
40% {
left: -200%;
}
60% {
left: -300%;
}
80% {
left: -200%;
}
100% {
left: -100%;
}
}
.slide img {
width: 100%;
height: 300px;
object-fit: cover;
}
</style>
</head>
<body>
<div class="slideshow">
<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>
</body>
</html>
```
这段代码创建了一个宽度为100%、高度为300px的轮播容器。每个轮播项都是一个宽度为100%、高度为300px的绝对定位元素,并且应用了名为"slide"的动画,持续时间为5秒,无限循环播放。通过关键帧动画的百分比来控制每个轮播项的位置,从而实现轮播效果。