当前位置：首页 > 文章列表 > 文章 > 前端 > CSS伪元素平滑过渡技巧

CSS伪元素平滑过渡技巧

2025-11-03 14:10:38 0浏览收藏

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《CSS伪元素动画实现平滑过渡效果》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

使用::before和::after伪元素结合transition与@keyframes，可在不改变HTML结构的前提下实现悬停提示、动态边框、波浪线等流畅动画效果，通过控制初始状态与目标状态的过渡，并优先采用transform和opacity以提升性能，确保动画自然且高效。

CSS伪元素和动画结合如何实现平滑效果_before after动画应用

在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); }
}