如何使用 CSS 创建文本更改动画效果？

在 web 设计中，文本动画是一种流行的设计趋势。使用 CSS 可以轻松地创建各种文本动画效果。本文将介绍如何使用 CSS 创建文本更改动画效果。

1. 使用 CSS transition 属性

CSS 的 transition 属性可以平滑地过渡一个或多个 CSS 属性的值。可以利用这个属性来创建文本更改的动画效果。

<p class="text">Hello World</p>

<style>
  .text {
    transition: color 1s;
  }
  .text:hover {
    color: red;
  }
</style>

上面的代码演示了如何使用 CSS transition 属性创建文本颜色的变化动画效果。当鼠标悬停在文本上时，文本颜色将从默认颜色过渡到红色，并且过渡动画将在 1 秒钟内完成。

2. 使用 CSS animation 属性

CSS 的 animation 属性可以创建更复杂的动画效果。可以使用 animation 属性在文本中应用一系列的关键帧动画。

<p class="text">Hello World</p>

<style>
  .text {
    animation: color-change 5s infinite;
  }
  @keyframes color-change {
    0% {color: red}
    25% {color: blue}
    50% {color: green}
    75% {color: purple}
    100% {color: red}
  }
</style>

上面的代码演示了如何使用 CSS animation 属性创建文本颜色的变化动画效果。在这个例子中，文本将在 5 秒钟内无限循环地从红色、蓝色、绿色、紫色以及再回到红色过渡。

3. 制作打字机效果

可以使用 animation 属性来创建打字机效果。下面的代码演示了如何使用 CSS 动画来模拟打字机效果。

<p class="text">This is a typing effect</p>

<style>
  .text {
    overflow: hidden; /* 隐藏文本标签外的文本 */
    border-right: .15em solid orange; /* 添加光标效果 */
    white-space: nowrap; /* 防止文本折行 */
    animation: typing 3.5s steps(40, end), blink-caret 0.5s step-end infinite;
  }
  @keyframes typing {
    from {
      width: 0;
    }
  }
  @keyframes blink-caret {
    from, to {
      border-color: transparent;
    }
    50% {
      border-color: orange;
    }
  }
</style>

上面的代码将在 3.5 秒钟内模拟打字机效果，并在执行动画的同时添加光标效果。

结论

在 web 设计中，文本动画是一个非常有用的工具，可以帮助创造出更有趣、更吸引人的页面效果。使用 CSS transition 和 animation 属性，可以在 web 页面中创建各种文本动画效果。