使用CSS实现轮播
大体思路
就是让竖着排列的li，横着排列，依次从左向右移动实现轮播的效果。
一个简单的小栗子。
<!DOCTYPE html>
<html>
<head>
<title>
lunbo
</title>
<style>
* {
margin: 0;
padding: 0;
}
#app {
position: relative;
margin: auto;
width: 1226px;
height: 460px;
overflow: hidden;
}
#app ul {
margin: 10px 0;
padding: 0;
}
#lunbo {
/*
lunbo 是动画的名字
5.5s 表示动画放完用的时间
linear 表示动画的速度整个过程不变
infinite 表示动画没有结束时间
*/
animation: lunbo 5.5s linear infinite;
}
#lunbo li {
float: left;/*让li门横着排好队*/
width: 1226px;
height: 460px;
list-style: none;/*把li们的点●去掉*/
}
/*创建动画lunbo*/
@keyframes lunbo {
0% {
margin-left: 0;
}
10% {
margin-left: -1226px;
}
25% {
margin-left: -1226px;
}
35% {
margin-left: -2452px;
}
50% {
margin-left: -2452px;
}
60% {
margin-left: -3678px;
}
75% {
margin-left: -3678px;
}
75.1% {
margin-left: 0px;
}
100% {
margin-left: 0px;
}
}
</style>
</head>
<body>
<div id="app">
<ul id="lunbo">
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0ef4160c861b998239bce9adb82341e7.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt=""></li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ebff5f5c1f52f2dbdd611897adbefd4.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt=""></li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9e7bd1f48d954cdf122b51ce0a8374b3.jpg?w=1226&h=920" style="height: 460px;" alt=""></li>
<li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/921811dd1557b9baa907cb828c1286af.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt=""></li>
</ul>
</div>
</body>
</html>