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

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

心靈之曲

发布： 2025-11-17 12:18:49

原创

264人浏览过

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

本文详细介绍了如何利用css动画实现一个图像在视口内无限循环滚动的效果，作为已废弃的`marquee`标签的现代替代方案。通过`@keyframes`定义动画路径，结合`transform: translatex()`精确控制元素位置，使图像能够平滑地从视口右侧移动到左侧并无限重复，同时提供了具体的html和css代码示例及关键属性解析，帮助开发者轻松实现这一视觉效果。

在现代Web开发中，为了实现元素（如图像或文本）在页面上连续滚动的效果，我们不再推荐使用已废弃的标签。虽然实现简单，但它不符合Web标准，且存在可访问性问题。幸运的是，CSS动画提供了一个强大且灵活的替代方案，能够以更优雅、更符合标准的方式实现相同的视觉效果，例如让一个透明PNG图像在视口中无限循环移动。

核心原理：CSS动画与位置变换

实现图像无限循环滚动的核心在于利用CSS的@keyframes规则和transform属性。我们通过定义动画的关键帧，让元素在指定时间内从一个位置平移到另一个位置，并设置动画无限循环。

初始定位： 将图像元素定位在视口右侧完全不可见的位置。
终点定位： 将图像元素移动到视口左侧完全不可见的位置。
动画循环： 设置动画无限次重复执行，形成循环滚动的效果。

实现步骤与代码示例

以下是使用HTML和CSS实现一个透明图像（例如一艘船的PNG图片）在视口中无限循环滚动的具体步骤和代码。

1. HTML结构

首先，我们需要一个HTML元素来承载我们的图像。这里我们使用一个div元素，并通过CSS将其背景设置为所需的透明PNG图像。

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

图像转图像AI

利用AI轻松变形、风格化和重绘任何图像

查看详情

<!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-marquee"></div>
</body>
</html>

登录后复制

2. CSS样式

接下来，在style.css文件中定义ship-marquee类的样式，包括图像的尺寸、定位以及关键的动画属性。

/* style.css */
body {
    margin: 0;
    overflow-x: hidden; /* 防止滚动条出现 */
}

.ship-marquee {
    width: 120px; /* 船的宽度，根据实际图片调整 */
    height: 80px; /* 船的高度，根据实际图片调整 */
    background-image: url('path/to/your/ship.png'); /* 替换为你的透明PNG图片路径 */
    background-size: contain; /* 确保图片完整显示在div内 */
    background-repeat: no-repeat; /* 防止图片重复 */
    background-position: center; /* 图片居中显示 */

    position: fixed; /* 固定在视口，不随页面滚动 */
    top: 50px; /* 距离视口顶部的距离，可调整 */
    /* left: 0; */ /* 动画会控制水平位置，此处可省略或设为0 */
    z-index: 100; /* 确保船在其他内容之上 */

    /* 应用动画 */
    animation: marquee-move 15s linear infinite forwards;
}

/* 定义动画关键帧 */
@keyframes marquee-move {
    0% {
        transform: translateX(100vw); /* 动画开始时，船完全位于视口右侧之外 */
    }
    100% {
        transform: translateX(-100%); /* 动画结束时，船完全位于视口左侧之外（-100%是自身宽度） */
    }
}

登录后复制

代码解析：

.ship-marquee：
- width 和 height：设置图像容器的尺寸，应与你的PNG图片尺寸相匹配或按比例调整。
- background-image：指向你的透明PNG图片路径。
- background-size: contain; 和 background-repeat: no-repeat;：确保背景图片能正确显示且不重复。
- position: fixed;：使元素相对于视口定位，不随页面滚动。
- top: 50px;：定义元素距离视口顶部的垂直位置。
- z-index: 100;：确保滚动图像位于其他页面内容之上。
- animation: marquee-move 15s linear infinite forwards;：这是应用动画的关键。
  - marquee-move：动画的名称，对应@keyframes的名称。
  - 15s：动画持续时间，表示从起点到终点所需的时间。
  - linear：动画的过渡函数，表示动画以恒定速度进行。
  - infinite：动画无限次重复。
  - forwards：动画结束后，元素将保持在动画结束时的状态（虽然对于无限循环动画来说不那么关键，但良好的习惯）。
@keyframes marquee-move：
- 0% { transform: translateX(100vw); }：动画的起始状态。translateX(100vw)表示元素向右平移了视口宽度的100%，使其完全位于视口右侧之外。
- 100% { transform: translateX(-100%); }：动画的结束状态。translateX(-100%)表示元素向左平移了自身宽度的100%，使其完全位于视口左侧之外。

关键属性与注意事项

transform: translateX()： 这是实现水平移动的核心。
- 100vw：表示视口宽度的100%。使用vw单位可以确保动画在不同视口宽度下都能正确地从屏幕外开始。
- -100%：表示元素自身宽度的-100%。这使得元素完全移出左侧边界，保证了无缝循环。
position: fixed;： 如果希望滚动图像始终停留在视口中的特定位置，而不受页面滚动影响，则使用fixed。如果希望它在某个容器内滚动，则可使用position: absolute;并将其父元素设置为position: relative;。
overflow-x: hidden;： 在body或包含容器上设置此属性，可以防止在动画过程中出现水平滚动条。
图片尺寸与性能： 确保使用的PNG图片尺寸适中，过大的图片会影响页面加载性能。透明PNG通常比JPEG文件大，应进行适当优化。
动画速度与平滑度： 调整animation-duration（如15s）可以改变滚动速度。linear过渡函数使动画平滑且匀速。
多元素滚动： 如果需要多个图像滚动，可以复制ship-marquee元素并调整它们的top值，或者错开它们的animation-delay，以实现不同步的滚动效果。