css图片切换动画效果
时间: 2023-11-17 19:03:57 浏览: 41
以下是两种常见的CSS图片切换动画效果:
1. 使用CSS3动画实现图片切换
```html
<div class="image-container">
<img src="image1.jpg" class="active">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
```
```css
.image-container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.image-container img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.image-container img.active {
opacity: 1;
}
@keyframes image-fade {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.image-container img:nth-child(1) {
animation: image-fade 6s infinite;
}
.image-container img:nth-child(2) {
animation: image-fade 6s infinite 2s;
}
.image-container img:nth-child(3) {
animation: image-fade 6s infinite 4s;
}
```
2. 使用CSS3过渡实现图片切换
```html
<div class="image-container">
<img src="image1.jpg" class="active">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
```
```css
.image-container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.image-container img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.image-container img.active {
opacity: 1;
}
.image-container:hover img {
opacity: 0;
}
.image-container:hover img.active + img {
opacity: 1;
transition-delay: 1s;
}
.image-container:hover img:last-child {
opacity: 1;
transition-delay: 1s;
}
```