Question

我有一个CSS选框，它运行良好，但不是100％顺利。我可以编辑下面的代码以更顺畅地运行吗？

我尝试过不同的动画：marquee Xs线性无限速度，但没有运气。

<style>
/* Make it a marquee */
.marquee {
width: 100%;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
background-color: #000000;
bottom: 0px;
}

.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee 15s linear infinite;
background-color: #000000;
color: white;
bottom: 0px;
}

/* Make it move */
@keyframes marquee {
0%   { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}

/* Make it pretty */
.scroll {
padding-left: 1.5em;
position: fixed;
font: 50px 'Verdana';
bottom: 0px;
left: 0px;
height: 10%;
}
</style>

HTML

<p class="scroll marquee"><span id="scrolltext"></span></p>

Answer 1

这是因为在动画中设置了很长时间。你需要改变时间让它更顺畅。但它也取决于字幕的宽度。我建议您使用javascript来执行此操作。

如果你设置它应该在10秒内骑行例如200px它不能平滑，因为有一个小的帧速率：JS中的D你可以在选框宽度上独立设置速度

Answer 2

添加id =＆＃34; marquee＆＃34;你的跨度。从css中删除动画行，并在代码末尾添加此javascript：

var marqueePosition = 0;
var speed = 10; //smaller number means faster movement
var e = document.getElementById('marquee');
function moveMarquee() {
    marqueePosition--;
    if(marqueePosition < (-1*e.offsetWidth)) marqueePosition = 0;
    e.style["-webkit-transform"] = "translate("+marqueePosition+"px, 0px)";
    e.style["-moz-transform"] = "translate("+marqueePosition+"px, 0px)";
    e.style["-ms-transform"] = "translate("+marqueePosition+"px, 0px)";
    e.style["-o-transform"] = "translate("+marqueePosition+"px, 0px)";
    e.style["transform"] = "translate("+marqueePosition+"px, 0px)";
    window.setTimeout(function() {
        requestAnimationFrame(moveMarquee);
    }, speed);
}
moveMarquee();

光滑的css选框

2 个答案: