纯CSS打造双层Tab代码

使用纯CSS来创建双层Tab切换效果通常涉及利用伪元素、定位以及状态选择器等技巧。下面是一个简单的示例，展示如何实现基本的双层Tab导航：

HTML:

<ul class="tabs">
  <li class="tab active">Tab 1</li>
  <li class="tab">Tab 2</li>
  <li class="tab">Tab 3</li>
</ul>

<div class="content">
  <div class="active-content">内容 1</div>
  <div class="inactive-content">内容 2</div>
  <div class="inactive-content">内容 3</div>
</div>

CSS:

.tabs {
  display: flex;
}

.tab {
  position: relative;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.tab:hover,
.tab.active {
  background-color: #ccc;
}

.tab::before,
.tab::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  bottom: -2px;
}

.tab::before {
  transform: translateX(-50%);
}

.tab.active::before {
  background-color: #fff;
}

.tab.active::after {
  opacity: 0.5;
  transform: translateY(6px) rotate(45deg);
  left: 50%;
  transform-origin: center bottom;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.active-content {
  display: block;
  border-top: none;
}

.inactive-content {
  display: none;
  border-top: 1px solid lightgray;
}

在这个例子中，`.tab`是导航项，`:hover`和`:active`用于改变其背景色。`::before` 和 `::after` 用于创建下划线样式，`:active::after` 则在激活状态下添加动画效果。