本文详细介绍了如何使用现代html和css技术，替代已废弃的`marquee`标签，实现单张透明图片在视口内无限循环滚动的效果。通过css `animation`和`transform`属性，您可以轻松创建一个平滑、性能优异的图片横向移动动画，并提供了详细的代码示例、属性解析及自定义指南。
在网页开发中，我们有时需要实现元素在页面上循环滚动的效果，例如一个标志或一个装饰性图片。过去，开发者可能会倾向于使用HTML的<marquee>标签来实现这一功能。然而，<marquee>标签已被废弃，因为它存在诸多问题，包括对可访问性的不良影响、性能低下以及在现代浏览器中的不一致行为。为了实现一个平滑且符合标准的图片视口滚动效果，我们应该转而使用CSS动画。
使用CSS动画实现图片视口滚动
CSS动画提供了一种强大而灵活的方式来创建各种动态效果，包括元素的移动、缩放、旋转和透明度变化等。要实现单张透明图片在视口内无限循环滚动，我们将主要利用@keyframes规则和transform属性。
核心原理
实现图片从右侧进入视口，向左侧移动直至消失，然后再次从右侧出现的无限循环效果，其核心思想是：
- 初始定位： 将图片元素定位在视口右侧完全不可见的位置。
- 动画过程： 定义一个动画，使图片从初始位置平滑移动到视口左侧完全不可见的位置。
- 循环播放： 将此动画设置为无限循环。
步骤详解与代码示例
我们将以一个“船只”的透明PNG图片为例，演示如何实现其在视口顶端从右向左的无限滚动。
立即学习“前端免费学习笔记（深入）”；
1. HTML结构
首先，我们需要一个HTML元素作为我们图片的容器。为了简洁和灵活性，我们通常使用一个<div>标签。
<div class="ship-marquee"></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标准，为开发者提供了强大的视觉表现力。通过调整动画时长、图片尺寸和定位，您可以轻松定制出符合项目需求的各种滚动效果。
