9393我认为你不应该移动内容，但这并没有回答你的问题……看一下CSS：
.marquee {
width: 450px;
line-height: 50px;
background-color: red;
color: white;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee p {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
这里是codepen。
编辑:
这里是自下而上的codepen。
- Thomas Bormans47非常好，但如果滚动内容中有多个div或多个P时它无法工作 :( - Radon84721回答这个关于过时的问题其实很简单：将整个内容放在一个 div 中，然后将元素放在 span 中。https://codepen.io/scwall/pen/mdemeER - Pascal de Sélys3如何使其重复而无需在最后一个和重复的第一个之间添加任何空格（最后一个后面没有空格）？ - josh如果您想要在没有空格的情况下重复，您需要通过JavaScript克隆p节点并将其附加在第一个节点之后。然后，您可以从transform: translate(0, 0)动画到transform: translate(-50%, 0)并且无需任何可见的中断即可重复（前提是两个p节点的宽度大于容器的宽度）。 - Jasper Habicht回答链接1717
- Rob33@user7892745，你的论点并不能使这个标签不再过时。 - honk31https://html.spec.whatwg.org/multipage/rendering.html#the-marquee-element-2 - BarryCap1@BarryCap 已废弃的特性 - 跑马灯 由于该元素从未成为任何HTML规范的一部分，但其使用过于广泛，因此有必要在规范中创建一个条目以将其标记为已废弃。 - Rob回答链接1616你只需要在CSS中定义类和挂载循环动画一次，然后在任何需要的地方使用它。但是，正如许多人所说 - 这是一个有点令人烦恼的做法，而且这个标签正在逐渐过时也有充分的理由。
.example1 {
height: 50px;
overflow: hidden;
position: relative;
}
.example1 h3 {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: example1 5s linear infinite;
-webkit-animation: example1 5s linear infinite;
animation: example1 5s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
Scrolling text...
- Artanis回答链接77我知道这个问题几年前就有答案了，但是当我检查这个时，我发现了以下内容。
在检查中，我发现了以下内容。
@keyframes scroll {
from {
transform: translate(0,0)
}
to {
transform: translate(-300px,0)
}
}
.resultMarquee {
animation: scroll 7s linear 0s infinite;
position: absolute
}
- Bryan Zeng33欢迎几个月后回来...你链接的谷歌搜索结果的整个第一页现在都是一些网站资源列表，这些资源解释了 marquee 标签已经被废弃，但没有提供替代方案。当搜索“HTML marquee 替代方案”时，第一个搜索结果是 StackOverflow 的页面，因此无需返回谷歌搜索。 - grek40@grek40b 我猜是这样，但是你可以尝试用其他搜索引擎或者在 Stack Overflow 上搜索一下吗？ - Bryan Zeng可爱的谷歌彩蛋！..挺有趣的。:) https://www.google.com/search?q=marquee+html - Rowe Morehouse回答链接55如之前所述：最简单的替代方法是CSS动画。
对于所有批评跑马灯的人：
它是UI中非常有用的工具，
我只在悬停时使用它，
以在有限的空间中显示更多信息。
mp3播放器的示例非常好，
甚至我的汽车收音机也使用该效果来显示当前歌曲。
所以没有任何问题，这是我的观点...
- Wolfgang Blessen48他们的观点是，HTML 是“超文本标记语言”，而动画并不属于文档结构（因此也不是标记）的关注点，它是一种呈现（presentation）的关注点。这就是为什么它现在被归入到 CSS 和/或 JavaScript 中实现的原因。 - Tim Goyer那么，为什么要有很棒的输入呢？嗯？ - user78927451@TimGoyer 我只是在思考一般情况下使用跑马灯效果，作为回答那些说：“不要移动文本！”的人的一个解决方案。在CSS中实现它比使用HTML