本教程将指导您如何利用纯 css 动画，替代已废弃的 MARQUEE 标签，实现一个透明图片在视口内无限 循环 滚动的效果。通过设置元素的初始位置和关键帧动画的 transform 属性，可以轻松创建流畅且高性能的跑马灯动画，无需javaScript，确保了代码的现代化与兼容性。
告别 MARQUEE：现代 Web 的动画解决方案
在 Web 开发的早期，MARQUEE 标签曾被用来实现文本或图片在页面上的滚动效果。尽管其使用简单直接，但由于其非标准性、性能问题以及对可访问性的负面影响，该标签早已被 W3C 废弃，不建议在现代 Web 项目中使用。然而，许多开发者仍希望实现类似的无限循环滚动效果，例如一个透明图片在视口内平稳地从一侧移动到另一侧。
现代 Web 标准提供了更强大、更灵活且性能更优的解决方案——css 动画。通过利用 CSS 的 @keyframes 规则和 transform 属性，我们可以精确控制元素的动画行为，实现与 MARQUEE 标签类似甚至更复杂的滚动效果，同时保持代码的健壮性和可维护性。
核心原理：CSS 动画与定位
实现图片无限循环滚动的关键在于以下几点：
立即学习 “ 前端免费学习笔记（深入）”；
- 元素定位： 将滚动元素固定在视口的某个位置，确保它不会随着页面滚动而移动。
- 初始位置： 将元素放置在视口外，作为动画的起点。
- 动画路径： 定义元素从起点移动到终点的路径。
- 无限循环： 设置动画无限重复播放。
我们将使用 position: fixed 来固定元素位置，并通过 transform: translateX() 来控制元素的水平移动。translateX()接受两种主要单位：
- vw (viewport width)：表示视口宽度的百分比。例如，100vw 意味着元素将移动相当于视口宽度的距离。
- % (百分比）：表示元素自身宽度的百分比。例如，-100% 意味着元素将向左移动相当于自身宽度的距离。
在我们的场景中，为了让图片从视口右侧完全移出，我们将动画的起始点设置为 translateX(100vw)（即元素位于视口右侧之外），终点设置为 translateX(-100%)（即元素完全移出视口左侧）。
实现步骤与示例代码
下面将通过一个具体的例子来展示如何使用 CSS 实现一个图片（这里用一个蓝色方块模拟）在视口内无限循环滚动的效果。
html结构
首先，我们需要一个简单的 html 元素 来承载我们的“图片”。为了简化示例，我们使用一个 div 元素并为其设置背景色，但在实际应用中，您可以替换为 <img> 标签或带有背景图片的 div。
<div class="ship"></div>css 样式
接下来是核心的 CSS 代码，它定义了元素的外观、定位以及动画行为。
.ship {/* 元素尺寸与背景 */ width: 30px; height: 20px; background: blue; /* 模拟图片，实际可替换为 background-image */ /* background: url('your-transparent-image.png') no-repeat center center / contain; */ /* 固定定位 */ position: fixed; top: 0; /* 距离视口顶部，可根据需要调整 */ left: 0; /* 动画起点，将通过 transform 移动 */ /* 动画属性 */ animation: move 10s linear infinite forwards; } /* 定义动画关键帧 */ @keyframes move {0% { /* 初始位置：位于视口右侧之外 */ transform: translateX(100vw); } 100% {/* 结束位置：完全移出视口左侧 */ transform: translateX(-100%); } }代码解析
-
.ship 样式：
- width, height, background: 定义了元素的尺寸和背景。如果您要使用透明图片，可以将 background: blue; 替换为 background: url(‘your-transparent-image.png’) no-repeat center center / contain;。
- position: fixed; top: 0; left: 0;: 将元素固定在视口的左上角。top 和 left 的值可以根据您希望图片出现的位置进行调整。
- animation: move 10s linear infinite forwards;: 这是动画的核心属性。
- move: 引用了下面定义的 @keyframes 规则的名称。
- 10s: 动画完成一个循环所需的时间，即图片从右侧移到左侧所需的时间。
- linear: 动画的速度曲线，表示动画以恒定速度进行。
- infinite: 动画将无限次重复播放。
- forwards: 动画结束后，元素将保持其最终状态（在这种无限循环的情况下，它确保了动画在每次循环结束时无缝衔接）。
-
@keyframes move 规则：
- 0%: 定义动画开始时的状态。transform: translateX(100vw); 将元素从其 left: 0; 的基准位置向右移动了 100 个视口宽度，使其完全位于视口右侧之外，从而实现从屏幕外进入的效果。
- 100%: 定义动画结束时的状态。transform: translateX(-100%); 将元素从其 left: 0; 的基准位置向左移动了 100% 的自身宽度，使其完全移出视口左侧，实现从屏幕外消失的效果。
通过这种设置，当动画循环时，元素会从右侧视口外进入，平稳地穿过视口，然后从左侧视口外消失，并立即从右侧重新开始下一个循环，形成一个无缝的无限滚动效果。
优化与注意事项
- 图片替换： 在实际应用中，请将示例中的蓝色方块替换为您的透明 PNG 图片。确保图片路径正确，并根据需要调整 background-size 来控制图片大小。
- 速度调整： 更改 animation 属性中的时间值（例如 10s）可以调整滚动速度。值越小，速度越快。
- 方向调整：
- 从左到右： 将 @keyframes 中的 0% 设置为 transform: translateX(-100%);，100% 设置为 transform: translateX(100vw);。
- 垂直滚动： 使用 translateY()代替 translateX()，并调整 top 和 height 属性。
- 多图滚动： 如果需要多张图片同时滚动，可以为每个图片创建独立的动画，或者将所有图片放入一个父容器中，然后让父容器滚动。
- 性能： CSS transform 属性的动画通常由 GPU 加速，性能优于直接改变 left 或 margin 等属性，因此这种方法是实现流畅动画的推荐方式。
- 响应式设计： vw 单位本身就是响应式的，会根据视口宽度自动调整。但如果图片尺寸是固定像素值，在不同屏幕尺寸下可能需要媒体查询进行调整。
总结
通过本教程，我们学习了如何利用现代 CSS 的 @keyframes 动画和 transform 属性，优雅地实现一个图片在视口内无限循环滚动的效果，完美替代了已废弃的 MARQUEE 标签。这种方法不仅代码简洁、性能优越，而且兼容性良好，是当前 Web 开发中实现动态背景或装饰性动画的专业选择。掌握 CSS 动画是 前端 开发者的必备技能，它为网页带来了无限的创意可能。
