CSS悬停动画制作教程详解

本文深入讲解了如何运用CSS的:hover伪类、::before/::after伪元素以及transition和transform属性，高效实现丰富多样的悬停动画效果——从简洁的背景色渐变、滑入式遮罩，到富有动感的上浮下划线，不仅揭示了每种效果的核心代码逻辑与视觉原理，更强调了content必设、父容器需relative定位等易被忽视却至关重要的实践细节，让开发者轻松掌握既美观又高性能的纯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>

结合 transform 实现位移动画

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

.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>

.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），以及定位上下文的建立。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~