文本大写为您提供了一个滚动文本框 网站Web 通过有用的摘录吸引读者 内容。 它们也称为代码（或新闻代码），通常用于在页面顶部或底部显示稳定的新闻更新流。 。 通常，滚动动画是用一行代码完成的 内容 循环显示信息，以便重复显示信息。 不幸的是， <marquee>html标签已过时，如今，我们依靠CSS和JavaScript来创建字幕。 但是，使用Divi，您可以创建一个简单的选择矩形，而不必担心自定义代码。

在本教程中，我们将说明使用Divi创建简单选择文本有多么容易。 我们甚至将看到如何在悬停时暂停滚动文本动画，以及如何添加大滚动文本作为标题的唯一设计元素。

让我们开始。

概观

你需要什么才能开始

首先，您需要：

1. Le Divi主题 已安装并处于活动状态
2. 创建了一个新页面以从头开始在前端构建（可视构造函数）

之后，您将有一块空白画布可以开始在Divi中进行设计。

构想的开始

对于第一个示例，我们将为一行文本创建一个简单的文本矩形。 为此，我们将为行赋予最大宽度，并隐藏溢出。 接下来，我们将向包含文本行的文本模块中添加循环幻灯片动画，以使其像矩形一样反复滑动到该行中。

这是怎么做的。

首先创建一个带有一行行的常规部分。

然后，在添加模块之前，使用固定的宽度，阴影框和半径更新行，如下所示：

• 最大宽度：200px
• 室内装潢：顶部是10px，底部是10px
• 圆角：10px
• Box Shadow：查看屏幕截图
• 水平溢出：隐藏
• 垂直溢出：隐藏

添加文本模块

该行完成后，向该行添加一个新的文本模块。

然后更新 内容 正文的单行文本。 现在，请确保该文本行不会分成另一行。

• 正文：“这是一个句子”

文本模块设计

更新文本模块设计参数，如下所示：

• 保证金：左侧为-100％，右侧为100％

这会将文本模块放置在行的左侧。 由于隐藏了该行的隐藏可见性，因此该模块将被隐藏，直到我们添加动画使其可见为止。

• 动画样式：幻灯片
• 动画方向：向右
• 动画时间：5000ms
• 动画强度：100％
• 动画的起始不透明度：100％
• 速度曲线动画：线性
• 重复动画：循环

结果

现在来看结果。

创建更长的文本行

在上面的简单选择文本设计中，我们将文本行的宽度限制为与该行相同的宽度。 但是，如果我们想用相同的宽度创建更长的文本行，则需要对设置进行一些调整。

首先，在文本模块上，将文本主体替换为以下内容：

这是一个带有链接的阶段

添加更多宽度和边距以适合最长的文本行

您可能会注意到，文本被分为三行而不是一行。

因此，我们需要调整动画的边距和强度。

• 宽度：207％
• 保证金：左侧为-207％，右侧为207％
• 动画强度：75％

这里的诀窍是增加宽度并更新边距值，以便仅留出足够的空间用于单行文本。 然后调整动画的强度，以使循环播放的动画之间没有太大的中断。

结果

这是最终结果。

悬停时暂停选择文本动画

由于此选择矩形包括一个链接，因此用户在移动时很难单击该链接。 但是，我们可以在文本模块中添加一些CSS片段，以在悬停时暂停动画。

添加CSS代码段以在悬停时暂停动画

要添加CSS片段，请打开文本模块设置，然后将以下自定义CSS代码添加到主元素中 在悬停标签下 :

动画播放状态：暂停;

最终结果

现在检查最终结果。 请注意，当光标悬停在文本上方时，文本动画将停止，从而允许用户单击链接。

这就是本教程的全部内容，希望它能教您如何在Divi上添加滚动文本。