动画文本使其滚动

Question

在我的页面顶部，我希望有一些文本从左向右滚动，作为公告。 之前听说过CSS动画，但是不知道怎么制作。 到目前为止，这就是我所拥有的。

 p { position: relative; animation-name: example; animation-duration: 13s; animation-iteration-count: infinite; } @keyframes example { 0% {left:-200px; top:0px;} 50% {left:700px; top:0px;} }

 <p>This is an announcement</p>

我想知道是否有更简单的方法来制作滚动 animation。我不知道 JavaScript，但是有没有办法在 JavaScript 或 CSS 中制作这个 animation？

Answer 1

您可以将translateX与transform属性一起使用。

 p { animation: example linear 5s infinite; } @keyframes example { from { transform: translateX(-40%); } to { transform: translateX(100%); } }

 <p>This is an announcement</p>

Answer 2

所以目前，你的 animation 每 13 秒重启一次，暂停然后重新开始。 在您的 animation 中，文本移动不一致，开始移动很快，结束时移动更慢。

一种解决方案是使用<marquee>标记。 此标签专为滚动文本而设计，例如，此代码将自动执行您的代码所做的任何事情：但更好，更少的代码行：

 <.DOCTYPE html> <html> <body> <marquee direction="right" >This is a paragraph.</marquee> </body> </html>

还有很多属性可以改变，包括方向、速度、高度、循环、宽度等。你可以根据自己的喜好改变这些属性，使滚动的文字更好看。

动画文本使其滚动

问题描述

2 个解决方案

解决方案1
2 2023-01-30 23:28:07

解决方案2
0 已采纳 2023-01-30 23:26:32

动画文本使其滚动

问题描述

2 个解决方案

解决方案1 2 2023-01-30 23:28:07

解决方案2 0 已采纳 2023-01-30 23:26:32

解决方案1
2 2023-01-30 23:28:07

解决方案2
0 已采纳 2023-01-30 23:26:32