<div class="image-container">
<img src="image1.jpg" class="active">
<img src="image2.jpg">
</div>
其中active类用来表示默认显示的图片。接下来,我们需要通过CSS来控制这两张图片的切换效果。具体实现方式如下:
.image-container {
position: relative;
width: 100%;
height: auto;
}
.image-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.image-container img.active {
opacity: 1;
}
.image-container img:last-child {
animation: image-animation 8s infinite;
-webkit-animation: image-animation 8s infinite;
}
@keyframes image-animation {
0% {
opacity: 0;
}
8% {
opacity: 1;
}
92% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes image-animation {
0% {
opacity: 0;
}
8% {
opacity: 1;
}
92% {
opacity: 1;
}
100% {
opacity: 0;
}
}
如上代码中,我们首先将整个div设为relative定位,然后将其中的图片设置为absolute定位,并且它们重合在一起,因为它们的top和left都是0。
我们用opacity控制图片透明度,然后定义了一个0.5秒的过渡效果。当active类被加到了某一张图片上时,它的opacity就会变成1,从而显示出来。
要实现图片的切换,我们给最后一张图片加上了一个animation动画,这个动画会不停地重复进行。它的执行时间是8秒,并且定义了一个keyframe,控制了不同时间点的图片透明度。这样,就能实现两张图片之间的切换了。
这就是CSS图片切换的整个实现过程。相信通过这篇文章的分享,以及上面的代码,大家可以掌握这项技能了。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。