使用css3实现简单的轮播图

利用css3做简单的轮播图

轮播图广泛出现在购物等网站上，下面我们利用css3做简单的轮播图。

看效果

HTML代码

"container">

"images">
"gtr.jpg">
"evo.jpg">
"sti.jpg">

css代码

.container{
width: 500px;
height: 350px;
margin: 20vh auto 0;
overflow: hidden; /*溢出隐藏，让不在div的图片先隐藏 */
}
.images{
width: 1500px; /*此宽度为：图片的的宽度 * 图片的数量 */
height: 350px;
animation: move 10s infinite;
}
/* 设置图片的宽度和高度和外层div一样的宽高 */
img{
width: 500px;
height: 350px;
float: left;
}
@keyframes move{
0%,25%{
margin-left: 0px;
}
35%,70%{
margin-left: -500px;
}
80%,100%{
margin-left: -1000px;
}
}


本文地址：https://blog.csdn.net/weixin_48165407/article/details/107497938