CSS：纯CSS3全屏背景图片幻灯片轮播

效果演示：

实现

主要通过css的animation-delay属性,每张图片依次延时，用动画控制透明度达到这个效果。

@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

提取源码方式

微信扫码二维码或搜索星座运势情感解读回复纯CSS3全屏背景图片幻灯片轮播即可获取提取链接