Question

我对HTML标记bzr感到好奇。

过时此功能已过时。虽然它可能仍然适用于某些浏览器，但不鼓励使用它，因为它可以随时删除。尽量避免使用它。

不，真的。不要使用它。

我搜索了几篇文章，发现一些关于CSS相关替换的提及。 CSS属性如：

<marquee>

但是看起来，它们不起作用。它们是2008年中规范的一部分，但在2014年

中被排除在外

W3联盟提出的一种方法是使用CSS3 animations，但对我而言，似乎要比易于维护marquee-play-count marquee-direction marquee-speed复杂得多。

还有很多JS alternatives，您可以将大量源代码添加到项目中并使其更大。

我总是把事情看作：＆＃34;不要使用字幕＆＃34;，＆＃34;已过时＆＃34;。我不明白为什么。

所以，任何人都可以向我解释，为什么被大家弃用，为什么会如此＆＃34;危险＆＃34;使用它和什么是最简单的替换？

我找到了example，看起来不错。当您使用良好浏览器支持所需的所有前缀时，您有大约20-25行CSS，其中2个值是硬编码的（开始和停止缩进），具体取决于文本长度。这个解决方案不是那么灵活，你不能用这个创造自下而上的效果。

Answer 1

我认为你不应该移动内容，但这不会回答你的问题......看看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。

Answer 2

您只需在CSS中定义一次类和附加的循环动画，然后在需要的任何地方使用它。但是，正如许多人所说的那样 - 这有点令人讨厌，而且还有一些原因，为什么这个标签已经过时了。

＆＃13;

.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 15s linear infinite;
       -webkit-animation: example1 15s linear infinite;
       animation: example1 15s 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%); 
       }
      }

＆＃13;

<div class="example1">
   <h3>Scrolling text... </h3>
</div>

＆＃13;

Answer 3

如前所述：最简单的替换是CSS动画

对于大帐篷的所有批评者：

这是一个非常有用的UI工具，我只是在悬停时使用它，在有限的空间内显示更多信息。

mp3播放器的例子很棒，甚至我的汽车收音机都在使用这个效果来显示当前的歌曲。

所以没有错，我的意见......

Answer 4

<marquee>从未成为任何HTML规范的一部分，您链接到的是CSS规范，因此很难弃用从未包含的内容。 HTML是关于文档的结构，而不是它的表示。因此，将自动元素作为HTML的一部分并不遵守这些目标。动画在CSS中。

Answer 5

我知道这是几年前得到的答案，但我在检查时发现了这一点 this。当我检查时，我发现了这一点。

@keyframes scroll {
    from {
        transform: translate(0,0)
    }

    to {
       transform: translate(-300px,0)
    }
}

.resultMarquee {
    animation: scroll 7s linear 0s infinite;
    position: absolute
}

Answer 6

我创建了一个jQuery脚本，它将用标准的import re, sys, glob out = open("cleaned.txt", 'r') **path = '/Home/Username/Desktop/My_files/*.html'** files = glob.glob(path) for file in files: f = open(file, 'r') data = f.read().replace("\n", ' ') cleaner = re.compile('<.*?>') cleantext = re.sub(cleaner, "\n", data) out.write(cleantext)替换旧的select * from queue where job='31967522'||CHR(95)||'3'; select * from queue where job='31967522'||CHR(95)||'3'; select * from queue where job=31967522'||CHR(95)||'3'; select * from queue where job='31967522'||CHR(95)||'3'; select * from queue where job='31967522'||'_'||'3'; select * from queue where job='31967522'||'_'||'3'; select * from queue where job=31967522'||'_'||'3'; select * from queue where job='31967522'||'_'||'3';标签。该代码还将解析marquee属性，例如div，marquee和direction。实际上，代码可以跳过jQuery部分，但是我懒得这么做，而香草JS部分实际上是我从here

的@Stano Answere修改的解决方案。

这是代码：

scrolldelay

这是工作中的codepen

为什么<marquee>已被弃用，什么是最佳选择？

6 个答案: