实现含关键词的Div左移动画及轮播关键词点击交互功能

嘿，作为后端开发突然要啃前端动画需求确实有点挠头，我帮你整理了一套完整的实现方案，代码直接就能用，改改关键词和描述就行～

先把你的需求拆成几个核心点，逐个击破：

• 关键词组左移动画：用CSS @keyframes + 容器位移实现流畅过渡
• 点击切换+描述联动：JS绑定点击事件，同步切换关键词激活状态和对应描述
• 响应式布局：用Flexbox + 媒体查询适配不同屏幕尺寸
• 无缝滚动视觉效果：复制一份关键词放在容器末尾，动画结束后重置位置，避免跳帧

HTML结构 #

<div class="keyword-carousel-container">
  <!-- 关键词滚动容器，复制一份关键词实现无缝视觉效果 -->
  <div class="keywords-wrapper">
    <div class="keyword-item active">Keyword_A</div>
    <div class="keyword-item">Keyword_B</div>
    <div class="keyword-item">Keyword_C</div>
    <div class="keyword-item">Keyword_A</div>
    <div class="keyword-item">Keyword_B</div>
    <div class="keyword-item">Keyword_C</div>
  </div>
  <!-- 描述展示区域 -->
  <div class="description-container">
    <div class="description active">关键词A的描述</div>
    <div class="description">关键词B的描述</div>
    <div class="description">关键词C的描述</div>
  </div>
</div>

CSS样式（含动画+响应式） #

/* 基础容器：居中+响应式宽度 */
.keyword-carousel-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
  font-family: system-ui, sans-serif;
}

/* 关键词滚动容器：隐藏溢出内容，只显示一组关键词 */
.keywords-wrapper {
  display: flex;
  overflow: hidden;
  gap: 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #e5e7eb;
  cursor: pointer;
}

/* 关键词项：固定占比宽度，防止压缩 */
.keyword-item {
  flex: 0 0 31%; /* 三个关键词刚好填满容器，留一点间隙 */
  text-align: center;
  padding: 0.6rem 0;
  transition: color 0.3s, font-weight 0.3s;
}

/* 激活状态关键词样式 */
.keyword-item.active {
  color: #2563eb;
  font-weight: 600;
}

/* 左移动画定义 */
@keyframes slideLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* 触发动画的类 */
.keywords-wrapper.slide {
  animation: slideLeft 0.6s ease-in-out forwards;
}

/* 描述区域：默认隐藏，只显示激活项 */
.description-container {
  margin-top: 1.2rem;
}

.description {
  display: none;
  line-height: 1.6;
  color: #374151;
}

.description.active {
  display: block;
}

/* 响应式适配：小屏幕调整关键词宽度 */
@media (max-width: 600px) {
  .keyword-item {
    flex: 0 0 48%;
  }
}

JS交互逻辑 #

const keywordsWrapper = document.querySelector('.keywords-wrapper');
const keywordItems = document.querySelectorAll('.keyword-item');
const descriptions = document.querySelectorAll('.description');

// 给每个关键词绑定点击事件
keywordItems.forEach((item, index) => {
  item.addEventListener('click', () => {
    // 计算真实关键词索引（因为复制了一份，取模3）
    const realIndex = index % 3;

    // 移除所有元素的激活状态
    keywordItems.forEach(i => i.classList.remove('active'));
    descriptions.forEach(d => d.classList.remove('active'));

    // 设置当前关键词和描述为激活状态
    keywordItems[realIndex].classList.add('active');
    descriptions[realIndex].classList.add('active');

    // 触发左移动画，动画结束后重置容器位置实现无缝循环
    keywordsWrapper.classList.add('slide');
    setTimeout(() => {
      keywordsWrapper.classList.remove('slide');
      // 把第一个关键词移到容器末尾，重置位移
      const firstItem = keywordsWrapper.firstElementChild;
      keywordsWrapper.appendChild(firstItem);
    }, 600); // 时间要和CSS动画时长保持一致
  });
});

• 无缝滚动：通过复制关键词组放在容器末尾，动画结束后把第一个元素移到末尾，视觉上完全没有跳帧感
• 响应式适配：用Flex的百分比宽度+媒体查询，在手机上自动调整关键词显示数量
• 动画流畅度：用CSS动画而非JS操控样式，性能更好，过渡更丝滑
• 交互逻辑：点击任意关键词都会触发动画，并同步切换对应描述，完全符合你的需求

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