精通css和css权威指南_CSS中的字幕–入门指南

Marquee最初是在Internet Explorer中引入的 ，并在90年代非常流行，之后W3C最终由于可用性问题决定将其从HTML标准元素中排除。 鼓励Web设计人员不要使用该标记。

但是令人惊讶的是，该字幕现在正在卷土重来，而不是像以前那样以<marquee>标记格式，而是在CSS模块中。 该模块作为Webkit CSS规范的一部分提供，并且W3C当前也在开发类似的模块 。 但是，由于W3C版本仍处于候选推荐阶段，因此尚不适用。 因此，目前，我们仅介绍Webkit规范中的内容。

语法

首先，可以使用以下速记语法定义字幕。

-webkit-marquee: [direction] [increment] [repetition] [style] [speed]

我相信以上语法中的每个值都是不言自明的，否则您可以在本文档中找到足够的说明。 因此，如果您想更深入地了解此语法的工作方式，可以始终先参考文档。

然后，加入我们的行列，继续创建一些真实的示例，并了解其实际效果。

示例1：滚动文本

好吧，在第一个示例中，我们将创建字幕的经典运动，即使文本从右移到左。

让我们创建如下的文本标记：

<div class="marquee">Lollipop topping lemon drops jujubes applicake fruitcake tart liquorice sesame snaps.</div>

然后使用以下语法定义选取框。

-webkit-marquee: auto medium infinite scroll normal; 
overflow-x: -webkit-marquee;

当选取框方向设置为auto时 ，默认情况下它将从右向左移动； 或者，您可以将此值更改为left 。 还要注意，必须将overflow-x属性设置为-webkit-marquee ，以使内容始终像一个一样。 如果省略此属性，则文本将不会继续。

示例2：来回弹跳

在第二个示例中，我们将尝试为字幕选择其他样式。 这次我们使用alternate代替滚动 ，并将方向值更改为right 。 这样，选框将从左侧移动到右侧，然后来回反弹。

-webkit-marquee: auto medium infinite alternate normal;
overflow-x: -webkit-marquee;

示例3：向上移动文本

对于最后一个示例，我们将更改选取框方向以向上移动。 这样做有两个direction值： 您可以将值更改为up或front 。

就我个人而言，我不明白为什么Webkit提供了两个本质上执行相同操作的值，因为我认为这可能导致某些人感到困惑。

-webkit-marquee: up medium infinite scroll normal;
overflow-x: -webkit-marquee;

此外，我还整理了一些示例，但是如果在此处进行全部说明，它们将是不胜枚举的。

但是，您可以查看所有演示并从下面的链接下载源。

• 演示版
• 下载源

最终想法和参考

首先让我感到惊讶的是，人们仍然对选框感兴趣，我认为它已经走到了尽头。 这也导致了我CSS模块怎样的问题像 这样将是有益的。 实际上，每个浏览器仍支持<marquee>标记的旧版。

所以你怎么看？ 这个时代的选框仍然有用，在现代网页设计中是否有用？

如果您仍然对这种字幕感兴趣，可以访问以下一些参考资料：

• Safari CSS参考
• Webkit字幕生成器
• 来自Sitepoint 的旧<marquee>标记的全面文档 。
• 几乎所有的东西都有一个发电机，包括Marquee Generator 。

翻译自: https://www.hongkiat.com/blog/css-marquee/