CSS Tab选中背景色动画效果：实现滑动切换

您可以使用CSS的transition和transform属性来实现选中tab背景色滑动的动画效果。以下是一个示例代码：

HTML:

<div class="tabs">
  <div class="tab">Tab 1</div>
  <div class="tab">Tab 2</div>
  <div class="tab">Tab 3</div>
</div>

CSS:

.tabs {
  display: flex;
}

.tab {
  padding: 10px;
  background-color: white;
  transition: transform 0.3s;
  cursor: pointer;
}

.tab.active {
  background-color: black;
}

.tab.slide {
  transform: translateX(-100%);
}

JavaScript:

const tabs = document.querySelectorAll('.tab');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    tabs.forEach(otherTab => {
      if (otherTab !== tab) {
        otherTab.classList.remove('active');
        otherTab.classList.add('slide');
      }
    });
    
    tab.classList.remove('slide');
    tab.classList.add('active');
  });
});

以上代码会给每个tab添加一个click事件监听器。当点击一个tab时，会移除其他选中tab的active类，并给它们添加slide类来实现滑动效果。然后，移除当前点击的tab的slide类，并给它添加active类来设置选中背景色。这样就实现了未选中的tab被选中时，其他选中tab背景色滑动到当前选中的效果。