1. 目标与原理
1.1 全宽滑动动画的定义
在本教程中，我们将实现一个< sterk>子元素在父容器内完成的全宽滑动视觉效果，核心在于让覆盖层沿水平轴从左向右移动，覆盖或揭示容器中的内容。关键点是使子元素的宽度达到100%并通过 transform: translateX() 实现滑动轨迹。
该实现强调纯 CSS解决方案，避免引入额外的 JavaScript 逻辑，确保在不同环境中保持一致的平滑性与可控性。
1.2 实现原理要点
要素结构方面，父容器需要设置 overflow: hidden，以确保滑动过程仅在容器边界内可见。
子元素通常使用 position: absolute 覆盖父容器，宽度设为 100%，初始状态为 transform: translateX(0)，通过 @keyframes 将其平移到 translateX(100%)，从左到右完成一次全宽滑动。
2. 实现步骤与要点
2.1 搭建 HTML 结构
第一步是搭建一个典型的父容器（如卡片）作为载体，确保 position: relative 与 overflow: hidden，以便滑动限定在容器范围内。
第二步添加一个覆盖层作为子元素，覆盖整个容器，并作为动画的承载体，确保它在滑动时保持与父容器同宽。
2.2 定义 CSS 动画关键帧
通过 @keyframes 定义滑动过程，从 translateX(0) 逐帧过渡到 translateX(100%)，让覆盖层从左向右滑出容器。
为动画设置 duration、timing-function、fill-mode，以便在完成后保持最终状态并确保视觉稳定性。
3. 实战示例：完整 HTML 与 CSS
3.1 HTML 结构
下面的结构展示了一个父容器和覆盖层的组合，覆盖层在页面加载时自动执行滑动动画，露出底层内容。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8" /><title>全宽滑动示例</title><style>/* 样式移到下方的 CSS 代码段中 */</style>
</head>
<body><div class="card"><div class="cover" aria-label="滑动覆盖层"></div><div class="content"><h2>卡片标题</h2><p>这是卡片内容。左侧的覆盖层会从左滑出，总结信息。</p></div></div>
</body>
</html>3.2 CSS 样式
核心样式包含父容器的定位与隐藏溢出，以及覆盖层的滑动动画实现。
/* 样式段落：可直接复制到 style 标签中使用 */
.card {position: relative;width: 100%;max-width: 720px;height: 220px;margin: 40px auto;background: #fff;border: 1px solid #ddd;border-radius: 12px;overflow: hidden;box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.card .content {position: relative;padding: 20px;z-index: 1;
}
.card .cover {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(135deg, #2f80ed 0%, #56ccf2 100%);transform: translateX(0);animation: slideOut 3s ease forwards;z-index: 2;
}
/* 从左到右覆盖并滑出容器的动画 */
@keyframes slideOut {from { transform: translateX(0); }to { transform: translateX(100%); }
}
运行效果在“加载时”即可看到覆盖层从左滑出，逐步露出底层内容。若需要在悬停时重新触发，可以在 .card:hover .cover 上应用同样的 animation。
3.3 运行效果与注意点
该实现不需要 JavaScript，仅靠 CSS 的变换与关键帧即可实现稳定的全宽滑动效果。
需要注意的是，覆盖层的颜色、透明度以及阴影效果会影响底部内容的可读性，建议在滑动前后保持足够的对比度。
4. 可定制化选项
4.1 调整动画时长
可以通过修改 animation-duration 来控制滑动速度，例如 2s、3s 等，数值越大越慢。
为统一管理，可以引入 CSS 变量，例如 --slide-time: 2.5s，在 @keyframes 与 animation 处统一应用。
4.2 改变覆盖颜色与透明度
覆盖层的背景可以改为不同颜色或半透明效果，使用 background、opacity 或组合渐变实现不同视觉风格，请确保 文字内容在覆盖层滑出后仍可清晰阅读。
若需要更复杂的视觉效果，可以用 linear-gradient 与透明度相结合来实现渐变覆盖，仍保持全宽滑动的核心逻辑。
5. 兼容性与技巧
5.1 浏览器兼容性
现代浏览器对 transform、translateX、keyframes 的支持很好，极少数老旧浏览器可能需要回退方案。
为提升无障碍性，可以在媒体查询中引入 prefers-reduced-motion，在检测到用户偏好时禁用或简化动画，提升可访问性。
5.2 性能与实现技巧
尽量让覆盖层使用 transform 实现滑动，而避免频繁修改 left、top，以利用 GPU 加速降低抖动。
对于多场景复用，可以将覆盖层封装成可复用的 CSS 类，结合自定义属性来快速调整颜色、时长和方向。
