当前位置：首页 > 文章列表 > 文章 > 前端 > 透明视口滚动动画实现技巧

透明视口滚动动画实现技巧

2025-11-07 17:54:35 0浏览收藏

使用CSS动画实现图片视口滚动

CSS动画提供了一种强大而灵活的方式来创建各种动态效果，包括元素的移动、缩放、旋转和透明度变化等。要实现单张透明图片在视口内无限循环滚动，我们将主要利用@keyframes规则和transform属性。

核心原理

实现图片从右侧进入视口，向左侧移动直至消失，然后再次从右侧出现的无限循环效果，其核心思想是：

初始定位： 将图片元素定位在视口右侧完全不可见的位置。
动画过程： 定义一个动画，使图片从初始位置平滑移动到视口左侧完全不可见的位置。
循环播放： 将此动画设置为无限循环。

步骤详解与代码示例

我们将以一个“船只”的透明PNG图片为例，演示如何实现其在视口顶端从右向左的无限滚动。

1. HTML结构

首先，我们需要一个HTML元素作为我们图片的容器。为了简洁和灵活性，我们通常使用一个<div>标签。

2. CSS样式

接下来是关键的CSS部分。我们将为.ship-marquee类定义样式，包括图片设置、定位和动画属性。

.ship-marquee {
  /* 图片尺寸 */
  width: 100px; /* 根据实际图片大小调整 */
  height: 60px; /* 根据实际图片大小调整 */

  /* 设置背景图片为透明PNG船只 */
  background-image: url('path/to/your/transparent-ship.png'); /* 替换为你的图片路径 */
  background-size: contain; /* 确保图片完整显示在容器内 */
  background-repeat: no-repeat; /* 防止图片重复 */
  background-position: center; /* 图片居中显示 */

  /* 元素定位：固定在视口顶部，使其可以脱离文档流进行动画 */
  position: fixed;
  top: 0;
  left: 0; /* 初始left设为0，通过transform控制实际位置 */
  z-index: 1000; /* 确保船只在其他内容之上 */

  /* 动画属性 */
  animation: moveShip 20s linear infinite; /* 动画名称 持续时间 动画曲线 循环次数 */
}

/* 定义动画关键帧 */
@keyframes moveShip {
  0% {
    /* 初始状态：将船只定位在视口右侧，完全离开视口 */
    /* 100vw 表示视口宽度的100%，将元素右边缘与视口右边缘对齐 */
    transform: translateX(100vw);
  }
  100% {
    /* 结束状态：将船只移动到视口左侧，完全离开视口 */
    /* -100% 表示元素自身宽度的-100%，确保整个元素移出左侧 */
    transform: translateX(-100%);
  }
}

代码解析：

.ship-marquee 样式：
- width, height: 定义了图片容器的尺寸。请根据您的透明PNG图片实际尺寸进行调整，以避免图片拉伸或显示不全。
- background-image: 设置您的透明PNG图片路径。
- background-size: contain;, background-repeat: no-repeat;, background-position: center;: 这些属性确保背景图片在容器内正确显示，不会重复，并且居中。
- position: fixed; top: 0; left: 0;: 将元素固定在视口的左上角。position: fixed使得元素脱离文档流，并相对于视口进行定位，这对于实现全屏范围内的滚动至关重要。
- z-index: 1000;: 确保滚动图片在页面其他内容之上，防止被遮挡。
- animation: moveShip 20s linear infinite;: 这是启动动画的关键。
  - moveShip: 动画的名称，必须与@keyframes规则中定义的名称一致。
  - 20s: 动画完成一次循环所需的时间。这个值决定了船只的移动速度，值越小速度越快。
  - linear: 动画的计时函数，表示动画以恒定速度进行，没有加速或减速。
  - infinite: 动画将无限次循环播放。
@keyframes moveShip 规则：
- 0%: 定义动画开始时的状态。transform: translateX(100vw); 将元素沿X轴向右平移100个视口宽度。这意味着元素的左边缘将与视口的右边缘对齐，使其完全位于视口之外。
- 100%: 定义动画结束时的状态。transform: translateX(-100%); 将元素沿X轴向左平移其自身宽度的100%。这意味着元素的右边缘将与视口的左边缘对齐，使其完全离开视口。

通过这种方式，当动画从0%到100%执行时，船只将从视口右侧外移动到视口左侧外。由于infinite属性，当动画到达100%时，它会立即跳回0%状态，再次从右侧开始移动，从而形成一个无缝的循环滚动效果。

优化与注意事项

速度调整： 更改animation属性中的时间值（例如20s）可以调整船只的移动速度。值越小，移动越快。
图片尺寸与容器： 确保.ship-marquee的width和height与您的透明PNG图片的宽高比匹配，或者使用background-size的cover或contain属性来更好地控制图片在容器内的显示方式。
多张图片滚动： 如果需要多张图片同时滚动或不同速度滚动，可以创建多个HTML元素，并为它们定义不同的动画时间和/或动画延迟（animation-delay）。
方向调整：
- 从左到右： 将0%的translateX设置为-100%，100%的translateX设置为100vw。
- 垂直滚动： 使用translateY代替translateX，并相应调整height和vh（视口高度）。
性能： 使用transform进行动画是硬件加速的，因此通常具有良好的性能。避免动画width、height、top、left等属性，因为它们会导致布局重排，影响性能。
响应式设计： vw和%单位都是响应式的，它们会根据视口大小自动调整，因此这个方案天然具有一定的响应性。
可访问性： 对于纯装饰性的图片滚动，可访问性影响较小。如果滚动内容包含重要信息，应考虑提供非动画版本或暂停/播放控件。

总结

通过CSS的@keyframes和transform属性，我们可以优雅地实现单张透明图片在视口内的无限循环滚动效果，完美替代了已废弃的<marquee>标签。这种方法不仅提供了更好的性能和可访问性，也更符合现代Web标准，为开发者提供了强大的视觉表现力。通过调整动画时长、图片尺寸和定位，您可以轻松定制出符合项目需求的各种滚动效果。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《透明视口滚动动画实现技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。