如何延长滚动效果中允许的文本？

Question

这是我网站上的一个页面。 http://teleportcorp.com/management.html注意文本如何被截断并且滚动动画重置。有人可以帮我识别一下css参数，这个参数允许我添加像这样的文本块而不会被切断吗？

Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found in the original.

我不确定css参数是做什么的。

这是代码。您可以在<p class="marquee"></p>标签之间复制并粘贴上面的块。谢谢。

https://codepen.io/jonathansampson/pen/rqemL

Answer 1

它被称为选框。

他们使用css @keyframes来模拟这种效果。

.marquee {
top: 6em;
position: relative;
box-sizing: border-box;
animation: marquee 15s linear infinite;
}


@keyframes marquee
0% {
top: 8em;
}

100% {
top: -11em;
}

为了更好地理解，最好在@keyframes上使用以下代码：

@keyframes marquee {
0%   { transform: translatey(100%);}
100% { transform: translatey(-100%);}
}

在这里查看一些例子： Css Marquee