新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-06

浏览次数：次

返回列表

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

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

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

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

CSS动画允许开发者以声明式的方式定义元素的过渡和动画效果，无需J*aScript即可实现复杂的交互和视觉表现。本文将专注于利用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;
}
*/

关键属性解释：

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

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

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

BrandCrowd

一个在线Logo免费设计生成器

200 查看详情 BrandCrowd

@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代码整合，即可实现单张图片无限循环滚动。

CSS 图片无限滚动示例 <div class="ship"></div>

欢迎来到我的网站

这是一段示例内容，上方有图片正在滚动。

使用CSS动画替代了废弃的marquee标签。

进阶与注意事项

图片替换：将示例中的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动画实现单张透明图片无限循环滚动效果的详细内容，更多请关注其它相关文章！

# 会将 # 厦门抖音seo价格公司 # 网站首页优化公司哪家好 # 引航动力seo推广 # 摇滚网站建设学校文案 # 抖音用的哪家网站推广好 # 诊断seo虾哥网络 # 旅游网站建设哪家快 # 山东seo工具哪个好用 # 金堂网站优化多少钱 # 河北先进网站建设配置 # 实际应用 # 值为 # 边缘 # 我们可以 # css # 使其 # 口中 # 置顶 # 这是 # overflow # web标准 # css属性 # 硬件加速 # css动画 # ai # html # java # javascript