仅使用CSS完成图片轮播
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
img{
position: absolute; /*让四张图片重叠*/
opacity: 0; /*设置透明度为0*/
animation: Lunbo 12s Infinite; /*设置动画组 Infinite为无限循环*/
}
/*动画效果*/
@keyframes Lunbo {
0%{opacity: 0}
2%{opacity: 1}
24%{opacity: 1}
25%{opacity: 0}
}
/*图片延迟*/
img:nth-child(0){animation-delay: 0s}
img:nth-child(1){animation-delay: 3s}
img:nth-child(2){animation-delay: 6s}
img:nth-child(3){animation-delay: 9s}
</style>
</head>
<body>
<div>
<img src="../image/1.jpg" alt="">
<img src="../image/2.jpg" alt="">
<img src="../image/3.jpg" alt="">
<img src="../image/4.jpg" alt="">
</div>
</body>
</html>思维
通过调节透明度的方式来实现图片轮播，图片每12秒完成一次循环，每张图片只显示3秒即0%—25%时opcity值为1（显示），其他时候值为0（隐藏)。然后设置图片延迟3s。
如图方框是显示时间 横线是隐藏时间，每张图片12秒，把他们显示的时间给错开。
来源：CSDN
作者：lo_olo_ol
链接：https://blog.csdn.net/lo_olo_ol/article/details/103585911