使用CSS动画实现图片无限循环滚动（跑马灯）效果

本教程将指导您如何利用纯CSS动画，替代已废弃的MARQUEE标签，实现一个透明图片在视口内无限循环滚动的效果。通过设置元素的初始位置和关键帧动画的transform属性，可以轻松创建流畅且高性能的跑马灯动画，无需JavaScript，确保了代码的现代化与兼容性。

告别MARQUEE：现代Web的动画解决方案

在Web开发的早期，MARQUEE标签曾被用来实现文本或图片在页面上的滚动效果。尽管其使用简单直接，但由于其非标准性、性能问题以及对可访问性的负面影响，该标签早已被W3C废弃，不建议在现代Web项目中使用。然而，许多开发者仍希望实现类似的无限循环滚动效果，例如一个透明图片在视口内平稳地从一侧移动到另一侧。

现代Web标准提供了更强大、更灵活且性能更优的解决方案——CSS动画。通过利用CSS的@keyframes规则和transform属性，我们可以精确控制元素的动画行为，实现与MARQUEE标签类似甚至更复杂的滚动效果，同时保持代码的健壮性和可维护性。

核心原理：CSS动画与定位

实现图片无限循环滚动的关键在于以下几点：

立即学习“前端免费学习笔记（深入）”；

1. 元素定位： 将滚动元素固定在视口的某个位置，确保它不会随着页面滚动而移动。
2. 初始位置： 将元素放置在视口外，作为动画的起点。
3. 动画路径： 定义元素从起点移动到终点的路径。
4. 无限循环： 设置动画无限重复播放。

我们将使用position: fixed来固定元素位置，并通过transform: translateX()来控制元素的水平移动。translateX()接受两种主要单位：

• vw (viewport width)：表示视口宽度的百分比。例如，100vw意味着元素将移动相当于视口宽度的距离。
• % (百分比)：表示元素自身宽度的百分比。例如，-100%意味着元素将向左移动相当于自身宽度的距离。

在我们的场景中，为了让图片从视口右侧完全移出，我们将动画的起始点设置为translateX(100vw)（即元素位于视口右侧之外），终点设置为translateX(-100%)（即元素完全移出视口左侧）。

实现步骤与示例代码

下面将通过一个具体的例子来展示如何使用CSS实现一个图片（这里用一个蓝色方块模拟）在视口内无限循环滚动的效果。

无限画

千库网旗下AI绘画创作平台

43

查看详情

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%的自身宽度，使其完全移出视口左侧，实现从屏幕外消失的效果。

通过这种设置，当动画循环时，元素会从右侧视口外进入，平稳地穿过视口，然后从左侧视口外消失，并立即从右侧重新开始下一个循环，形成一个无缝的无限滚动效果。

优化与注意事项

1. 图片替换： 在实际应用中，请将示例中的蓝色方块替换为您的透明PNG图片。确保图片路径正确，并根据需要调整background-size来控制图片大小。
2. 速度调整： 更改animation属性中的时间值（例如10s）可以调整滚动速度。值越小，速度越快。
3. 方向调整：
   • 从左到右： 将@keyframes中的0%设置为transform: translateX(-100%);，100%设置为transform: translateX(100vw);。
   • 垂直滚动： 使用translateY()代替translateX()，并调整top和height属性。
4. 多图滚动： 如果需要多张图片同时滚动，可以为每个图片创建独立的动画，或者将所有图片放入一个父容器中，然后让父容器滚动。
5. 性能： CSS transform属性的动画通常由GPU加速，性能优于直接改变left或margin等属性，因此这种方法是实现流畅动画的推荐方式。
6. 响应式设计： vw单位本身就是响应式的，会根据视口宽度自动调整。但如果图片尺寸是固定像素值，在不同屏幕尺寸下可能需要媒体查询进行调整。

总结

通过本教程，我们学习了如何利用现代CSS的@keyframes动画和transform属性，优雅地实现一个图片在视口内无限循环滚动的效果，完美替代了已废弃的MARQUEE标签。这种方法不仅代码简洁、性能优越，而且兼容性良好，是当前Web开发中实现动态背景或装饰性动画的专业选择。掌握CSS动画是前端开发者的必备技能，它为网页带来了无限的创意可能。

以上就是使用CSS动画实现图片无限循环滚动（跑马灯）效果的详细内容，更多请关注php中文网其它相关文章！