如何通过css伪类与伪元素制作悬停动画-css教程-PHP中文网

如何通过css伪类与伪元素制作悬停动画

P粉602998670

发布： 2025-10-08 20:39:02

原创

829人浏览过

利用:hover触发状态变化，结合::before/::after创建视觉层，通过transition和transform实现平滑动画，如背景色渐变、滑入遮罩、上浮下划线等效果，关键在于伪元素content设置与定位上下文控制。

如何通过css伪类与伪元素制作悬停动画

通过CSS伪类与伪元素制作悬停动画，可以实现视觉上更丰富且交互性强的效果。核心思路是利用 :hover 伪类触发状态变化，结合伪元素（如 ::before 或 ::after）创建额外的视觉层，再用 transition 或 transform 实现平滑动画。

使用 :hover 触发动画

:hover 是最常见的伪类之一，用于定义鼠标悬停时的样式。配合 transition 可以让属性变化更柔和。

示例：背景色渐变

当用户将鼠标移到按钮上时，背景色从透明变为蓝色，过渡时间为0.3秒。

.button {
  padding: 10px 20px;
  background-color: transparent;
  color: #333;
  border: 2px solid #333;
  transition: background-color 0.3s ease;
}
<p>.button:hover {
background-color: #007bff;
color: white;
}</p>

登录后复制

用 ::before 或 ::after 制作遮罩或装饰效果

伪元素 ::before 和 ::after 能在元素前后插入内容，常用于添加图标、边框或遮罩层。结合定位和透明度控制，可做出滑入、浮现等动画。

示例：悬停时从左滑入背景条

使用 ::after 创建一个隐藏的色块，悬停时向右展开。

.hover-slide::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background-color: #007bff;
  transition: width 0.4s ease;
}
<p>.hover-slide:hover::after {
width: 100%;
}</p>

登录后复制

注意：父元素需设置 position: relative，确保伪元素定位正确。

结合 transform 实现位移动画

利用 transform 配合 opacity，可以让伪元素“飞入”或“淡入”，视觉冲击更强。

Alkaid.art

专门为Phtoshop打造的AIGC绘画插件

153

查看详情

立即学习“前端免费学习笔记（深入）”；

示例：文字下方出现上浮下划线

.underline-effect {
  position: relative;
  display: inline-block;
  padding: 8px 0;
}
<p>.underline-effect::before {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 0;
height: 2px;
background-color: #007bff;
transform: translateX(-50%);
transition: width 0.3s ease;
}</p><p>.underline-effect:hover::before {
width: 100%;
}</p>

登录后复制

增强版：加入 Y 轴位移，让线条从下方“弹起”：

.underline-effect::before {
  /* 其他样式 */
  transform: translateX(-50%) translateY(2px);
  opacity: 0;
}
<p>.underline-effect:hover::before {
width: 100%;
opacity: 1;
transform: translateX(-50%) translateY(0);
transition: all 0.3s ease;
}</p>

登录后复制

基本上就这些。关键是理解 :hover 控制状态，伪元素扩展视觉表现，transition 和 transform 让动画自然。不复杂但容易忽略细节，比如伪元素默认不显示（需设 content），以及定位上下文的建立。

以上就是如何通过css伪类与伪元素制作悬停动画的详细内容，更多请关注php中文网其它相关文章！