css 动画文本以使其滚动

cvxl0en2 于 2023-02-01 发布在其他

关注(0)|答案(2)|浏览(133)

在我的页面的顶部，我想有一些文字滚动从左到右，作为一个通知。我听说过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>

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

css

来源：https://stackoverflow.com/questions/75291198/animate-text-to-make-it-scroll

2条答案

按热度按时间

trnvg8h31#

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

p {
  animation: example linear 5s infinite;
}

@keyframes example {
  from {
    transform: translateX(-40%);
  }
  to { 
    transform: translateX(100%);
  }
}

<p>This is an announcement</p>

赞(0）回复(0）举报 2023-02-01

ryevplcw2#

目前，你的动画每13秒重启一次，暂停一下，然后重新开始。在你的动画中，文本的移动是不一致的，它开始移动得很快，当它结束时，它会变慢。
一个解决方案是使用<marquee>标签。这个标签是专门为滚动文本而设计的！例如，这段代码会自动执行你的代码所做的任何事情，但更好，代码行更少：

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

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

赞(0）回复(0）举报 2023-02-01

我来回答

css 动画文本以使其滚动

2条答案

相关问题

热门标签

最新问答