使用 animation 动画实现一个简单的幻灯片效果
时间: 2023-12-04 22:13:58 浏览: 30
好的,以下是实现幻灯片效果的示例代码:
HTML 代码:
```html
<div class="slideshow">
<img src="image1.jpg" alt="image1">
<img src="image2.jpg" alt="image2">
<img src="image3.jpg" alt="image3">
</div>
```
CSS 代码:
```css
.slideshow {
position: relative;
height: 400px;
width: 600px;
margin: 0 auto;
}
.slideshow img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slideshow img:first-child {
opacity: 1;
}
@keyframes slideshow {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
25% {
opacity: 1;
}
45% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.slideshow img:nth-child(2) {
animation-delay: 5s;
animation-name: slideshow;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.slideshow img:nth-child(3) {
animation-delay: 10s;
animation-name: slideshow;
animation-duration: 15s;
animation-iteration-count: infinite;
}
```
在上面的代码中,我们创建了一个 `.slideshow` 容器,其中包含了三个 `img` 元素,分别是三张图片。我们使用了 `position: absolute` 来将图片定位在容器的左上角,同时使用 `opacity` 来设置图片的透明度,初始值为 0。然后,我们使用了 `transition` 属性来设置图片的渐变动画。接着,我们使用了 `@keyframes` 规则来定义幻灯片动画的关键帧。最后,我们使用了 `animation` 属性来指定图片的动画名称、动画时长、动画延迟和动画次数。
在这个示例中,我们使用了三张图片来创建幻灯片效果,并设置了第二张图片和第三张图片的动画延迟时间,以实现图片轮播的效果。你可以根据需要调整动画效果和图片数量来实现不同的幻灯片效果。