我正在尝试使文本从网站的一侧滑动到另一侧，然后消失

Question

我正在尝试制作一个网站，显示一些从右到左的文本。
我试图做的一个很好的例子是这个网站的背景 realtimebitcoin.info。
我不太确定从哪里开始。
任何建议将不胜感激。

谢谢，
丹尼尔

Answer 1

您可能会想使用选框标签，它将以您希望的方式为您的文本设置动画。但是，该标记已弃用，可能会在不同的浏览器中产生意外的结果。这是一个JSFiddle.HTML

<span>Hello World</span>

.CSS

span {
  display: inline-block;
  position: relative;
  animation: marquee 3s infinite;
}
@keyframes marquee {
  0% {left: 500px}
  50% {left: 200px}
  100% {left: -100px}
}

使用动画关键帧以获得您想要的精确滚动效果。

Answer 2

.animated {
  position:relative;
  animation: animate 2s infinite;
}
@keyframes animate{
  0% {left: 100%}
  100% {left: 0%}
}

<div class="animated">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem sapiente quisquam optio iusto consectetur recusandae voluptatibus quis mollitia dolore vitae perspiciatis, doloribus cumque, incidunt corporis, labore veritatis asperiores aliquid animi.</div>