字体展开动画

简介

在网页设计中，动态字体效果可以极大地增强用户体验，使文本更具吸引力。在本篇博客中，我们将实现一个字体展开动画，当鼠标悬停时，字体的字重（weight）、宽度（width）和字间距（letter-spacing）会发生变化，创造出流畅的动画效果。

最终效果

代码解析

1. 选择可变字体（Variable Font）

本示例使用 Google Fonts 提供的 Smooch Sans 字体，它支持字重（wght）和宽度（wdth）的变化。

font-variation-settings:
  'wght' var(--wght),
  'wdth' var(--wdth);

这些自定义属性允许我们动态调整字体的粗细和宽度，形成平滑的动画效果。

2. 变量化 CSS 动画

.animated-text {
  --wght: 100;
  --wdth: 100;
  --letter-spacing: 0;
}

.animated-text:hover {
  --wght: 600;
  --wdth: 300;
  --letter-spacing: 0.6rem;
}

这里，我们使用 CSS 变量 控制字体的变化。当鼠标悬停时，字重增大、字宽变宽，同时字母之间的间距也会变大。

3. 过渡效果（Transition）

.animated-text .letter {
  transition:
    font-variation-settings 1s ease-in-out,
    letter-spacing 2s ease-in-out;
}

font-variation-settings 1s ease-in-out：1 秒内平滑改变字体字重和宽度。
letter-spacing 2s ease-in-out：字母间距变化持续 2 秒，增强动画的流畅度。

结语

这段代码展示了一种优雅的字体动画方式，利用 CSS 变量和可变字体特性，使文本在悬停时产生动态变化。你可以尝试替换不同的字体、调整动画参数，创造更具个性化的效果！

希望这篇博客对你有所帮助！🚀