使用CSS动画实现单张透明图片无限循环滚动效果-html教程-PHP中文网

使用CSS动画实现单张透明图片无限循环滚动效果

碧海醫心

发布： 2025-11-06 14:00:02

原创

371人浏览过

使用CSS动画实现单张透明图片无限循环滚动效果

本文详细阐述如何利用现代css动画技术，替代已废弃的`marquee`标签，实现单张透明图片在视口中无限循环、平滑滚动的效果。通过深入理解`@keyframes`规则和`transform`属性，配合`vw`和`%`单位的灵活运用，可以高效且优雅地创建出高性能的图片滚动动画，确保兼容性和用户体验。

告别传统跑马灯：现代Web动画的必要性

在Web开发的早期，MARQUEE标签曾被用来实现文本或图片的滚动效果。尽管其使用简单，能快速实现视觉上的移动，但由于其非标准、语义缺失以及对可访问性和性能的负面影响，该标签早已被W3C废弃，不建议在生产环境中使用。对于希望在网页上实现类似“单张透明图片在视口中无限循环滚动”的需求，现代Web标准提供了更强大、更灵活且性能更优的解决方案——CSS动画。

CSS动画允许开发者以声明式的方式定义元素的过渡和动画效果，无需JavaScript即可实现复杂的交互和视觉表现。本文将专注于利用CSS的@keyframes规则和transform属性，精确复刻MARQUEE标签所能提供的单图无限循环滚动效果。

核心原理：CSS animation 与 transform

实现图片无限循环滚动的核心在于结合@keyframes定义动画序列，并通过animation属性将其应用到目标元素上。其中，transform属性的translateX()函数将是控制元素水平位移的关键。

@keyframes 规则：用于定义动画的各个阶段（或称“关键帧”）。在每个关键帧中，我们可以指定元素的CSS属性值。动画将在这D些关键帧之间平滑过渡。
transform: translateX()：这个CSS函数用于在X轴（水平方向）上移动元素。
- 正值会将元素向右移动。
- 负值会将元素向左移动。
- 单位可以是像素（px）、百分比（%）或视口宽度单位（vw）。
animation 属性：将@keyframes定义的动画应用到元素上，并控制动画的持续时间、速度曲线、循环次数等。

实现步骤

我们将通过一个简单的示例来展示如何让一张图片（这里用一个蓝色的div代替）从视口右侧完全移入，然后向左滚动直至完全移出，并无限循环。

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

1. HTML 结构

首先，我们需要一个承载滚动元素的HTML容器。这里我们使用一个简单的div，并为其指定一个类名，例如ship。在实际应用中，这个div的背景可以是一张透明的PNG图片。

<div class="ship"></div>

登录后复制

2. CSS 样式定义

接下来，我们为.ship元素定义基础样式和动画行为。

.ship {
  width: 30px; /* 图片宽度 */
  height: 20px; /* 图片高度 */
  background: blue; /* 示例背景，实际应用中可替换为 background-image */
  position: fixed; /* 固定定位，使其不随页面滚动 */
  top: 0; /* 距离视口顶部位置 */
  left: 0; /* 初始左侧定位，动画将基于此进行 transform */
  animation: move 10s linear infinite forwards; /* 应用动画 */
}

/* 实际使用透明PNG图片时，可以这样设置： */
/*
.ship {
  width: 100px;
  height: 50px;
  background-image: url('path/to/your/transparent-ship.png');
  background-size: contain;
  background-repeat: no-repeat;
  position: fixed;
  top: 50px; /* 假设在页面中部滚动 */
  left: 0;
  animation: move 15s linear infinite forwards;
}
*/

登录后复制

关键属性解释：

无限画

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

查看详情

position: fixed;：使元素相对于视口定位，不随页面滚动而移动。
top: 0; left: 0;：设置元素的初始定位点，transform将在此基础上进行位移。
animation: move 10s linear infinite forwards;：
- move：引用下面定义的@keyframes动画名称。
- 10s：动画持续时间为10秒。
- linear：动画速度曲线，表示动画从开始到结束匀速进行。
- infinite：动画无限循环。
- forwards：动画结束后，元素将保持最后一个关键帧的样式。

3. 定义动画关键帧 (@keyframes)

现在，我们定义名为move的动画关键帧，控制元素从视口右侧移动到左侧。

