我的这段代码有问题。 我想通过连续动画对这些文字应用选取框效果。 在我的结果中,在100%关键帧处,动画返回到0,效果很糟糕! 我希望动画能够完全响应。 非常感谢你!
通过此视频,您可以看到错误 -> VIDEO
var elements = $('ul.tithome li').length;
for(var i=0;i < elements; i++){
$(".tithome").clone().prependTo( ".scorri" );
};
var liEle = [];
var liEle = $(".tithome li");
.cont{
width: 100%;
overflow: hidden;
}
.scorri{
position:relative;
display: flex;
width: 100%;
animation-name: marquee;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
justify-content: space-between;
}
.tithome{
display: contents;
}
.tithome li{
width: fit-content;
display: inline-block;
list-style: none;
padding-right: 30px;
font-size: 40px;
}
@keyframes marquee {
0% { left: 0; }
100% {left: -88.79%;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cont">
<div class="scorri">
<ul class="tithome">
<li>Governance</li>
<li>HR</li>
<li>Sales</li>
</ul>
</div>
</div>
最佳答案
您可以为 transform
属性设置动画,而不是 left
:
var elements = $('ul.tithome li').length;
for(var i=0;i < elements; i++){
$(".tithome").clone().prependTo( ".scorri" );
};
var liEle = [];
var liEle = $(".tithome li");
.cont{
width: 100%;
overflow: hidden;
}
.scorri{
position: relative;
display: flex;
width: 100%;
justify-content: space-between;
}
.tithome{
animation-name: marquee;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
flex-shrink: 0;
}
.tithome li{
width: fit-content;
display: inline-block;
list-style: none;
padding-right: 30px;
font-size: 40px;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cont">
<div class="scorri">
<ul class="tithome">
<li>Governance</li>
<li>HR</li>
<li>Sales</li>
</ul>
</div>
</div>
关于javascript - 无限跑马灯响应无间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61620687/