html - 如何加长滚动效果中允许的文字？

Question

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

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 参数是什么。

这是代码。您可以将上述 block 复制并粘贴到 <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