在现代 Web 开发中，动态文字跑马灯效果是非常常见的交互设计，它可以将重要的信息以流动的方式呈现给用户，增加用户的关注度和阅读体验。在 Material Design 中，动态文字跑马灯效果也被广泛应用。本文将介绍如何使用 HTML、CSS 和 JavaScript 实现 Material Design 中的动态文字跑马灯效果。
实现思路
动态文字跑马灯效果的实现思路很简单，即通过 JavaScript 控制文字的位置实现流动的效果。具体来说，我们可以通过 CSS 的 position 和 left 属性控制文字的位置，然后使用 JavaScript 定时更新 left 的值，使得文字不断移动。同时，为了实现流畅的效果，我们还需要在文字流动到一定位置时将其移动到初始位置。
HTML 结构
首先，我们需要在 HTML 中定义一个容器元素，用于包含跑马灯中的文字。容器元素的宽度应该根据文字的长度来计算，而高度可以根据需要设置。
---- ---------------- ----- ------------------------------ ----- ------------------------------ ----- ------------------------------ ------
CSS 样式
接下来，我们需要对容器元素和文字进行样式设置。容器元素应该设置为相对定位，以便于文字的绝对定位。文字应该设置为绝对定位，并根据需要设置字体、颜色等样式。此外，为了实现 Material Design 中的效果，我们还需要设置文字的阴影和动画。
-------- -
--------- ---------
--------- -------
------------ -------
---------- -----
------------ ----
------ -----
------ -----
------- -----
-
----- -
--------- ---------
---- --
----- --
------------ ----
------ --------
------------ - - ---- -------- ---- ---- -----
---------- ------- --- ------ ---------
-
---------- ------- -
-- -
----- -----
-
---- -
----- ------
-
-上述代码中，我们定义了一个名为 marquee 的动画，用于控制文字的流动。动画的 duration 设置为 10 秒，动画的 timing-function 设置为 linear，表示动画的速度是匀速的。动画的 iteration-count 设置为 infinite，表示动画会一直循环执行。
JavaScript 代码
最后，我们需要编写 JavaScript 代码，以便于动态更新文字的位置。具体来说，我们需要通过 JavaScript 获取容器元素和文字元素，并定时更新文字元素的 left 属性。同时，当文字流动到容器元素的右边缘时，我们需要将其移动到容器元素的左边缘，并继续执行动画。
--- ------- - -----------------------------------
--- ---- - -----------------------------------
--- ----- - --
--- ----- - ---
--- ----- - --
--- ------ - --
--- ---- - - -- - - ------------ ---- -
----- -- --------------------
-
------------------- - ----- - -----
-------- ------ -
------ -- ------
-- ------- - -------------------- -
------ -- --------------------
-----------------------------
-
------------------ - ------- - -----
---------------- -------
-
-------上述代码中，我们首先通过 document.querySelector 和 document.querySelectorAll 方法获取容器元素和文字元素。然后，我们定义了一些变量，用于控制文字的速度、延迟、宽度和偏移量。变量 speed 表示文字的速度，变量 delay 表示文字的更新延迟，变量 width 表示文字的宽度，变量 offset 表示文字的偏移量。
接着，我们通过循环计算文字的宽度，并将其设置为容器元素的宽度。然后，我们定义了一个名为 tick 的函数，用于定时更新文字的位置。在 tick 函数中，我们首先更新文字的偏移量，并判断文字是否已经流动到容器元素的右边缘。如果是，则将第一个文字移动到容器元素的末尾，并重新计算偏移量。最后，我们将容器元素的 left 属性设置为负的偏移量，并通过 setTimeout 方法延迟一段时间后再次执行 tick 函数，以实现动态更新。
示例代码
下面是完整的示例代码，你可以将其复制到 HTML 文件中并运行，以查看效果。
--------- -----
------
------
----- ----------------
--------------- ------ -----------------------
-------
-------- -
--------- ---------
--------- -------
------------ -------
---------- -----
------------ ----
------ -----
------ -----
------- -----
-
----- -
--------- ---------
---- --
----- --
------------ ----
------ --------
------------ - - ---- -------- ---- ---- -----
---------- ------- --- ------ ---------
-
---------- ------- -
-- -
----- -----
-
---- -
----- ------
-
-
--------
-------
------
---- ----------------
----- -------------------------------
----- -------------------------------
----- -------------------------------
------
--------
--- ------- - -----------------------------------
--- ---- - -----------------------------------
--- ----- - --
--- ----- - ---
--- ----- - --
--- ------ - --
--- ---- - - -- - - ------------ ---- -
----- -- --------------------
-
------------------- - ----- - -----
-------- ------ -
------ -- ------
-- ------- - -------------------- -
------ -- --------------------
-----------------------------
-
------------------ - ------- - -----
---------------- -------
-
-------
---------
-------
-------总结
本文介绍了如何使用 HTML、CSS 和 JavaScript 实现 Material Design 中的动态文字跑马灯效果。通过本文的学习，你可以掌握动态文字跑马灯效果的实现思路和具体细节，从而在自己的项目中应用该效果，提升用户的体验和交互效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/658d5c0feb4cecbf2d350e3b