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

在本文中，我们将使用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代码。

在body部分，我们使用

标签创建了两个简单的文本。

<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 for the text */
.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 animation keyframes */
@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 for the text */
      .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 animation keyframes */
      @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>