当前位置：首页 > 文章列表 > 文章 > 前端 > CSS伪元素动画：平滑过渡与关键帧技巧

CSS伪元素动画：平滑过渡与关键帧技巧

2025-11-13 15:03:56 0浏览收藏

使用 ::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 时滑入覆盖按钮，实现背景填充动画，同时文字颜色平滑切换。

使用 @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 创建了一个红色小圆点，并通过关键帧不断放大外阴影，形成“扩散-收缩”的脉冲效果，常用于未读提示。