本教程将指导您如何利用纯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动画是前端开发者的必备技能，它为网页带来了无限的创意可能。