本文详细阐述如何利用现代css动画技术，替代已废弃的`marquee`标签，实现单张透明图片在视口中无限循环、平滑滚动的效果。通过深入理解`@keyframes`规则和`transform`属性，配合`vw`和`%`单位的灵活运用，可以高效且优雅地创建出高性能的图片滚动动画，确保兼容性和用户体验。
告别传统跑马灯：现代Web动画的必要性
在Web开发的早期，MARQUEE标签曾被用来实现文本或图片的滚动效果。尽管其使用简单，能快速实现视觉上的移动，但由于其非标准、语义缺失以及对可访问性和性能的负面影响，该标签早已被W3C废弃，不建议在生产环境中使用。对于希望在网页上实现类似“单张透明图片在视口中无限循环滚动”的需求，现代Web标准提供了更强大、更灵活且性能更优的解决方案——CSS动画。
CSS动画允许开发者以声明式的方式定义元素的过渡和动画效果，无需JavaScript即可实现复杂的交互和视觉表现。本文将专注于利用CSS的@keyframes规则和transform属性，精确复刻MARQUEE标签所能提供的单图无限循环滚动效果。
核心原理：CSS animation 与 transform
实现图片无限循环滚动的核心在于结合@keyframes定义动画序列，并通过animation属性将其应用到目标元素上。其中，transform属性的translateX()函数将是控制元素水平位移的关键。
- @keyframes 规则：用于定义动画的各个阶段（或称“关键帧”）。在每个关键帧中，我们可以指定元素的CSS属性值。动画将在这D些关键帧之间平滑过渡。
-
transform: translateX()：这个CSS函数用于在X轴（水平方向）上移动元素。
- 正值会将元素向右移动。
- 负值会将元素向左移动。
- 单位可以是像素（px）、百分比（%）或视口宽度单位（vw）。
- animation 属性：将@keyframes定义的动画应用到元素上，并控制动画的持续时间、速度曲线、循环次数等。
实现步骤
我们将通过一个简单的示例来展示如何让一张图片（这里用一个蓝色的div代替）从视口右侧完全移入，然后向左滚动直至完全移出，并无限循环。
立即学习“前端免费学习笔记（深入）”；
1. HTML 结构
首先，我们需要一个承载滚动元素的HTML容器。这里我们使用一个简单的div，并为其指定一个类名，例如ship。在实际应用中，这个div的背景可以是一张透明的PNG图片。
<div class="ship"></div>
2. CSS 样式定义
接下来，我们为.ship元素定义基础样式和动画行为。
.ship {
width: 30px; /* 图片宽度 */
height: 20px; /* 图片高度 */
background: blue; /* 示例背景，实际应用中可替换为 background-image */
position: fixed; /* 固定定位，使其不随页面滚动 */
top: 0; /* 距离视口顶部位置 */
left: 0; /* 初始左侧定位，动画将基于此进行 transform */
animation: move 10s linear infinite forwards; /* 应用动画 */
}
/* 实际使用透明PNG图片时，可以这样设置： */
/*
.ship {
width: 100px;
height: 50px;
background-image: url('path/to/your/transparent-ship.png');
background-size: contain;
background-repeat: no-repeat;
position: fixed;
top: 50px; /* 假设在页面中部滚动 */
left: 0;
animation: move 15s linear infinite forwards;
}
*/关键属性解释：
- position: fixed;：使元素相对于视口定位，不随页面滚动而移动。
- top: 0; left: 0;：设置元素的初始定位点，transform将在此基础上进行位移。
- animation: move 10s linear infinite forwards;：
- move：引用下面定义的@keyframes动画名称。
- 10s：动画持续时间为10秒。
- linear：动画速度曲线，表示动画从开始到结束匀速进行。
- infinite：动画无限循环。
- forwards：动画结束后，元素将保持最后一个关键帧的样式。
3. 定义动画关键帧 (@keyframes)
现在，我们定义名为move的动画关键帧，控制元素从视口右侧移动到左侧。
@keyframes move {
0% {
transform: translateX(100vw); /* 动画开始：元素位于视口最右侧，完全不可见 */
}
100% {
transform: translateX(-100%); /* 动画结束：元素向左移动，直至完全离开视口左侧 */
}
}关键点解析：
-
0% { transform: translateX(100vw); }：
- 100vw 表示视口宽度的100%。当translateX的值为100vw时，元素会将自身左边缘定位在视口右边缘，使其完全处于视口之外的右侧。这是动画的起点。
-
100% { transform: translateX(-100%); }：
- -100% 表示元素自身宽度的-100%。当translateX的值为-100%时，元素会向左移动，使其右边缘与初始left: 0的位置对齐，从而使整个元素完全离开视口左侧。这是动画的终点。
通过这种设置，元素将从视口右侧（完全不可见）开始，向左移动，穿过整个视口，最终从视口左侧（完全不可见）消失，形成一个完美的无限循环滚动效果。
完整代码示例
将上述HTML和CSS代码整合，即可实现单张图片无限循环滚动。
<!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>
<style>
body {
margin: 0;
overflow: hidden; /* 防止滚动条出现 */
min-height: 100vh; /* 确保body有足够高度 */
background-color: #f0f0f0;
}
.ship {
width: 80px; /* 调整图片宽度 */
height: 40px; /* 调整图片高度 */
/* 实际应用中请替换为你的透明PNG图片路径 */
background-image: url('https://picsum.photos/id/237/80/40'); /* 示例图片，可替换 */
background-size: contain;
background-repeat: no-repeat;
position: fixed;
top: 50px; /* 调整图片在视口中的垂直位置 */
left: 0; /* 动画起点基于此 */
animation: move 15s linear infinite forwards; /* 调整动画速度 */
z-index: 100; /* 确保图片在其他内容之上 */
}
@keyframes move {
0% {
transform: translateX(100vw); /* 从视口右侧完全隐藏处开始 */
}
100% {
transform: translateX(-100%); /* 移动到视口左侧完全隐藏处结束 */
}
}
/* 页面其他内容，用于演示滚动效果不会影响布局 */
.content {
padding: 100px 20px;
text-align: center;
font-family: sans-serif;
color: #333;
}
</style>
</head>
<body>
<div class="ship"></div>
<div class="content">
<h1>欢迎来到我的网站</h1>
<p>这是一段示例内容，上方有图片正在滚动。</p>
<p>使用CSS动画替代了废弃的marquee标签。</p>
</div>
</body>
</html>进阶与注意事项
- 图片替换：将示例中的background: blue;或background-image: url('...')替换为你的透明PNG图片路径。确保图片尺寸与.ship的width和height属性匹配，或者使用background-size: contain/cover来适应。
-
速度与方向：
- 调整animation-duration（例如15s）可以控制滚动速度，值越小速度越快。
- 如果需要从左向右滚动，可以将@keyframes修改为：
@keyframes move-right { 0% { transform: translateX(-100%); } /* 从左侧隐藏处开始 */ 100% { transform: translateX(100vw); } /* 移动到右侧隐藏处结束 */ }并相应修改animation属性。
- 垂直位置：通过调整.ship的top或bottom属性来控制图片在视口中的垂直位置。
- 多张图片滚动：如果需要多张图片同时滚动，可以创建多个.ship元素，并为它们设置不同的animation-delay，以错开它们的出场时间。
- 性能优化：transform属性的动画是硬件加速的，因此性能通常很好。避免在动画中使用会触发布局（layout）或绘制（paint）的属性（如width, height, left, top等），transform是首选。
- 可访问性：对于装饰性的背景动画，通常不需要特殊的可访问性处理。但如果动画内容对理解页面至关重要，应考虑提供替代方案。
总结
通过CSS的@keyframes和transform属性，我们可以轻松、高效地实现单张透明图片在视口中的无限循环滚动效果，完美替代了已废弃的marquee标签。这种方法不仅符合现代Web标准，提供了更好的性能和灵活性，也使得开发者能够更精细地控制动画的每一个细节。掌握这些CSS动画技巧，将有助于创建更具吸引力和交互性的网页体验。
