如何实现图片与文本的同步轮播切换效果？

核心思路 #

之前用CSS content 仅能实现文本切换，无法嵌入图片，因此改用容器嵌套轮播项的方式：将所有图片+文本组合放入一个容器，通过CSS动画控制容器垂直位移，实现两者同步轮播，每3秒切换一次，总时长设为12秒（4个内容项×3秒）。

完整代码实现 #

HTML 结构 #

<h1>
  Use <span class="flex flexrow rotate-container">
    <div class="rotate-items">
      <div class="item">
        <img src="./images/gsheet.svg" alt="Google表格">
        <span>Google表格</span>
      </div>
      <div class="item">
        <img src="./images/gnote.svg" alt="Google笔记">
        <span>Google笔记</span>
      </div>
      <div class="item">
        <img src="./images/gdoc.svg" alt="Google文档">
        <span>Google文档</span>
      </div>
      <div class="item">
        <img src="./images/gslide.svg" alt="Google幻灯片">
        <span>Google幻灯片</span>
      </div>
    </div>
  </span> and speed up your business.
</h1>

CSS 样式 #

/* 保持图片与文本横向排列 */
.flex.flexrow {
  display: flex;
  align-items: center;
  gap: 0.5em; /* 图片和文本的间距，可按需调整 */
}

/* 轮播容器：固定高度，溢出隐藏 */
.rotate-container {
  height: 1.2em; /* 与单个轮播项高度一致 */
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}

/* 轮播项容器：通过位移动画实现切换 */
.rotate-items {
  animation: rotate 12s linear infinite; /* 4项×3秒=12秒总时长 */
}

/* 单个轮播项：统一高度与布局 */
.rotate-items .item {
  height: 1.2em;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

/* 动画关键帧：每个阶段对应一个轮播项的显示位置 */
@keyframes rotate {
  0%, 20% {
    transform: translateY(0); /* 显示第一个项 */
  }
  25%, 45% {
    transform: translateY(-100%); /* 显示第二个项 */
  }
  50%, 70% {
    transform: translateY(-200%); /* 显示第三个项 */
  }
  75%, 95% {
    transform: translateY(-300%); /* 显示第四个项 */
  }
  100% {
    transform: translateY(0); /* 回到初始位置循环 */
  }
}

注意事项 #

1. 替换代码中图片的src路径为你实际的图片地址；
2. 可调整height、gap值适配你的字体大小和图片尺寸；
3. 动画中每个阶段留5%的过渡缓冲（比如0%-20%停留、20%-25%切换），避免切换过于生硬。

内容的提问来源于stack exchange，提问作者Newbie_developer