@keyframes move {
  0% {
    transform: translateX(100vw); /* 动画开始：元素位于视口最右侧，完全不可见 */
  }
  100% {
    transform: translateX(-100%); /* 动画结束：元素向左移动，直至完全离开视口左侧 */
  }
}

登录后复制

关键点解析：

0% { transform: translateX(100vw); }：
- 100vw 表示视口宽度的100%。当translateX的值为100vw时，元素会将自身左边缘定位在视口右边缘，使其完全处于视口之外的右侧。这是动画的起点。
100% { transform: translateX(-100%); }：
- -100% 表示元素自身宽度的-100%。当translateX的值为-100%时，元素会向左移动，使其右边缘与初始left: 0的位置对齐，从而使整个元素完全离开视口左侧。这是动画的终点。

通过这种设置，元素将从视口右侧（完全不可见）开始，向左移动，穿过整个视口，最终从视口左侧（完全不可见）消失，形成一个完美的无限循环滚动效果。

完整代码示例

将上述HTML和CSS代码整合，即可实现单张图片无限循环滚动。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 图片无限滚动示例</title>
<style>
  body {
    margin: 0;
    overflow: hidden; /* 防止滚动条出现 */
    min-height: 100vh; /* 确保body有足够高度 */
    background-color: #f0f0f0;
  }

  .ship {
    width: 80px; /* 调整图片宽度 */
    height: 40px; /* 调整图片高度 */
    /* 实际应用中请替换为你的透明PNG图片路径 */
    background-image: url('https://picsum.photos/id/237/80/40'); /* 示例图片，可替换 */
    background-size: contain;
    background-repeat: no-repeat;
    position: fixed;
    top: 50px; /* 调整图片在视口中的垂直位置 */
    left: 0; /* 动画起点基于此 */
    animation: move 15s linear infinite forwards; /* 调整动画速度 */
    z-index: 100; /* 确保图片在其他内容之上 */
  }

  @keyframes move {
    0% {
      transform: translateX(100vw); /* 从视口右侧完全隐藏处开始 */
    }
    100% {
      transform: translateX(-100%); /* 移动到视口左侧完全隐藏处结束 */
    }
  }

  /* 页面其他内容，用于演示滚动效果不会影响布局 */
  .content {
    padding: 100px 20px;
    text-align: center;
    font-family: sans-serif;
    color: #333;
  }
</style>
</head>
<body>

  <div class="ship"></div>

  <div class="content">
    <h1>欢迎来到我的网站</h1>
    <p>这是一段示例内容，上方有图片正在滚动。</p>
    <p>使用CSS动画替代了废弃的marquee标签。</p>
  </div>

</body>
</html>

登录后复制

进阶与注意事项

图片替换：将示例中的background: blue;或background-image: url('...')替换为你的透明PNG图片路径。确保图片尺寸与.ship的width和height属性匹配，或者使用background-size: contain/cover来适应。
速度与方向：
- 调整animation-duration（例如15s）可以控制滚动速度，值越小速度越快。
- 如果需要从左向右滚动，可以将@keyframes修改为：
```
@keyframes move-right {
  0% { transform: translateX(-100%); } /* 从左侧隐藏处开始 */
  100% { transform: translateX(100vw); } /* 移动到右侧隐藏处结束 */
}
```
  登录后复制
  并相应修改animation属性。
垂直位置：通过调整.ship的top或bottom属性来控制图片在视口中的垂直位置。
多张图片滚动：如果需要多张图片同时滚动，可以创建多个.ship元素，并为它们设置不同的animation-delay，以错开它们的出场时间。
性能优化：transform属性的动画是硬件加速的，因此性能通常很好。避免在动画中使用会触发布局（layout）或绘制（paint）的属性（如width, height, left, top等），transform是首选。
可访问性：对于装饰性的背景动画，通常不需要特殊的可访问性处理。但如果动画内容对理解页面至关重要，应考虑提供替代方案。

总结

通过CSS的@keyframes和transform属性，我们可以轻松、高效地实现单张透明图片在视口中的无限循环滚动效果，完美替代了已废弃的marquee标签。这种方法不仅符合现代Web标准，提供了更好的性能和灵活性，也使得开发者能够更精细地控制动画的每一个细节。掌握这些CSS动画技巧，将有助于创建更具吸引力和交互性的网页体验。

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