html轮播图自动切换css

下面是一个HTML轮播图自动切换的CSS实现方法：

/*定义轮播图实现效果的动画*/
/*lunbo:所定义动画名称*/
@keyframes lunbo {
0%, 20%{ transform: translate(0px, 0px); }
25% , 45%{ transform: translate(-500px, 0px); }
50% , 70%{ transform: translate(-1000px, 0px); }
75% , 95%{ transform: translate(-1500px, 0px); }
100% { transform: translate(-2000px, 0px); }
}

/*设置父级盒子宽度和高度，并设置在该div块中的内容超出宽高后自动隐藏*/
.father{
width: 500px;
height: 300px;
overflow: hidden;
}

/*设置子级盒子宽度，宽度为5个图片的总和*/
.son{
width: 2500px;
}

/*设置图片宽高，以及将图片进行浮动，让图片之间紧贴着*/
img {
width: 500px;
height: 300px;
float: left;
/* 使用上面定义的轮播图效果动画。 值分别是：动画名称 动画执行实现 运动曲线(lineae:匀速) infinite：循环滚动 */
animation: lunbo 10s linear infinite ;
}

其中，@keyframes定义了一个名为lunbo的动画，通过transform属性实现图片的平移。父级盒子.father设置了宽度和高度，并将内容超出部分隐藏。子级盒子.son设置了宽度为5个图片的总和。图片img设置了宽度、高度和浮动，并通过animation属性引用了定义的动画lunbo，实现了轮播图的自动切换效果。