我正在尝试制作一个具有水平子级并从左向右移动的容器
这些子元素中的每一个,当它到达容器的末尾时 => 到达容器的开头
让我们想象它包含 4 个孩子:
0% : ..1 | 2 | 3 | 4..
25% : ..4 | 1 | 2 | 3..
50% : ..3 | 4 | 1 | 2..
75% : ..2 | 3 | 4 | 1..
100% : ..1 | 2 | 3 | 4..
不像旋转木马,而是像圆环滚动(光滑)
无限时间
下
.container {
height: 200px;
width: 800px;
border: 1px solid #333;
overflow: hidden;
margin: 25px auto;
}
.box {
background: orange;
height: 180px;
margin: 10px;
animation-name: move;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: right;
animation-timing-function: linear;
display: flex;
}
.card {
background: #fff;
height: 150px;
min-width: 100px;
margin: 15px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.box:hover {
animation-play-state: paused;
}
@keyframes move {
0% {
margin-left: 000px;
}
25% {
margin-left: 100px;
}
50% {
margin-left: 200px;
}
75% {
margin-left: 300px;
}
100% {
margin-left: 400px;
}
}
<div class="container">
<div class="box">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
是我尝试过的代码:
可以使用 JavaScript 、Bootstrap、tailwind CSS。
检查一下并告诉我这是否有效:)
.container {
height: 200px;
width: 500px;
border: 1px solid #333;
overflow: hidden;
margin: 25px auto;
background: orange;
}
.box {
display: flex;
height: 180px;
position: relative;
animation-name: move;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: right;
animation-timing-function: cubic-bezier(1,2,3,1); //linear
}
.card {
background: #fff;
height: 150px;
min-width: 100px;
margin: 15px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.box:hover {
animation-play-state: paused;
}
@keyframes move {
0% {
left: -515px;
}
100% {
left: 0px;
}
}
<div class="container">
<div class="box">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>