我有从YouTube教程修改的客户端徽标滑块以下代码.虽然动画是无限的,但它首先运行徽标的一个实例,然后停止,并从头开始.预期的结果是源源不断的标识流,没有中断.我不确定哪里出了问题.
.slider-area h2 {
text-align: center;
font-size: 60px;
font-weight: 500;
letter-spacing: 2px;
margin: 100px 0 30px 0;
color: rgb(0, 0, 0);
}
.wrapper {
width: 800px;
margin: 0 auto;
display: flex;
overflow: hidden;
}
.item {
animation: animate 10s linear infinite;
padding: 20px;
}
@keyframes animate {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-800px, 0, 0);
}
}
@media (max-width:767px) {}
<div class="slider-area">
<h2>My Tools</h2>
<div class="wrapper">
<div class="item"><img alt="" src="https://i.stack.imgur.com/EKRTj.jpg"></div>
<div class="item"><img alt="" src="https://i.stack.imgur.com/EKRTj.jpg"></div>
<div class="item"><img alt="" src="https://i.stack.imgur.com/EKRTj.jpg"></div>
<div class="item"><img alt="" src="https://i.stack.imgur.com/EKRTj.jpg"></div>
<div class="item"><img alt="" src="https://i.stack.imgur.com/EKRTj.jpg"></div>
<div class="item"><img alt="" src="https://i.stack.imgur.com/EKRTj.jpg"></div>
</div>
</div>
任何帮助都是最好的.谢谢