纯CSS实现图片在视口内无限循环滚动动画教程-html教程-PHP中文网

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

DDD

发布： 2025-11-11 12:18:54

原创

214人浏览过

纯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，效果会更佳。

无限画

千库网旗下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 应与图片宽高比匹配，或根据需要调整 */
}

登录后复制

如果你希望使用<img>标签而不是背景图片，HTML结构会是：

<div class="marquee-container">
    <img src="path/to/your/transparent-ship.png" alt="船只" class="ship-image">
</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实现图片在视口内无限循环滚动动画教程的详细内容，更多请关注php中文网其它相关文章！