本文详细阐述如何利用现代 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图片。 2. CSS 样式定义 接下来，我们为.ship元素定义基础样式和动画行为。 关键属性解释： Eclipse导入Android或其他的JAVA项目的正确方法 WORD版 本文档主要讲述的是Eclipse导入Android或其他的JAVA项目的正确方法；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看 下载 position: fixed;：使元素相对于视口定位，不随页面滚动而移动。 top: 0; left: 0;：设置元素的初始定位点，transform将在此基础上进行位移。 animation: move 10s linear infinite forwards;： move：引用下面定义的@keyframes动画名称。 10s：动画持续时间为10秒。 linear：动画速度曲线，表示动画从开始到结束匀速进行。 infinite：动画无限循环。 forwards：动画结束后，元素将保持最后一个关键帧的样式。 3. 定义动画关键帧 (@keyframes) 现在，我们定义名为move的动画关键帧，控制元素从视口右侧移动到左侧。 关键点解析： 0% { transform: translateX(100vw); } ： 100vw 表示视口宽度的100%。当translateX的值为100vw时，元素会将自身左边缘定位在视口右边缘，使其完全处于视口之外的右侧。这是动画的起点。 100% { transform: translateX(-100%); } ： -100% 表示元素自身宽度的-100%。当translateX的值为-100%时，元素会向左移动，使其右边缘与初始left: 0的位置对齐，从而使整个元素完全离开视口左侧。这是动画的终点。 通过这种设置，元素将从视口右侧（完全不可见）开始，向左移动，穿过整个视口，最终从视口左侧（完全不可见）消失，形成一个完美的无限循环滚动效果。 完整代码示例 将上述HTML和CSS代码整合，即可实现单张图片无限循环滚动。 进阶与注意事项 图片替换 ：将示例中的background: blue;或background-image: url('...')替换为你的透明PNG图片路径。确保图片尺寸与.ship的width和height属性匹配，或者使用background-size: contain/cover来适应。 速度与方向 ： 调整animation-duration（例如15s）可以控制滚动速度，值越小速度越快。 如果需要从左向右滚动，可以将@keyframes修改为： 并相应修改animation属性。 垂直位置 ：通过调整.ship的top或bottom属性来控制图片在视口中的垂直位置。 多张图片滚动 ：如果需要多张图片同时滚动，可以创建多个.ship元素，并为它们设置不同的animation-delay，以错开它们的出场时间。 性能优化 ：transform属性的动画是 硬件加速 的，因此性能通常很好。避免在动画中使用会触发布局（layout）或绘制（paint）的属性（如width, height, left, top等），transform是首选。 可访问性 ：对于装饰性的背景动画，通常不需要特殊的可访问性处理。但如果动画内容对理解页面至关重要，应考虑提供替代方案。 总结 通过CSS的@keyframes和transform属性，我们可以轻松、高效地实现单张透明图片在视口中的无限循环滚动效果，完美替代了已废弃的marquee标签。这种方法不仅符合现代Web标准，提供了更好的性能和灵活性，也使得开发者能够更精细地控制动画的每一个细节。掌握这些CSS动画技巧，将有助于创建更具吸引力和交互性的网页体验。