HTML+css轮播图效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝轮播图</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {/* 大盒子相对定位，占据原来的位置 */
position: relative;
width: 520px;
height: 280px;
overflow: hidden;
margin: 100px auto;
background: #f7f7f7;
}
img {
width: 520px;
height: 280px;
}
.taobao {
width: 520px;
animation: 15s RBT infinite;
animation-delay: 3s;
background: linear-gradient(blue, red);
}
.taobao li{ width: 100%; height: 280px;}
@keyframes RBT {
/* 初始状态为0 时 不移动 */
0% {
transform: translateY(0px);
}/* 动画时间过去10%时 就得移动一张图片的距离 , 10*10%=1 表示一秒钟 移动了一张图片的距离 */
10%{
transform: translateY(0px); /*停留*/
}
20% {
transform: translateY(-280px);
}/* 10*20%=2 表示到第二秒的时候图片不移动 停留了一秒钟 */
30% {
transform: translateY(-280px);
}
40% {
transform: translateY(-560px);
}
50%{
transform: translateY(-560px);
}
60% {
transform: translateY(-840px);
}
70%{
transform: translateY(-840px);
}
80% {
transform: translateY(-1120px);
}
90%{
transform: translateY(-1120px);
}
100% {
transform: translateY(0px);
}
}
</style>
</head>
<body>
<div class="box">
<ul class="taobao">
<li>111111</li>
<li>222222</li>
<li>333333</li>
<li>444444</li>
<li>555555</li>
<!-- 图片
<img src="https://img-blog.csdnimg.cn/2a5e2fbd71b34848a84df128dcb09c59.png" alt="">
<img src="https://img-blog.csdnimg.cn/0eadf560ab5649639d976ee76b5ad6d8.png" alt="">
<img src="https://img-blog.csdnimg.cn/5aacb76a5d464dad8a4367fd17133fd9.png" alt="">
<img src="https://img-blog.csdnimg.cn/4c4095b8a9984e42a29e4d77bad18e9d.png" alt="">
<!--<img src="https://img-blog.csdnimg.cn/5b85696684d845bb9d1b31df80949f38.png" alt="">
<img src="https://img-blog.csdnimg.cn/ca11ec5b27a14cb28eafff7da39521bf.png" alt="">
<!-- 末尾添加与第一张图一样的图片，阻止动画播放完时图片闪动 达到无缝滚动的功能
<img src="https://www.xqppt.com/uploads/admin/slide_thumb/20201023/f90bb43c6cd5036f5c0cad545caaeb52.png" alt="">
-->
</ul>
</div>
</body>
</html>
