css tab 平滑切换

CSS Tab平滑切换是网站设计中常用的交互效果之一，也是提高用户体验的有效手段。实现这一效果，需要结合HTML和CSS来完成。下面我们就来一步步学习它的实现过程。

.tab {
  display: flex;  /* 设置为flex布局 */
  justify-content: space-around;  /* 均分空间 */
  width: 100%;   /*  宽度占满父元素 */
  margin: 0;    /* 重置margin */
  padding: 0;   /* 重置padding */
  list-style: none;   /* 去除列表样式 */
}

.tab li {
  position: relative;   /* 设置相对定位 */
  margin: 0;  /* 重置margin */
  padding: 0;  /* 重置padding */
  width: 100%;  /* 宽度占满父元素 */
}

.tab li a {
  display: block;  /* 设置为块级元素 */
  padding: 10px 0;  /* 设置上下边距 */
  text-align: center;  /* 文字居中 */
  text-decoration: none;  /* 去除下划线 */
  color: #333;  /* 字体颜色为黑色 */
  background-color: #f3f3f3;  /* 背景颜色为灰色 */
  transition: all ease 0.3s;  /* 定义过渡效果 */
}

.tab li.active a {
  background-color: #fff;  /* 当前选中项背景色为白色 */
  color: #f00;  /* 当前选中项字体颜色为红色 */
  z-index: 1;  /* 当前选中项z-index提高 */
}

.tab li:after {
  content: "";  /* 设置内容为空 */
  position: absolute;  /* 设置绝对定位 */
  bottom: 0;  /* 距离底部0px */
  left: 0;  /* 距离左侧0px */
  width: 100%;  /* 宽度占满 */
  height: 2px;  /* 设置底部边框高度为2px */
  background-color: #f00;  /* 背景颜色为红色 */
  transform: scaleX(0);  /* 默认不显示 */
  transform-origin: center;  /* 设置transform原点为中心 */
  transition: all ease 0.3s;  /* 定义过渡效果 */
}

.tab li.active:after {
  transform: scaleX(1);  /* 当前选中项底部边框显示 */
}

通过以上的CSS代码，我们实现了Tab平滑切换的效果。注意，在HTML代码中，需要为选项卡添加一个active类，并将其设置为默认选中项。使用JavaScript或jQuery实现选项卡的切换即可。