本文详细阐述如何利用现代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元素定义基础样式和动画行为。
.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代码整合，即可实现单张图片无限循环滚动。
CSS 图片无限滚动示例 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; }欢迎来到我的网站
这是一段示例内容，上方有图片正在滚动。
使用CSS动画替代了废弃的marquee标签。
进阶与注意事项
图片替换：将示例中的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动画技巧，将有助于创建更具吸引力和交互性的网页体验。
以上就是使用CSS动画实现单张透明图片无限循环滚动效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1592616.html
微信扫一扫 
支付宝扫一扫 
