::before和::after伪元素通过配合transition和@keyframes可创建不改变HTML结构的动画效果，如按钮悬停遮罩、文字下划线、脉冲提示等，提升用户体验；利用content创建虚拟层并结合position、transform等属性实现平滑过渡与复杂动画，同时需注意性能优化与可访问性，避免过度使用复杂动画造成卡顿，并支持prefers-reduced-motion以适配用户偏好。
在现代网页设计中，CSS 伪元素 ::before 和 ::after 不仅用于添加装饰性内容，还能与动画结合实现视觉上更丰富的效果。通过配合 transition（过渡）和 @keyframes（关键帧），可以创建出平滑、动态的交互反馈，提升用户体验。
使用 ::before 和 ::after 创建动画基础
伪元素本身不可见，但一旦设置了 content: “” 并定义尺寸或背景，它们就成为可样式化的“虚拟”元素。这使得它们非常适合用作动画层，而不影响 HTML 结构。
常见用途包括：
按钮悬停时的遮罩或光效文字下方的滑动下划线图标周围的波纹或高亮
由于它们是“附加”层，可以独立控制其显示、位置和动画状态。
立即学习“前端免费学习笔记（深入）”；
结合 transition 实现平滑过渡
利用 transition 可以让伪元素在状态变化时产生渐进式动画。例如，当鼠标悬停在按钮上时，::before 元素从一侧滑入作为背景高亮。
.button {
position: relative;
padding: 12px 24px;
background: #fff;
border: 2px solid #007acc;
color: #007acc;
overflow: hidden;
transition: color 0.3s;
}
.button::before {
content: “”;
position: absolute;
left: -100%;
top: 0;
width: 100%;
height: 100%;
background: #007acc;
transition: left 0.4s ease;
}
.button:hover::before {
left: 0;
}
.button:hover {
color: #fff;
}
在这个例子中，::before 初始位于左侧外部，hover 时滑入覆盖按钮，实现背景填充动画，同时文字颜色平滑切换。
闪念贝壳
闪念贝壳是一款AI 驱动的智能语音笔记，随时随地用语音记录你的每一个想法。
218 查看详情
使用 @keyframes 创建复杂动画
对于更复杂的视觉效果，比如加载指示器、脉冲光环或打字动画，可以结合 @keyframes 让伪元素执行预定义动画序列。
例如，为通知图标添加脉冲提示：
.notification {
position: relative;
display: inline-block;
}
.notification::after {
content: “”;
position: absolute;
top: -4px;
right: -4px;
width: 10px;
height: 10px;
background: red;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% {
transform: scale(0.8);
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
}
70% {
transform: scale(1.2);
box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
}
100% {
transform: scale(0.8);
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
}
}
这里 ::after 创建了一个红色小圆点，并通过关键帧不断放大外阴影，形成“扩散-收缩”的脉冲效果，常用于未读提示。
优化与注意事项
虽然伪元素动画灵活，但也需注意性能和可访问性：
避免对大量元素同时启用复杂动画，防止页面卡顿使用 transform 和 opacity 进行动画更高效，因它们不触发重排为动画添加 will-change 或使用 contain: layout 可提升渲染性能考虑关闭动画的用户偏好（prefers-reduced-motion）
例如：
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
基本上就这些。合理使用 ::before 和 ::after 配合动画，能在不增加 DOM 节点的前提下，实现轻量而生动的视觉反馈。
以上就是CSS伪元素::before和::after在动画中的应用_平滑过渡与关键帧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/976219.html
微信扫一扫 
支付宝扫一扫 
