css animation图片跑马灯无限循环

CSS动画中的图片跑马灯效果通常通过`animation`属性实现，可以创建一种图片逐帧显示并无限循环的效果。以下是实现这种效果的基本步骤：

1. 首先，在HTML中设置一组需要轮播的图片作为元素，比如`<img>`标签，并给每个图片分配唯一的ID或class。

<img id="slide1" src="image1.jpg">
<img id="slide2" src="image2.jpg">
<img id="slide3" src="image3.jpg">

2. 在CSS中，创建一个新的关键帧动画（@keyframes），指定每张图片应该停留的时间以及动画如何从一张过渡到下一张：

@keyframes carousel {
  0% { opacity: 1; transform: translateX(0); }
  50% { opacity: 0; transform: translateX(-100%); }
  100% { opacity: 1; transform: translateX(0); /* 图片会回到初始位置 */ }
}

这里的`translateX(-100%)`是让图片向左移动完全出屏幕，然后返回到原来的位置实现无缝切换。

3. 接下来，将这个动画应用到图片上，并设置动画的周期、延迟和其他属性使其无限循环：

#slide1, #slide2, #slide3 {
  display: none; /* 隐藏所有图片 */
  animation-duration: 4s; /* 动画持续时间，例如4秒显示一轮 */
  animation-iteration-count: infinite; /* 设置动画无限次循环 */
  animation-direction: alternate; /* 可选，使每轮方向相反 */
  animation-timing-function: linear; /* 可选，平滑动画速度 */
}

#slide1.active {
  display: block;
  animation-name: carousel;
  animation-delay: 0s; /* 初始图片立即开始动画 */
}

4. 使用JavaScript或者jQuery控制图片的显示隐藏，当切换到下一张时添加或移除`.active`类，激活相应的动画。

当用户浏览页面时，你可以编写脚本动态改变`.active`类，使得图片看起来像是自动轮播。