CSS 中有多种方法可以让图片自动运动。其中一种方法是使用动画属性,通过设置不同的关键帧,来让图片在设定的时间内进行运动。 下面是一段示例代码,实现了一个图片向右滑动的动画效果: html { ove
CSS 中有多种方法可以让图片自动运动。其中一种方法是使用动画属性,通过设置不同的关键帧,来让图片在设定的时间内进行运动。 下面是一段示例代码,实现了一个图片向右滑动的动画效果:
html { overflow-x: hidden; } .img { position: absolute; left: 0; top: 0; animation: rightSlide 5s ease-in-out infinite; } @keyframes rightSlide { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } }在上面的代码中,我们首先设置了 HTML 元素的 `overflow-x` 属性为 `hidden`,这是为了防止滚动条出现。 接着,我们给图片设置了 `position: absolute`,让它脱离文档流,并且使用 `left: 0` 和 `top: 0` 把它放在文档的左上角。 然后,我们使用 `animation` 属性来指定动画的名称、持续时间、缓动函数和重复次数。在这个例子中,动画名称为 `rightSlide`,持续时间为 5 秒,缓动函数为 `ease-in-out`,重复次数为 `infinite` 表示永无止境地循环播放。 最后我们定义了 `rightSlide` 动画的关键帧,从初始状态的 `transform: translateX(0)`,移动到终止状态的 `transform: translateX(100%)`。这个动画就是让图片从左到右滑动的效果。
粉丝
0
关注
0
收藏
0