在前端开发中，实现点击触发DIV滑动动画的需求非常常见，传统方案往往依赖JavaScript监听点击事件后修改元素样式，但实际上仅通过CSS的相关特性就能实现这个效果，不仅可以减少代码量，还能避免脚本带来的性能开销。下面介绍两种主流的纯CSS实现方案。
方案一：利用复选框与相邻兄弟选择器实现
这种方案的核心思路是利用<input type="checkbox">的选中状态变化，结合CSS的相邻兄弟选择器（+）和通用兄弟选择器（~）来触发目标DIV的样式变化，从而实现滑动动画。
实现原理
首先隐藏复选框本身，然后通过关联的<label>标签作为点击触发区域，当复选框被选中时，修改目标DIV的transform或left等属性，配合transition属性实现平滑的滑动过渡效果。
完整代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS点击滑动动画</title>
<style>
/* 隐藏复选框 */
#toggle-checkbox {
display: none;
}
/* 触发按钮样式 */
.trigger-btn {
display: inline-block;
padding: 8px 16px;
background-color: #409eff;
color: white;
border-radius: 4px;
cursor: pointer;
margin-bottom: 10px;
}
/* 初始状态的滑动容器 */
.slide-container {
width: 200px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #ddd;
overflow: hidden;
position: relative;
}
/* 需要滑动的DIV */
.slide-div {
width: 100%;
height: 100%;
background-color: #67c23a;
color: white;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: -200px; /* 初始位置在容器左侧外部 */
transition: left 0.3s ease-in-out; /* 添加过渡动画 */
}
/* 复选框选中时，滑动DIV进入容器 */
#toggle-checkbox:checked ~ .slide-container .slide-div {
left: 0;
}
</style>
</head>
<body>
<input type="checkbox" id="toggle-checkbox">
<label for="toggle-checkbox" class="trigger-btn">点击触发滑动</label>
<div class="slide-container">
<div class="slide-div">我是滑动内容</div>
</div>
</body>
</html>
方案二：利用:target伪类选择器实现
这种方案不需要使用复选框，而是借助URL的锚点机制，通过<a>标签跳转锚点触发:target伪类，从而改变目标DIV的样式实现滑动效果。
实现原理
给目标滑动DIV设置一个唯一的id，点击触发链接时跳转至该id对应的锚点，此时该DIV会匹配:target伪类，修改其位置属性，配合transition实现滑动动画。再次点击其他链接或者关闭链接时，可以重置状态。
完整代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>:target实现滑动动画</title>
<style>
/* 触发按钮样式 */
.trigger-link {
display: inline-block;
padding: 8px 16px;
background-color: #409eff;
color: white;
border-radius: 4px;
text-decoration: none;
margin-bottom: 10px;
}
.close-link {
display: inline-block;
padding: 8px 16px;
background-color: #f56c6c;
color: white;
border-radius: 4px;
text-decoration: none;
margin-bottom: 10px;
margin-left: 10px;
}
/* 滑动容器 */
.slide-container {
width: 200px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #ddd;
overflow: hidden;
position: relative;
}
/* 滑动DIV初始状态 */
.slide-div {
width: 100%;
height: 100%;
background-color: #e6a23c;
color: white;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: -200px;
transition: left 0.3s ease-in-out;
}
/* 锚点匹配时触发滑动 */
.slide-div:target {
left: 0;
}
</style>
</head>
<body>
<a href="#slide-box" class="trigger-link">点击触发滑动</a>
<a href="#" class="close-link">关闭滑动</a>
<div class="slide-container">
<div class="slide-div" id="slide-box">我是滑动内容</div>
</div>
</body>
</html>
两种方案对比
| 对比维度 | 复选框方案 | :target伪类方案 |
|---|---|---|
| 状态切换 | 支持选中/取消选中切换，可反复触发 | 仅能触发一次滑动，关闭需要额外处理 |
| URL变化 | 不会修改URL，无锚点残留 | 会修改URL添加锚点，刷新页面会保持状态 |
| 适用场景 | 开关类滑动交互，如侧边栏展开收起 | 一次性展示类滑动交互，如提示框弹出 |
注意事项
- 使用
transform: translateX()代替left属性实现滑动可以获得更好的性能，因为transform属性不会触发重排，只会触发重绘和合成。 - transition属性需要设置在元素初始状态中，而不是状态变化后的样式中，否则不会出现进入和离开的双向动画。
- 如果滑动内容需要适配不同屏幕尺寸，可以使用百分比单位或者vw/vh单位定义滑动距离，避免固定像素带来的适配问题。
CSS动画transitiontransform伪类选择器修改时间：2026-06-15 02:27:28