用 @keyframes完成图片切换

开发工具与关键技术：DW 前端
作者：唐俊祥
撰写时间：2019.1.19

首先给一个div标签设置一个盒子。

怎样用@keyframes来实现图片切换
如下截图

使用（关键帧）百分比来规定变化发生的时间，如截图中0%、20%、40%、60%、80%时改变背景颜色，然后到100%完成时再次改变；所以我们可以把背景颜色改为背景图片，放六张各不 相同的图片作为背景，再设置（animation-duration: 12s;）12秒完成六张背景图切换，每两秒钟改变一张背景图片，这样就可以实现类似js轮播的效果。
六张图片切换 如下截图：