Question

所以我知道marquee动画就像1999年的sooo，但我真的需要为我的项目滚动文本。

基本上，我有一个文本应该一直滚动浏览器窗口（视口？）并一直向下和离开屏幕，然后在开始时重新开始。一个简单的选框。但是，当我加载页面时，文本仅滚动页面的一部分，然后重置到开头而不完成滚动。

这是我的代码（链接文本来自我遇到的早期问题，但已经解决了。）

a {
	margin: auto;
    text-decoration: none;
	-webkit-animation: marquee 10s linear infinite;
	}

@-webkit-keyframes marquee {
	0% { -webkit-transform: translateX(1500px) }
	100% { -webkit-transform: translateX(-500px) }
	}

<!DOCTYPE html>
<html>
<head>
</head>

<body>
		<a href="www.nytimes.com">It looks like each element is running into the next because they are all separate objects and each one subtracts 
a certain amount of space from the total width, causing the others behind it to move faster.</a>
	
</body>
</html>

我已经尝试过更改元素的定位属性和动画持续时间，但是似乎没有什么能给我一些我非常渴望得到的结果？

Answer 1

您可以使用vw，这是视口宽度。这是一个百分比，但您不添加百分号。因此100vw是视口宽度的100％。然后，您可以从100％到-100％选取框以从右向左移动文本。 100vw表示文本在右侧屏幕外部开始。 -100vw表示文本移动直到它离开左侧，假设标签本身（最多）是屏幕的宽度（最多100vw）。

动画的结束值应该是元素宽度的负值。例如，如果您的标记宽度为200px，则动画的起始值仍应为100vw，但结束值应为-200px。

a {
  margin: auto;
  text-decoration: none;
  -webkit-animation: marquee 10s linear infinite;
}
@-webkit-keyframes marquee {
  0% {
    -webkit-transform: translateX(100vw)
  }
  100% {
    -webkit-transform: translateX(-100vw)
  }
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <a href="www.nytimes.com">It looks like each element is running into the next because they are all separate objects and each one subtracts 
a certain amount of space from the total width, causing the others behind it to move faster.</a>

</body>

</html>

PS。在上线之前，不要忘记为其他供应商添加前缀。

为什么我的CSS3 Marquee动画重启？

1 个答案: