两张图片淡入淡出纯css
时间: 2023-07-25 20:38:34 浏览: 69
可以使用CSS的`@keyframes`和`opacity`属性来实现两张图片的淡入淡出效果。以下是一个简单的例子:
HTML代码:
```
<div class="image-container">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
</div>
```
CSS代码:
```
.image-container {
position: relative;
}
.image-container img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.image-container img:first-child {
opacity: 1;
}
@keyframes fade-in-out {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.image-container img:first-child + img {
animation: fade-in-out 4s infinite;
}
```
解释一下上述代码:
1. `.image-container`是一个相对定位的容器,用于定位两张图片。
2. `.image-container img`是两张图片的样式,它们的位置都是绝对定位,初始时opacity为0,表示不可见。
3. `.image-container img:first-child`的样式表示第一张图片初始时opacity为1,表示可见。
4. `@keyframes fade-in-out`定义了一个淡入淡出的动画,持续时间为4秒,循环次数为无限循环。
5. `.image-container img:first-child + img`选择器表示第二张图片,通过`animation`属性将淡入淡出动画应用于它。
这样,第二张图片就会在第一张图片后面淡入淡出,从而实现了两张图片的淡入淡出效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)