如何使用 HTML 和 CSS 创建加载模糊文本动画效果？

模糊文本动画被称为 Smoky 效果，它用于为我们的文本提供模糊动画。文本在一个方向上线性模糊，然后重新出现。

方法：本文的方法很简单。我们正在使用 blur()函数为模糊效果设置动画。然后我们使用第 n 个子属性来应用动画延迟。现在让我们直接进入代码。

HTML 代码：我们创建了一个 div 元素，加载的文本字符被包裹在一个 span 元素中。

  

    
    
    

  

    

        G
        e
        e
        k
        s
        f
        o
        r
        G
        e
        e
        k
        s
    

  

CSS 代码：

• 第 1 步：第一步很简单，我们将文本居中对齐，并为我们的身体提供背景。
• 步骤 2：然后我们提供了一个关键帧标识符为animate的线性动画。
• 第 3 步：现在我们使用关键帧将模糊函数应用于动画的不同帧。
• 第 4 步：最后一步是应用第 n 个子概念为每个字符提供动画延迟，以便在某个时间点只有一个字符变得模糊。

完整代码：在本节中，我们将结合以上两节来创建加载文本动画效果。

  

    
    
          
    
    

  

    

        G
        e
        e
        k
        s
        f
        o
        r
        G
        e
        e
        k
        s
    

  

输出：