使用 HTML 和 CSS 创建字母间距动画效果

htmlcssweb developmentfront end technology更新于 2025/2/16 8:12:17

在本文中，我们将使用 HTML 和 CSS 创建字母间距动画效果。为此，我们使用 CSS letter-spacing 属性和 CSS @keyframes 规则。

CSS Letter-spacing 属性

CSS 中的 letter-spacing 属性用于设置文本字符之间的水平间距。

如果我们为此属性赋值为正值，字符间距将会扩大。
如果我们为此属性赋值为负值，字符间距将会缩小。

语法

以下是 CSS letter-spacing 属性的语法 -

letter-spacing: value;

CSS @keyframes 规则

在 CSS 中，@keyframes 规则可用于通过定义关键帧的样式来控制 CSS 动画序列中的即时步骤。样式变化将以百分比形式发生，或者使用关键字"from"和"to"，这相当于 0% 和 100%。 0% 被视为动画的开始，100% 被视为动画的结束。

语法

以下是 CSS @keyframes 规则的语法 -

@keyframes slidein {
   from {
      transform: translateX(0%);
   }

   to {
      transform: translateX(100%);
   }
}

以下是使用 HTML 和 CSS 创建字母间距动画效果的步骤。

步骤 1 − 添加以下 HTML 代码。

在正文部分，我们使用段落 <p> 标签创建两个简单的文本。

<body>
   <p class="animated-text1">TUTORIALSPOINT</p>
   <p class="animated-text2">Simply Easy Learning...</p>
</body>

步骤 2 - 添加以下 CSS 代码。

为了给上述两个文本创建字母间距动画，我们使用 CSS letter-spacing 属性和 CSS @keyframes 规则。

<style>
body{
 background: lightblue;
}
/* 文本的 CSS */
.animated-text1 {
   font-size: 50px;
   font-weight: bold;
   color: whitesmoke;
   animation: letter-spacing-animation 1s infinite alternate;
   text-align: center;
}
.animated-text2 {
   font-size: 25px;
   color: whitesmoke;
   animation: letter-spacing-animation 1s infinite alternate;
   text-align: center;
}
/* CSS 动画关键帧 */
@keyframes letter-spacing-animation {
   0% {
      letter-spacing: 0px;
   }
   50%{
      letter-spacing: 10px;
   }
   100% {
      letter-spacing: 20px;
   }
}
</style>

完整示例

现在，将上述两个 HTML 和 CSS 代码块组合如下 -

<!DOCTYPE html>
<html>
<head>
   <title>Letter-Spacing Animation Effect</title>
   <style>
      body {
         background: lightblue;
      }
      /* 文本的 CSS */
      .animated-text1 {
         font-size: 50px;
         font-weight: bold;
         color: whitesmoke;
         animation: letter-spacing-animation 1s infinite alternate;
         text-align: center;
      }
      .animated-text2 {
         font-size: 25px;
         color: whitesmoke;
         animation: letter-spacing-animation 1s infinite alternate;
         text-align: center;
      }
      /* CSS 动画关键帧 */
      @keyframes letter-spacing-animation {
         0% {
            letter-spacing: 0px;
         }
         50% {
            letter-spacing: 10px;
         }
         100% {
            letter-spacing: 20px;
         }
      }
   </style>
</head>
<body>
   <p class="animated-text1">TUTORIALSPOINT</p>
   <p class="animated-text2">Simply Easy Learning...</p>
</body>
</html>