使用::before和::after伪元素结合transition与@keyframes，可在不改变html结构的前提下实现悬停提示、动态边框、波浪线等流畅动画效果，通过控制初始状态与目标状态的过渡，并优先采用transform和opacity以提升性能，确保动画自然且高效。
在css中，伪元素 ::before 和 ::after 能够为元素添加额外的视觉层，而无需增加HTML结构。结合css动画，可以实现丰富且平滑的视觉效果，比如悬停提示、动态边框、渐显遮罩等。关键在于合理使用 transition 和 @keyframes，并控制伪元素的初始与目标状态。
利用 transition 实现平滑的 before/after 动画
通过 transition 可以让伪元素的属性变化更自然，例如透明度、位置或尺寸的变化过程变得流畅。
常见做法是将伪元素默认设为不可见（如 opacity: 0），在 hover 时变为可见（opacity: 1），并用 transition 控制过渡时间。
- 设置伪元素的初始状态为隐藏或缩放为0
- 使用 transition 定义变化属性和持续时间，如
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) - 在父元素 hover 时触发伪元素的显示或位移
示例：创建一个按钮，悬停时从左侧滑出背景条纹
立即学习“前端免费学习笔记（深入）”；
<button class="hover-btn">Hover me</button> <style> .hover-btn { position: relative; padding: 12px 24px; background: none; border: 2px solid #007bff; color: #007bff; overflow: hidden; cursor: pointer; } .hover-btn::before { content: ''; position: absolute; left: -100%; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, #007bff, transparent); transition: left 0.5s ease; z-index: -1; } .hover-btn:hover::before { left: 100%; } </style>
使用 @keyframes 制作循环动画
对于需要连续播放的动画，比如呼吸光效、加载指示器，可使用 @keyframes 配合伪元素实现。
此时不需要用户交互，动画自动运行，适合用在 loading 状态或强调元素上。
- 定义关键帧动画，控制 opacity、transform 或背景位置
- 将动画应用到 ::before 或 ::after 伪元素
- 使用
animation属性设置时长、延迟、重复方式
示例：文本下方波浪线动画
.animated-underline { position: relative; display: inline-block; padding-bottom: 6px; } .animated-underline::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #ff5722; transform: scaleX(0); transform-origin: center; animation: waveLine 1.5s infinite ease-in-out; } @keyframes waveLine { 0%, 100% { transform: scaleX(0.3); } 50% { transform: scaleX(1); } }
优化动画性能与视觉体验
虽然伪元素动画灵活，但不当使用可能导致重绘频繁或卡顿。建议关注以下几点：
- 优先使用
transform和opacity，它们由GPU加速，性能更好 - 避免对
left、top等触发布局重排的属性做高频动画 - 设置
will-change: transform可提升复杂动画的渲染效率 - 控制动画持续时间，一般 0.3s–0.6s 更符合用户感知流畅性
基本上就这些。合理利用 ::before 和 ::after 结合 transition 或 keyframes，能做出简洁又高级的动效，关键是控制好状态变化节奏和性能平衡。
暂无评论