利用css制作简单的轮播图

不用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后才开始显示，然后依次类推。
总的代码如下：

......

  ......
  
  

  
  
  
  
  
  ......