更长的时间我对HTML标签< marquee>感到好奇.
你可以在MDN specification找到:
Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
或者在W3C wiki:
No, really. don’t use it.
我搜索了几篇文章,发现一些关于CSS相关替换的提及. CSS属性如:
marquee-play-count
marquee-direction
marquee-speed
但看起来,它们不起作用.它们是2008年规范的一部分,但它们在2014年被排除在外
W3 Consortium提出的一种方法是使用CSS3 animations,但对我来说似乎比易于维护< marquee>更复杂.
还有很多JS alternatives,有很多源代码可以添加到项目中并使它们更大.
我总是把事情看作:“不要使用字幕”,“已经过时”.我不明白为什么.
那么,任何人都可以向我解释一下,为什么要大肆宣传,为什么这么“危险”使用它以及最简单的替代方法是什么?
我找到了example,看起来不错.当您使用良好浏览器支持所需的所有前缀时,您有大约20-25行CSS,其中2个值是硬编码的(开始和停止缩进),具体取决于文本长度.此解决方案不够灵活,您无法使用此方法创建自下而上的效果.
解决方法:
我不认为你应该移动内容,但这不能回答你的问题…看看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.