首页 > 营销学院 > 技术知识

纯CSS实现图片在视口内无限循环滚动动画教程

本教程旨在指导开发者如何利用纯css动画，替代已废弃的`marquee`标签，实现单张图片在视口内平滑、无限循环滚动的效果。通过详细解析`@keyframes`和`transform`属性，我们将展示如何精确控制元素的起始位置和运动轨迹，从而创建出专业且兼容性良好的动态视觉体验，适用于各类现代web项目。

引言：告别MARQUEE，拥抱CSS动画

在Web开发中，有时我们需要让一个元素（如图片或文本）在视口内持续滚动，形成一种动态的视觉效果。早期的HTML曾提供MARQUEE标签来实现这一功能，但由于其非标准性、可访问性差以及对性能的影响，该标签已被弃用。现代Web开发推荐使用CSS动画来创建此类动态效果，它不仅性能更优，兼容性更好，而且提供了更精细的控制能力。

本教程将详细讲解如何仅使用HTML和CSS，实现一个单张图片从视口右侧进入，平滑地向左滚动，直至完全离开视口左侧，并无限循环的动画效果。

核心原理：CSS动画与变换

实现图片无限循环滚动的关键在于CSS的@keyframes规则和transform属性。

@keyframes规则：它允许我们定义动画在不同时间点的样式。通过指定0%（动画开始）和100%（动画结束）的样式，我们可以控制元素的起始和结束状态。
transform: translateX()：这个CSS函数用于在X轴（水平方向）上移动元素。
- translateX(100vw)：将元素向右移动其父容器宽度的100%加上视口宽度的100%。当元素初始定位在left: 0时，translateX(100vw)会将其精确地放置在视口右侧边缘之外，使其从视口外部开始。vw（viewport width）是一个相对单位，100vw表示视口宽度的100%。
- translateX(-100%)：将元素向左移动其自身宽度的100%。这意味着当动画结束时，元素会完全离开视口的左侧。这里的百分比是相对于元素自身的宽度。

结合这两者，我们可以创建一个动画，让元素从视口右侧完全消失的位置开始，移动到视口左侧完全消失的位置。

实现步骤与示例代码

下面是实现该效果的HTML结构和CSS样式代码。

HTML结构

首先，我们需要一个简单的HTML元素来承载我们的“船只”或任何你希望滚动的图片。这里我们使用一个div，稍后可以将其背景设置为图片。

<!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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="ship"></div>
</body>
</html>

CSS样式

接下来，创建style.css文件，并添加以下CSS代码：

/* style.css */
body {
    margin: 0;
    overflow: hidden; /* 防止滚动条出现，确保动画平滑 */
    background-color: #f0f0f0; /* 示例背景色 */
}

.ship {
  width: 100px; /* 示例宽度，可根据实际图片调整 */
  height: 60px; /* 示例高度，可根据实际图片调整 */
  background: url('path/to/your/ship.png') no-repeat center center / contain; /* 替换为你的图片路径 */
  /* 如果没有图片，可以使用背景色代替 */
  /* background-color: blue; */ 

  animation: move 10s linear infinite forwards; /* 定义动画 */
  position: fixed; /* 固定定位，使其不随页面滚动 */
  top: 50px; /* 距离视口顶部的距离，可调整 */
  left: 0; /* 初始左边距 */
  z-index: 10; /* 确保在其他内容之上 */
}

@keyframes move {
  0% {
    transform: translateX(100vw); /* 动画开始：元素位于视口右侧之外 */
  }
  100% {
    transform: translateX(-100%); /* 动画结束：元素完全离开视口左侧 */
  }
}

重要提示： 请将path/to/your/ship.png替换为你实际的图片文件路径。如果你的图片是透明的PNG，效果会更佳。

LALAL.AI

AI人声去除器和声乐提取工具

196 查看详情 LALAL.AI

代码解析与关键点

.ship 样式：
- width 和 height：定义了滚动元素的尺寸。请根据你实际图片的尺寸进行调整。
- background：这里使用了background-image来加载图片。no-repeat防止图片重复，center center居中显示，/ contain确保图片完全显示在元素内部。如果你暂时没有图片，可以像原始示例那样使用background-color: blue;来测试效果。
- animation: move 10s linear infinite forwards;：这是核心动画属性。
  - move：动画的名称，对应下面的@keyframes move。
  - 10s：动画持续时间为10秒。
  - linear：动画速度曲线，表示匀速运动。
  - infinite：动画无限循环。
  - forwards：动画结束后，保持最后一帧的样式。在这里，由于是无限循环，forwards的效果并不明显，但通常是一个好习惯。
