当前位置：首页 > 文章列表 > 文章 > 前端 > CSS伪元素动画：transition与before/after实战应用

CSS伪元素动画：transition与before/after实战应用

2025-12-05 21:55:02 0浏览收藏

伪元素基础回顾

::before 和 ::after 是CSS中的两个常用伪元素，它们允许你在元素内容前或后插入生成的内容。这类内容不会出现在DOM中，但可在样式层面渲染图形或文本。

关键点：

必须设置 content: ""; 才能生效
默认为行内元素，常配合 position 定位使用
可独立设置颜色、尺寸、变换等样式

transition 配合 :hover 实现平滑过渡

将伪元素与 transition 结合，常用于按钮悬停效果。

示例：创建一个带下划线生长动画的链接

.link {
  position: relative;
  text-decoration: none;
  color: #000;
  transition: color 0.3s;
}

.link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: blue;
  transition: width 0.3s ease;
}

.link:hover::after {
  width: 100%;
}

鼠标移入时，::after 的宽度从0扩展到100%，形成线条拉伸效果，transition 让过程更自然。

animation 控制伪元素动态表现

对于复杂或自动播放的动画，使用 @keyframes 更合适。

常见场景：加载指示器、光效扫过、呼吸灯效果。

示例：按钮点击时出现波纹扩散动画

.btn {
  position: relative;
  padding: 10px 20px;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.btn:active::after {
  animation: ripple 0.6s ease-out forwards;
}

@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.8;
  }
  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}

利用 :active 触发动画，::after 模拟墨水波纹效果，增强交互反馈。

多层伪元素叠加创意效果

一个元素最多使用两个伪元素（::before、::after），合理布局可模拟阴影、边框、背景图案等。

示例：卡片悬停时浮现发光边框

.card {
  position: relative;
  width: 200px;
  height: 120px;
  background: #111;
  transition: all 0.3s;
}

.card::before,
.card::after {
  content: '';
  position: absolute;
  inset: 2px;
  border: 2px solid transparent;
  border-radius: 8px;
  pointer-events: none;
}

.card::before {
  background: linear-gradient(45deg, #ff7a00, #9c42f5) border-box;
  clip-path: inset(0);
}

.card::after {
  background: linear-gradient(45deg, #f54291, #00d8ff) border-box;
  clip-path: inset(0 0 0 0 round 8px);
  opacity: 0;
  transition: opacity 0.3s;
}

.card:hover::after {
  opacity: 1;
}

这里用两个伪元素分别承载不同渐变色，悬停时外层渐变显现，营造霓虹光晕感。

基本上就这些。掌握伪元素与动画的协作方式，能让你用更简洁的代码实现更具表现力的UI效果。关键是理解生成内容的定位逻辑和动画触发机制。

今天关于《CSS伪元素动画：transition与before/after实战应用》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于animation,Transition,::after,CSS伪元素,::before的内容请关注golang学习网公众号！

animation Transition ::after CSS伪元素 ::before