废话不多说先上图:
说一说原理吧
让五张图片向左浮动展示。所以只需要左移ul的left值即可。使用animation,每隔几秒切换一下left的位置。
然后给动画加上重复播放 ,实现循环播放。
美中不足就是没有小白点
因为刚刚学习了3个月
还是小白还有好多不懂得东西
HTML部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯css轮播图</title>
<!-- 导入css样式 -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--主体部分 -->
<div class="main">
<ul>
<li>
<a href="#"> <img src="img/img-1.jpg" alt=""></a>
</li>
<li>
<a href="#"> <img src="img/img-2.jpg" alt=""></a>
</li>
<li>
<a href="#"> <img src="img/img-3.jpg" alt=""></a>
</li>
<li>
<a href="#"> <img src="img/img-4.jpg" alt=""></a>
</li>
<li>
<a href="#"> <img src="img/img-5.jpg" alt=""></a>
</li>
</ul>
</div>
</body>
</html>
CSS部分:
* {
margin: 0;
padding: 0;
}
/* 清除li样式 */
li {
list-style: none;
}
/* 创建动画 */
@keyframes dh {
0%,
20% {
margin-left: 0px;
}
25%,
40% {
margin-left: -1200px;
}
45%,
60% {
margin-left: -2400px;
}
65%,
80% {
margin-left: -3600px;
}
85%,
100% {
margin-left: -4800px;
}
}
.main {
margin: 100px auto;
width: 1200px;
height: 375px;
/* 超出部分隐藏 */
overflow: hidden;
/* 边框圆角 */
border-radius: 20px;
}
ul {
width: 6000px;
animation: dh 10s linear infinite;
}
ul li {
float: left;
}