使用CSS动画实现单张透明图片视口滚动效果

<div class="ship-marquee"></div>

2. CSS样式

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

27

查看详情

接下来是关键的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%状态，再次从右侧开始移动，从而形成一个无缝的循环滚动效果。

优化与注意事项

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

总结

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