在 Flexbox 布局中如何实现滑动门效果？
在介绍如何实现滑动门效果之前，让我们先来了解一下 Flexbox 布局。
Flexbox布局是CSS3新增的一种布局模式，它可以轻松实现响应式布局、自适应布局和多列等布局方式。Flexbox布局非常灵活，可以方便地操控元素的排列方向、对齐方式和排序等。在实际开发中，Flexbox布局已得到广泛的应用。
那么，何为滑动门效果呢？滑动门效果是指通过动态改变轮廓、背景图片的方式来实现按钮的交互效果，通过这种效果，可以让用户更加明确地知道哪个按钮被选中了。
接下来我们就来看一下如何借助Flexbox布局来实现滑动门效果。
一、HTML结构
<div class="wrapper"> <button class="active">按钮1</button> <button>按钮2</button> <button>按钮3</button> </div>
二、CSS样式
-- -------------------- ---- ------- -------- - -------- ----- --------------- ---------------- -------------- ------------ ------- --- ----- ----- -------- ----- -------------- ---- - ------ - ----------------- ------------ ------- ----- ---------- ----- --------------- ---------- -------- ----- ------- -------- ----------- --- ----- - ------------- - ------ ----- ----------------- -------- ----------------- ----------------------- ------- ---- ----------- ----- -------------------- - ----- ---------------- ---- ----- - ------------------------- - ------ ----- ----------------- -------- ----------------- ----------------------- ------- ---- ----------- ----- -------------------- - ----- ---------------- ---- ----- -展开代码
三、CSS解析
设置父元素.wrapper为flex布局，并且通过justify-content属性设置主轴对齐方式为space-between，这样按钮元素就可以自动的分散排列。
设置按钮元素button样式：
（1）通过background-color属性将按钮元素的背景色设置为透明，这样就可以隐藏按钮的背景颜色。
（2）通过border属性设置按钮元素的边框，这里去掉了所有的边框，代码为border:none。
（3）通过font-size属性设置按钮元素的字体大小。
（4）通过text-transform属性将按钮元素的文本转换为大写字母。
（5）通过outline属性去掉按钮元素的边框。
（6）通过cursor属性将按钮元素的鼠标指针设置为手型。
（7）通过transition属性设置按钮元素的渐变效果，这里设置时间为0.3s。
- 设置按钮元素的激活样式.button.active：
（1）通过color属性设置按钮元素的字体颜色为白色。
（2）通过background-color属性设置按钮元素的背景颜色为#1269DB。
（3）通过background-image属性设置按钮元素的背景图片为线性渐变图片，起点颜色为#1269DB，终点颜色为透明。
（4）通过background-position属性设置按钮元素的背景图片位置为0 100%，通过这个样式可以实现背景图片的动态滑动效果。
（5）通过background-size属性设置按钮元素的背景图片大小，这里设置为200% auto，则表示背景图片的宽度是当前元素宽度的2倍（即在当前元素内同时存在两张图片，通过移动背景图片来实现动画效果）。
- 设置非激活样式的按钮元素button:not(.active):hover：
（1）通过color属性设置按钮元素的字体颜色为白色。
（2）通过background-color属性设置按钮元素的背景颜色为#1269DB。
（3）通过background-image属性设置按钮元素的背景图片为线性渐变图片，起点颜色为#1269DB，终点颜色为透明。
（4）通过background-position属性设置按钮元素的背景图片位置为0 100%。
（5）通过background-size属性设置按钮元素的背景图片大小，这里设置为200% auto。
至此，我们就成功地实现了Flexbox布局下的滑动门效果。通过这个案例，我们可以清晰地了解到Flexbox布局的强大之处。同时也说明了仅仅只要一点点CSS样式代码的编写，就能实现非常优秀的交互效果。
完整代码如下：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------------------------- ------- -------- - -------- ----- ---------------- -------------- ------- --- ----- ----- -------- ----- -------------- ---- - ------ - ----------------- ------------ ------- ----- ---------- ----- --------------- ---------- -------- ----- ------- -------- ----------- --- ----- - ------------- - ------ ----- ----------------- -------- ----------------- ----------------------- ------- ---- ----------- ----- -------------------- - ----- ---------------- ---- ----- - ------------------------- - ------ ----- ----------------- -------- ----------------- ----------------------- ------- ---- ----------- ----- -------------------- - ----- ---------------- ---- ----- - -------- ------- ------ ---- ---------------- ------- --------------------------- -------------------- -------------------- ------ ------- -------展开代码
上文给出了完整的实现代码，同时也对CSS样式进行了详细的介绍和解析。希望这篇文章对前端工程师们能够提供一些借鉴和参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c2bf49314edc2684c3ffad
