本文详细介绍了如何利用css动画实现一个图像在视口内无限循环滚动的效果，作为已废弃的`marquee`标签的现代替代方案。通过`@keyframes`定义动画路径，结合`transform: translatex()`精确控制元素位置，使图像能够平滑地从视口右侧移动到左侧并无限重复，同时提供了具体的html和css代码示例及关键属性解析，帮助开发者轻松实现这一视觉效果。
在现代Web开发中，为了实现元素（如图像或文本）在页面上连续滚动的效果，我们不再推荐使用已废弃的标签。虽然实现简单，但它不符合Web标准，且存在可访问性问题。幸运的是，CSS动画提供了一个强大且灵活的替代方案，能够以更优雅、更符合标准的方式实现相同的视觉效果，例如让一个透明PNG图像在视口中无限循环移动。
核心原理：CSS动画与位置变换
实现图像无限循环滚动的核心在于利用CSS的@keyframes规则和transform属性。我们通过定义动画的关键帧，让元素在指定时间内从一个位置平移到另一个位置，并设置动画无限循环。
初始定位： 将图像元素定位在视口右侧完全不可见的位置。终点定位： 将图像元素移动到视口左侧完全不可见的位置。动画循环： 设置动画无限次重复执行，形成循环滚动的效果。
实现步骤与代码示例
以下是使用HTML和CSS实现一个透明图像（例如一艘船的PNG图片）在视口中无限循环滚动的具体步骤和代码。
1. HTML结构
首先，我们需要一个HTML元素来承载我们的图像。这里我们使用一个div元素，并通过CSS将其背景设置为所需的透明PNG图像。
立即学习“前端免费学习笔记（深入）”；
CSS图像滚动示例
2. CSS样式
接下来，在style.css文件中定义ship-marquee类的样式，包括图像的尺寸、定位以及关键的动画属性。
/* style.css */body { margin: 0; overflow-x: hidden; /* 防止滚动条出现 */}.ship-marquee { width: 120px; /* 船的宽度，根据实际图片调整 */ height: 80px; /* 船的高度，根据实际图片调整 */ background-image: url('path/to/your/ship.png'); /* 替换为你的透明PNG图片路径 */ background-size: contain; /* 确保图片完整显示在div内 */ background-repeat: no-repeat; /* 防止图片重复 */ background-position: center; /* 图片居中显示 */ position: fixed; /* 固定在视口，不随页面滚动 */ top: 50px; /* 距离视口顶部的距离，可调整 */ /* left: 0; */ /* 动画会控制水平位置，此处可省略或设为0 */ z-index: 100; /* 确保船在其他内容之上 */ /* 应用动画 */ animation: marquee-move 15s linear infinite forwards;}/* 定义动画关键帧 */@keyframes marquee-move { 0% { transform: translateX(100vw); /* 动画开始时，船完全位于视口右侧之外 */ } 100% { transform: translateX(-100%); /* 动画结束时，船完全位于视口左侧之外（-100%是自身宽度） */ }}
代码解析：
.ship-marquee：width 和 height：设置图像容器的尺寸，应与你的PNG图片尺寸相匹配或按比例调整。background-image：指向你的透明PNG图片路径。background-size: contain; 和 background-repeat: no-repeat;：确保背景图片能正确显示且不重复。position: fixed;：使元素相对于视口定位，不随页面滚动。top: 50px;：定义元素距离视口顶部的垂直位置。z-index: 100;：确保滚动图像位于其他页面内容之上。animation: marquee-move 15s linear infinite forwards;：这是应用动画的关键。marquee-move：动画的名称，对应@keyframes的名称。15s：动画持续时间，表示从起点到终点所需的时间。linear：动画的过渡函数，表示动画以恒定速度进行。infinite：动画无限次重复。forwards：动画结束后，元素将保持在动画结束时的状态（虽然对于无限循环动画来说不那么关键，但良好的习惯）。@keyframes marquee-move：0% { transform: translateX(100vw); }：动画的起始状态。translateX(100vw)表示元素向右平移了视口宽度的100%，使其完全位于视口右侧之外。100% { transform: translateX(-100%); }：动画的结束状态。translateX(-100%)表示元素向左平移了自身宽度的100%，使其完全位于视口左侧之外。
关键属性与注意事项
transform: translateX()： 这是实现水平移动的核心。100vw：表示视口宽度的100%。使用vw单位可以确保动画在不同视口宽度下都能正确地从屏幕外开始。-100%：表示元素自身宽度的-100%。这使得元素完全移出左侧边界，保证了无缝循环。position: fixed;： 如果希望滚动图像始终停留在视口中的特定位置，而不受页面滚动影响，则使用fixed。如果希望它在某个容器内滚动，则可使用position: absolute;并将其父元素设置为position: relative;。overflow-x: hidden;： 在body或包含容器上设置此属性，可以防止在动画过程中出现水平滚动条。图片尺寸与性能： 确保使用的PNG图片尺寸适中，过大的图片会影响页面加载性能。透明PNG通常比JPEG文件大，应进行适当优化。动画速度与平滑度： 调整animation-duration（如15s）可以改变滚动速度。linear过渡函数使动画平滑且匀速。多元素滚动： 如果需要多个图像滚动，可以复制ship-marquee元素并调整它们的top值，或者错开它们的animation-delay，以实现不同步的滚动效果。
总结
通过CSS动画，我们能够以现代、标准且高性能的方式实现图像的无限循环滚动效果，完美替代了已废弃的标签。这种方法不仅提供了更精细的控制，还增强了网页的可访问性和兼容性。掌握CSS动画的@keyframes和transform属性，是前端开发者实现丰富动态效果的必备技能。
以上就是纯CSS实现视口内图像无限循环滚动教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1596167.html
微信扫一扫 
支付宝扫一扫 
