使用 CSS 加载文本动画效果

CSS 可以为网页添加许多动画效果，其中包括文本动画效果。本文将介绍一些常用的 CSS 文本动画效果。

1. 下划线动画

这是一种常见的文本动画效果，可以给文本添加一条下划线，并在鼠标悬停时显示。下面是实现这种效果的 CSS 代码：

a {
  position: relative;
  text-decoration: none;
}

a:hover::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 2px;
  background-color: black;
  transition: height 0.3s;
}

a:hover::after {
  height: 10px;
}

2. 空心字效果

这种效果可以让文本看起来像空心字，且在鼠标悬停时填充。下面是实现这种效果的 CSS 代码：

h1 {
  font-size: 3rem;
  position: relative;
  text-transform: uppercase;
  font-family: sans-serif;
  color: #333;
}

h1::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  border: 2px solid #333;
  transition: transform 0.3s;
  transform: scale3d(0, 1, 1);
}

h1:hover::before {
  transform: scale3d(1, 1, 1);
}

3. 颜色渐变动画

这种效果可以让文本的颜色在鼠标悬停时渐变。下面是实现这种效果的 CSS 代码：

a {
  text-decoration: none;
  background-image: linear-gradient(white, white);
  background-position: 0 80%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  color: black;
  transition: background-size 0.3s, color 0.3s;
}

a:hover {
  background-size: 100% 2px;
  color: white;
}

以上是比较常用的文本动画效果，当然还有其他种类，可以根据实际需要进行相应的实现。

参考链接：

• 30 cool CSS Animations You Have To See
• Animate.css
• CSS Text Animations