📌  相关文章
📜  如何使用 HTML 和 CSS 创建加载模糊文本动画效果?

📅  最后修改于: 2021-11-07 07:50:33             🧑  作者: Mango

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

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

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



  

    
    
    GeeksforGeeks

  

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

CSS 代码:

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

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



  

    
    
          
    Document
    

  

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

输出: