本教程旨在指导开发者如何利用纯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，稍后可以将其背景设置为图片。
CSS图片滚动动画
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，效果会更佳。
代码解析与关键点
-
.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 应与图片宽高比匹配，或根据需要调整 */ }如果你希望使用
标签而不是背景图片，HTML结构会是：
@@##@@相应的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动画是前端开发中的一项基本技能，它能帮助我们创建出更具吸引力和交互性的用户界面。鼓励读者在此基础上进行实验，探索更多有趣的动画效果。
