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

我们今天访问的几乎所有网站都使用某种文本动画来与用户互动。通常，所有类型的文本动画都是使用普通的或普通的 JavaScript 或使用一些第三方 JavaScript 库制作的。但是有一些动画可以只使用 CSS 来制作。其中之一是更改文字文本动画。在这种类型的动画中，选择一个词在一定的时间间隔后改变。这是一个稍旧的动画，是十年前使用的最早的文本动画之一。

方法：方法是使用关键帧在某一帧改变单词。可以使用 content 属性设置单词。

HTML 代码：在本节中，我们将标题包裹在

标签中。我们还有一个跨度，稍后将使用 CSS 填充。

  

    
    
    

  

    
I love  

  

CSS 代码：

• 第 1 步：做一些基本的样式，如背景颜色、文本颜色、边距、填充等。
• 第 2 步：现在，使用 before select/or 将 span 的内容设置为初始单词。
• 第 3 步：使用 animation 属性设置动画的总时间。
• 第 4 步：现在，使用关键帧更改在每个帧的选择器之前设置的内容属性。

提示：您可以根据需要设置总时间。但一般情况下，建议使用的时间是您要更改的单词总数的倍数。就像在我们的例子中一样，我们有三个词，我们使用了 3s 作为总时间。您可以使用 6、9、12……等等。将时间设置为单词总数的倍数将确保每个单词显示的时间相等。

完整代码：是以上两段代码的组合。

  

    
    
    
      
    

  

    
I love  

  

输出：