请求实现按钮背景色滑出切换效果（含4个按钮的基础代码）

嘿，我来帮你搞定这个按钮的滑出切换效果！咱们可以通过CSS伪元素+过渡动画，配合简单的JavaScript来实现这个需求，下面是完整的实现方案：

第一步：修正HTML的小错误 #

你原来的代码里第一个按钮的闭合标签写错了（</utton>应该是</button>），先修正这个问题：

<html>
<head>
  <style>
    /* 这里放咱们的CSS代码 */
  </style>
</head>
<body>
  <button class="active">Avon</button>
  <button>Biseri</button>
  <button>Poliadal</button>
  <button>Aqualitical</button>
</body>
</html>

第二步：编写带滑出效果的CSS #

我们用伪元素::before来创建滑动的背景层，通过transition实现平滑的滑出动画，具体代码如下：

/* 按钮基础样式 */
button {
  background-color: dodgerblue;
  color: white;
  box-shadow: none;
  border: 1px solid transparent;
  padding: 8px 16px;
  margin: 0 4px;
  position: relative;
  overflow: hidden; /* 隐藏超出按钮的伪元素 */
  cursor: pointer;
  transition: color 0.3s ease;
}

/* 滑动背景伪元素 */
button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%; /* 初始在按钮左侧外面 */
  width: 100%;
  height: 100%;
  background-color: blue;
  transition: left 0.3s ease;
  z-index: -1; /* 把背景放在文字下面 */
}

/* 激活状态的文字样式 */
button.active {
  color: white;
}

/* 激活时让伪元素滑入 */
button.active::before {
  left: 0;
}

第三步：添加JavaScript交互逻辑 #

我们需要给每个按钮绑定点击事件，点击时移除其他按钮的active类，给当前点击的按钮添加active类：

// 获取所有按钮元素
const buttons = document.querySelectorAll('button');

// 遍历每个按钮添加点击事件
buttons.forEach(button => {
  button.addEventListener('click', () => {
    // 先移除所有按钮的active类
    buttons.forEach(btn => btn.classList.remove('active'));
    // 给当前点击的按钮添加active类
    button.classList.add('active');
  });
});

效果自定义小技巧 #

• 如果你想要从右侧滑入的效果，只需要把伪元素的初始位置改成right: -100%，激活时改成right: 0即可
• 想要调整滑出速度？修改transition里的0.3s数值就行，数值越大动画越慢

这样就实现了你想要的背景色滑出切换效果啦！

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