不用js只用css制作简单的轮播图特效
先确定选用几张图，在此我选择了4张图。
然后为了让4张图都在同一位置上依次显示，需要将4张图的位置重叠，即定义一个绝对位置：“ position: absolute; ”，然后要设置透明度，初始透明度设为完全透明：“ opacity: 0; ”。
然后设置动画属性： “ animation: imgs 8s Infinite; ”：
- imgs
“ imgs ”是我起的一个选择器名称，属于animation-name 属性，该属性为@keyframes 动画指定名称；
- 8s
8s是设置的播放时间，属于animation-duration属性，该属性定义动画完成一个周期需要多少秒或毫秒；
- infinite
infinite是循环播放，属于animation-iteration-count属性，该属性定义动画应该播放多少次。
然后用@keyframes规则选择自己定义的选择器名称，对该选择器进行动画显示消失设定：
@keyframes imgs {
0%{opacity:1} //在8s达到0%时显示
25%{opacity:1} //直到8s达到25%时仍显示
26%{opacity:0} //在8s达到26%时图片透明，即消失
}
因为设置了4张图片，而每张图片若不设置消失时间就会一直循环显示，那么第一张在显示8s后会继续循环显示，和第二张图片的显示重叠，第三张和第一、二张重叠······因此我们需要在8s里每一张图片只能显示2s，2s在8s里占25%，即我们让图片在前25%里保持透明度为0（即不透明），然后剩余时间保持透明度为1（即完全透明）。
而且为了让第一张图片显示前2s，第二张图片显示第3 ~ 4s，第三张图片显示5 ~ 6s，以此类推，我们需要延迟图片开始显示时间：
img:nth-child(0){animation-delay: 0s}
img:nth-child(1){animation-delay: 2s}
img:nth-child(2){animation-delay: 4s}
img:nth-child(3){animation-delay: 6s}
第一张图片没有延迟时间，第二张图片在2s后才开始显示，然后依次类推。
总的代码如下：
......
<style>
img {
position: absolute;
opacity: 0;
animation: imgs 8s Infinite;
//可以自定义设置高度、宽度等其它属性
}
@keyframes imgs {
0%{opacity:1}
25%{opacity:1}
26%{opacity:0}
}
img:nth-child(0){animation-delay: 0s}
img:nth-child(1){animation-delay: 2s}
img:nth-child(2){animation-delay: 4s}
img:nth-child(3){animation-delay: 6s}
</style>
......
<body>
<div>
<img src="./img1.jpg" alt="抱歉图片迷路了....o(╥﹏╥)o.... 请重新加载">
<img src="./img2.jpg" alt="抱歉图片迷路了....o(╥﹏╥)o.... 请重新加载">
<img src="./img3.jpg" alt="抱歉图片迷路了....o(╥﹏╥)o.... 请重新加载">
<img src="./img4.jpg" alt="抱歉图片迷路了....o(╥﹏╥)o.... 请重新加载">
</div>
......
</body>
