布局：
样式：
* {
margin: 0;
padding: 0;
/background: silver;/
}
/初始化页面/
.CarouselBox {
width: 400px;
height: 300px;
margin: 100px auto;
overflow: hidden;
}
/设置放置轮播图的盒子/
li {
width: 400px;
height: 300px;
float: left;
list-style: none;
}
/对放置图片的li进行设置/
/设置动画的主要属性/
ul {
width: 1600px;
height: 600px;
animation: myani 5s 0s alternate ease infinite;
/-ms-animation: myani 10s 0s alternate ease infinite;
-moz-animation: myani 10s 0s alternate ease infinite;
-webkit-animation: myani 10s 0s alternate ease infinite;/
}
/* 对动画的关键帧进行设置*/
@keyframes myani {
0% {
margin-left: 0px;
}
50% {
margin-left: -400px;
}
100% {
margin-left: -800px;
}
}
/对动画的关键帧进行兼容处理/
@-webkit-keyframes myani {
0% {
margin-left: 0px;
}
50% {
margin-left: -400px;
}
100% {
margin-left: -800px;
}
}
@-moz-keyframes myani {
0% {
margin-left: 0px;
}
50% {
margin-left: -400px;
}
100% {
margin-left: -800px;
}
}
@-ms-keyframes myani {
0% {
margin-left: 0px;
}
50% {
margin-left: -400px;
}
100% {
margin-left: -800px;
}
}
效果：