滑动标签页是网页中常见的交互组件，通过纯CSS实现可以避免依赖JavaScript，减少代码复杂度，同时保证动画的流畅性。实现的核心思路是通过隐藏的radio输入框或者:target伪类控制标签页的激活状态，配合CSS过渡和变形属性实现内容区域的滑动效果。
基础布局搭建
首先需要搭建标签页的基本结构，包含标签导航区域和对应的内容区域。导航区域使用无序列表实现，每个导航项对应一个内容面板，所有内容面板放在同一个容器中，方便统一控制滑动。
<div class="tab-container">
<!-- 标签导航 -->
<ul class="tab-nav">
<li><label for="tab1">标签一</label></li>
<li><label for="tab2">标签二</label></li>
<li><label for="tab3">标签三</label></li>
</ul>
<!-- 隐藏的radio控制状态 -->
<input type="radio" id="tab1" name="tab" checked>
<input type="radio" id="tab2" name="tab">
<input type="radio" id="tab3" name="tab">
<!-- 内容面板容器 -->
<div class="tab-content-wrapper">
<div class="tab-content">标签一的内容区域</div>
<div class="tab-content">标签二的内容区域</div>
<div class="tab-content">标签三的内容区域</div>
</div>
</div>
核心CSS样式配置
导航区域样式
导航区域需要设置为水平排列，去掉默认的列表样式，同时给激活状态的标签添加特殊样式，让用户能明确当前选中的是哪个标签。
.tab-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
border-bottom: 1px solid #e5e5e5;
}
.tab-nav li {
flex: 1;
text-align: center;
}
.tab-nav label {
display: block;
padding: 12px 0;
cursor: pointer;
color: #333;
transition: color 0.3s;
}
/* 隐藏radio输入框 */
input[name="tab"] {
display: none;
}
/* 选中状态对应的标签样式 */
#tab1:checked ~ .tab-nav li:nth-child(1) label,
#tab2:checked ~ .tab-nav li:nth-child(2) label,
#tab3:checked ~ .tab-nav li:nth-child(3) label {
color: #1890ff;
border-bottom: 2px solid #1890ff;
}
内容区域滑动实现
内容容器需要设置为弹性布局，所有内容面板水平排列，容器宽度为每个面板宽度乘以面板数量，通过transform: translateX()属性移动容器位置，实现滑动效果，同时添加transition属性让滑动过程更平滑。
.tab-content-wrapper {
display: flex;
width: 300%; /* 3个面板，每个占100%宽度 */
transition: transform 0.3s ease;
}
.tab-content {
width: 33.333%; /* 每个面板占容器宽度的1/3 */
padding: 20px;
box-sizing: border-box;
}
/* 根据选中的radio控制容器滑动位置 */
#tab1:checked ~ .tab-content-wrapper {
transform: translateX(0);
}
#tab2:checked ~ .tab-content-wrapper {
transform: translateX(-33.333%);
}
#tab3:checked ~ .tab-content-wrapper {
transform: translateX(-66.666%);
}
优化技巧
- 可以给导航标签的激活状态添加过渡动画，让底部边框的出现更自然，避免突兀的样式变化。
- 如果标签页数量不固定，可以通过CSS变量动态计算内容容器的宽度和滑动距离，提升代码的复用性。
- 添加
will-change: transform属性可以提示浏览器提前优化变形动画的渲染，减少动画卡顿。
完整示例代码
以下是完整的可运行代码，直接复制到HTML文件中即可查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS滑动标签页</title>
<style>
.tab-container {
width: 600px;
margin: 50px auto;
font-family: sans-serif;
}
.tab-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
border-bottom: 1px solid #e5e5e5;
}
.tab-nav li {
flex: 1;
text-align: center;
}
.tab-nav label {
display: block;
padding: 12px 0;
cursor: pointer;
color: #333;
transition: color 0.3s;
}
input[name="tab"] {
display: none;
}
#tab1:checked ~ .tab-nav li:nth-child(1) label,
#tab2:checked ~ .tab-nav li:nth-child(2) label,
#tab3:checked ~ .tab-nav li:nth-child(3) label {
color: #1890ff;
border-bottom: 2px solid #1890ff;
}
.tab-content-wrapper {
display: flex;
width: 300%;
transition: transform 0.3s ease;
will-change: transform;
}
.tab-content {
width: 33.333%;
padding: 20px;
box-sizing: border-box;
}
#tab1:checked ~ .tab-content-wrapper {
transform: translateX(0);
}
#tab2:checked ~ .tab-content-wrapper {
transform: translateX(-33.333%);
}
#tab3:checked ~ .tab-content-wrapper {
transform: translateX(-66.666%);
}
</style>
</head>
<body>
<div class="tab-container">
<input type="radio" id="tab1" name="tab" checked>
<input type="radio" id="tab2" name="tab">
<input type="radio" id="tab3" name="tab">
<ul class="tab-nav">
<li><label for="tab1">标签一</label></li>
<li><label for="tab2">标签二</label></li>
<li><label for="tab3">标签三</label></li>
</ul>
<div class="tab-content-wrapper">
<div class="tab-content">
<h3>第一个标签页</h3>
<p>这是标签一对应的内容区域，这里可以放置任意网页内容。</p>
</div>
<div class="tab-content">
<h3>第二个标签页</h3>
<p>这是标签二对应的内容区域，滑动切换的效果由CSS的transform和transition实现。</p>
</div>
<div class="tab-content">
<h3>第三个标签页</h3>
<p>这是标签三对应的内容区域，纯CSS实现不需要依赖任何JavaScript代码。</p>
</div>
</div>
</div>
</body>
</html>
CSS滑动标签页tab切换transitiontransform修改时间：2026-07-19 00:54:34