- position: fixed;：使元素相对于浏览器视口定位，不随页面滚动而移动。
- top: 50px; 和 left: 0;：设置元素的初始位置。top可以调整滚动条的高度。left: 0是配合translateX(100vw)实现从右侧进入的关键。
- z-index: 10;：确保滚动元素在页面其他内容之上。
@keyframes move 规则：
- 0% { transform: translateX(100vw); }：在动画开始时，元素通过translateX(100vw)被推到视口的最右侧边缘之外。
- 100% { transform: translateX(-100%); }：在动画结束时，元素通过translateX(-100%)向左移动了其自身宽度的100%，从而完全离开视口左侧。

高级应用与注意事项

替换为实际图片：要使用透明PNG图片，只需将.ship的background属性设置为：

.ship {
  /* ... 其他样式 ... */
  background: url('path/to/your/transparent-ship.png') no-repeat center center / contain;
  /* background-size: contain; 确保图片完整显示 */
  /* background-position: center; 图片居中 */
  /* width 和 height 应与图片宽高比匹配，或根据需要调整 */
}

如果你希望使用纯CSS实现图片在视口内无限循环滚动动画教程标签而不是背景图片，HTML结构会是：

<div class="marquee-container">
    @@##@@
</div>

相应的CSS需要应用于.ship-image或.marquee-container，并确保img标签的尺寸和定位正确。

动画速度与方向：
- 速度：调整animation: move 10s linear infinite forwards;中的10s可以改变滚动速度。数值越小，速度越快。
- 方向：如果需要从左向右滚动，可以调整@keyframes：
```
@keyframes move-rtl { /* Right to Left */
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100vw); }
}
```
  然后将.ship的animation属性更新为animation: move-rtl 10s linear infinite forwards;。
响应式设计：由于使用了vw单位，动画在不同视口宽度下会自动适应。但图片的width和height可能需要通过媒体查询（@media）进行调整，以确保在小屏幕设备上显示效果良好。
性能考量： transform属性的动画通常由GPU加速，性能较好。但避免在动画中改变width、height、top、left等属性，这些属性会触发重排（reflow）和重绘（repaint），影响性能。

总结

通过本教程，我们学习了如何使用纯CSS动画，结合@keyframes和transform: translateX()，优雅地实现图片在视口内的无限循环滚动效果。这种方法不仅符合现代Web标准，提供了更好的性能和兼容性，也为开发者提供了更强大的控制能力。掌握CSS动画是前端开发中的一项基本技能，它能帮助我们创建出更具吸引力和交互性的用户界面。鼓励读者在此基础上进行实验，探索更多有趣的动画效果。

以上就是纯CSS实现图片在视口内无限循环滚动动画教程的详细内容，更多请关注其它相关文章！

# 铜陵网站推广地址 # 我们可以 # 使其 # 相对于 # 设置为 # 结束时 # 背景色 # 十堰整合营销推广公司 # 街头营销推广 # 将其 # 石首旅游业网站推广 # 雷州公司网站建设电话 # 长沙营销推广策略公司 # 关键词seo排名哪个好火9星服务好棒 # 武安城乡建设网站 # 网站推广的手段有哪些 # 刷网站推广积分 # css # 如果你 # 是一个 # 口内 # ov # web标准 # 重绘 # html元素 # css样式 # css动画 # 响应式设计 # ai # 前端开发 # 浏览器 # 前端 # html

相关栏目：【 Google疑问12 】【 Facebook疑问10 】【优化推广96088 】【技术知识133117 】【 IDC资讯59369 】【网络运营7196 】【 IT资讯61894 】

2025-11-11

SQL多表关联如何理解_核心原理解析助你掌握关键方法【教程】 SQL多表连接如何理解_JOIN关联关系详细步骤解析【指导】 SQL多表连接结果异常怎么办_JOIN条件排查方法解析【指导】 SQL索引下推是什么_ICP机制性能提升原理【教程】 SQL跨表统计怎么写_重要技巧总结提升查询效率【技巧】 SQL注入如何防护_完整逻辑拆解助力系统化掌握【技巧】 SQL上传文件信息建模方法_SQL存储文件元数据方案 SQL多语种存储方案设计_SQL字符集选择策略 SQL字符串处理如何编写_重要技巧总结提升查询效率【教学】 SQL去重查询怎么实现_优化思路讲解帮助高效处理数据【技巧】 SQL统计复购用户怎么做_多次行为分析SQL思路【教程】 SQL字符串处理如何编写_优化思路讲解帮助高效处理数据【教程】 SQL动态字段解析技巧_SQL解析JSON多层字段 SQL线上慢SQL如何治理_规范与工具实践总结【技巧】 SQL表结构如何演进_兼容老数据设计思路【教程】 SQL排序规则如何设置_ORDERBY排序原理与性能说明【指导】 SQL去重查询怎么实现_真实案例解析强化复杂查询思维【教学】 SQL按字段范围分批处理_SQL避免长时间锁表 SQL统计不同字段组合数量_多列聚合查询技巧【技巧】 SQL多字段去重怎么处理_GROUPBY去重思路说明【教学】

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

点击免费数据支持

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。