css炫酷操作-tab开关

效果图

原理

我们知道tab开关的特点是当前只显示其中一项内容，其余内容不可见，也就是说有目前只有一个“选定”对象，因此我们可以使用 radio 类型的 input 来“捕获”用户点击的 tab；

html

结构很简单，隐藏输入、标签列表、内容列表：

<section class="container">
  <!-- 隐藏的radio（默认选中第一项，id是给label用的） -->
  <input class="nav1" id="nav1" type="radio" name="nav" checked>
  <input class="nav2" id="nav2" type="radio" name="nav">

  <!-- 标签列表 -->
  <ul class="navs">
    <li>
      <label for="li1">标签1</label>
    </li>
    <li>
      <label for="li2">标签2</label>
    </li>
  </ul>

  <!-- 内容列表 -->
  <ul class="contents">
    <li>我是内容1</li>
    <li>我是内容2</li>
  </ul>
</section>
复制代码

css

这里使用的Scss预处理器：代码附加到指定的位置：

// 内容列表
.contents {
  li {
    animation: fade .5s cubic-bezier(0.075, 0.82, 0.165, 1); // 内容切换动画（可选）
  }
}

// 内容切换动画（可选）
@keyframes fade {
  from {
    transform: translateX(20px);
    opacity: 0
  }

  to {
    transform: translateX(0);
    opacity: 1
  }
}

作者：聪明的汤姆
来源：掘金