本文详细介绍了如何使用现代html和css技术，替代已废弃的`marquee`标签，实现单张透明图片在视口内无限循环滚动的效果。通过css `animation`和`transform`属性，您可以轻松创建一个平滑、性能优异的图片横向移动动画，并提供了详细的代码示例、属性解析及自定义指南。
在网页开发中，我们有时需要实现元素在页面上循环滚动的效果，例如一个标志或一个装饰性图片。过去，开发者可能会倾向于使用HTML的标签来实现这一功能。然而，标签已被废弃，因为它存在诸多问题，包括对可访问性的不良影响、性能低下以及在现代浏览器中的不一致行为。为了实现一个平滑且符合标准的图片视口滚动效果，我们应该转而使用CSS动画。
使用CSS动画实现图片视口滚动
CSS动画提供了一种强大而灵活的方式来创建各种动态效果，包括元素的移动、缩放、旋转和透明度变化等。要实现单张透明图片在视口内无限循环滚动，我们将主要利用@keyframes规则和transform属性。
核心原理
实现图片从右侧进入视口，向左侧移动直至消失，然后再次从右侧出现的无限循环效果，其核心思想是：
初始定位： 将图片元素定位在视口右侧完全不可见的位置。动画过程： 定义一个动画，使图片从初始位置平滑移动到视口左侧完全不可见的位置。循环播放： 将此动画设置为无限循环。
步骤详解与代码示例
我们将以一个“船只”的透明PNG图片为例，演示如何实现其在视口顶端从右向左的无限滚动。
立即学习“前端免费学习笔记（深入）”；
1. HTML结构
首先，我们需要一个HTML元素作为我们图片的容器。为了简洁和灵活性，我们通常使用一个
2. CSS样式
接下来是关键的CSS部分。我们将为.ship-marquee类定义样式，包括图片设置、定位和动画属性。
.ship-marquee { /* 图片尺寸 */ width: 100px; /* 根据实际图片大小调整 */ height: 60px; /* 根据实际图片大小调整 */ /* 设置背景图片为透明PNG船只 */ background-image: url('path/to/your/transparent-ship.png'); /* 替换为你的图片路径 */ background-size: contain; /* 确保图片完整显示在容器内 */ background-repeat: no-repeat; /* 防止图片重复 */ background-position: center; /* 图片居中显示 */ /* 元素定位：固定在视口顶部，使其可以脱离文档流进行动画 */ position: fixed; top: 0; left: 0; /* 初始left设为0，通过transform控制实际位置 */ z-index: 1000; /* 确保船只在其他内容之上 */ /* 动画属性 */ animation: moveShip 20s linear infinite; /* 动画名称 持续时间 动画曲线 循环次数 */}/* 定义动画关键帧 */@keyframes moveShip { 0% { /* 初始状态：将船只定位在视口右侧，完全离开视口 */ /* 100vw 表示视口宽度的100%，将元素右边缘与视口右边缘对齐 */ transform: translateX(100vw); } 100% { /* 结束状态：将船只移动到视口左侧，完全离开视口 */ /* -100% 表示元素自身宽度的-100%，确保整个元素移出左侧 */ transform: translateX(-100%); }}
代码解析：
.ship-marquee 样式：
width, height: 定义了图片容器的尺寸。请根据您的透明PNG图片实际尺寸进行调整，以避免图片拉伸或显示不全。background-image: 设置您的透明PNG图片路径。background-size: contain;, background-repeat: no-repeat;, background-position: center;: 这些属性确保背景图片在容器内正确显示，不会重复，并且居中。position: fixed; top: 0; left: 0;: 将元素固定在视口的左上角。position: fixed使得元素脱离文档流，并相对于视口进行定位，这对于实现全屏范围内的滚动至关重要。z-index: 1000;: 确保滚动图片在页面其他内容之上，防止被遮挡。animation: moveShip 20s linear infinite;: 这是启动动画的关键。moveShip: 动画的名称，必须与@keyframes规则中定义的名称一致。20s: 动画完成一次循环所需的时间。这个值决定了船只的移动速度，值越小速度越快。linear: 动画的计时函数，表示动画以恒定速度进行，没有加速或减速。infinite: 动画将无限次循环播放。
@keyframes moveShip 规则：
0%: 定义动画开始时的状态。transform: translateX(100vw); 将元素沿X轴向右平移100个视口宽度。这意味着元素的左边缘将与视口的右边缘对齐，使其完全位于视口之外。100%: 定义动画结束时的状态。transform: translateX(-100%); 将元素沿X轴向左平移其自身宽度的100%。这意味着元素的右边缘将与视口的左边缘对齐，使其完全离开视口。
通过这种方式，当动画从0%到100%执行时，船只将从视口右侧外移动到视口左侧外。由于infinite属性，当动画到达100%时，它会立即跳回0%状态，再次从右侧开始移动，从而形成一个无缝的循环滚动效果。
优化与注意事项
速度调整： 更改animation属性中的时间值（例如20s）可以调整船只的移动速度。值越小，移动越快。图片尺寸与容器： 确保.ship-marquee的width和height与您的透明PNG图片的宽高比匹配，或者使用background-size的cover或contain属性来更好地控制图片在容器内的显示方式。多张图片滚动： 如果需要多张图片同时滚动或不同速度滚动，可以创建多个HTML元素，并为它们定义不同的动画时间和/或动画延迟（animation-delay）。方向调整：从左到右： 将0%的translateX设置为-100%，100%的translateX设置为100vw。垂直滚动： 使用translateY代替translateX，并相应调整height和vh（视口高度）。性能： 使用transform进行动画是硬件加速的，因此通常具有良好的性能。避免动画width、height、top、left等属性，因为它们会导致布局重排，影响性能。响应式设计： vw和%单位都是响应式的，它们会根据视口大小自动调整，因此这个方案天然具有一定的响应性。可访问性： 对于纯装饰性的图片滚动，可访问性影响较小。如果滚动内容包含重要信息，应考虑提供非动画版本或暂停/播放控件。
总结
通过CSS的@keyframes和transform属性，我们可以优雅地实现单张透明图片在视口内的无限循环滚动效果，完美替代了已废弃的标签。这种方法不仅提供了更好的性能和可访问性，也更符合现代Web标准，为开发者提供了强大的视觉表现力。通过调整动画时长、图片尺寸和定位，您可以轻松定制出符合项目需求的各种滚动效果。
以上就是使用CSS动画实现单张透明图片视口滚动效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1593186.html
微信扫一扫
支付宝扫一扫
