Html 我想在按钮上加些滑出效果

我有四个按钮的基础上，每当我点击一些按钮，它应该滑出背景色的特定按钮

.active{
颜色：白色；
背景颜色：蓝色；
}
钮扣{
背景色：淡蓝色；
颜色：白色；
盒影：无；
边框：1px实心透明；
}

雅芳
比塞里
波利亚达尔
水政治

您可以使用

-webkit transition

函数myFunction（e）{
if（document.querySelector（'#navlista.active'）！==null）{
document.querySelector（'#navlista.active'）.classList.remove（'active'）；
}
e、 target.className=“活动”；
}

.active{
颜色：粉红色；
背景颜色：米色；
箱形阴影：嵌入0-3.25em 0米色；
}
钮扣{
背景色：浅绿色；
颜色：白色；
边框：1px实心透明；
方框阴影：插图0#D80286；
-webkit过渡：减少0.4s；
-moz过渡：放松0.4s；
过渡：放松0.4s；
填充：18px 36px；
}

雅芳
比塞里
波利亚达尔
水政治

为第一个按钮提供css，将其从黄色更改为红色。

函数changecolor（）{
document.getElementById（'color'）.className='className'；
}

.active{
颜色：粉红色；
背景颜色：米色；
}
钮扣{
背景色：浅绿色；
颜色：白色；
盒影：无；
边框：1px实心透明；
}
.类名{
-webkit动画名称：cssAnimation；
-webkit动画持续时间：3s；
-webkit动画迭代计数：1；
-webkit动画计时功能：轻松；
-webkit动画填充模式：正向；
}
@-webkit关键帧cssAnimation{
从{
背景：黄色；
}
到{
背景：红色；
}
}

雅芳 比塞里 波利亚达尔

---

水政治我想向你展示新的风格

*{
边际：0px；
填充：0px；
}
身体{
字体系列：arial；
显示器：flex；
宽度：100vw；
高度：100vh；
证明内容：中心；
对齐内容：居中对齐；
对齐项目：居中；
}
.btn{
宽度：200px；
高度：50px；
线高：50px；
边框：2个实心道奇蓝；
利润率：10px；
位置：相对位置；
光标：指针；
过渡：所有的1容易；
溢出：隐藏；
浮动：左；
}
.btn>a{
文本对齐：居中；
文本转换：大写；
颜色：淡蓝色；
字体大小：粗体；
字体大小：16px；
位置：相对位置；
z指数：1；
过渡：所有的1容易；
文本装饰：无
}
/*滑块*/
.btn:之前{
内容：“；
宽度：100%；
身高：100%；
背景色：淡蓝色；
位置：绝对位置；
过渡：所有的1容易；
}
/*左滑块*/
.btn-z:之前{
排名：0；
左：-210像素；
}
.btn-z:悬停：之前{
左：0；
}
.btn:将鼠标悬停在a上{
颜色：#fff；
}

转换不需要供应商前缀。毫无疑问，您需要旧的支持。不，不，不，悬停，我想根据活动阶段（例如，现在雅芳处于活动状态，bisleri将处于活动状态时，颜色应从雅芳移动到bisleri，如果点击bisleri，则当前您有悬停属性，我希望点击它，其次，背景色应该从活动按钮转换到下一个即将被点击的活动按钮。不，这不是我想要的，我想要它，就像幻灯片一样。如果你看到这个代码，它应该会像前一个活动按钮一样返回，开关正在从活动状态移动到下一个活动状态，我的按钮也会这样。你所做的和我想要的根本不一样。此外，单击“下一步”按钮时，应移除前一状态的活动状态。我们是否可以仅在单击而非悬停时产生此效果