【开发小技巧】024—如何使用HTML和CSS创建加载模糊文本动画效果？-技术圈

【开发小技巧】024—如何使用HTML和CSS创建加载模糊文本动画效果？

web前端开发 |

420

2020-08-06 08:05

英文 | https://www.geeksforgeeks.org/how-to-create-loading-blur-text-animation-effect-using-html-and-css/?ref=rp

翻译 | web前端开发

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

方法：本文的方法非常简单。我们正在使用blur（）函数对模糊效果进行动画处理。然后，我们使用第n个子属性来应用动画延迟。现在，让我们直接看一下代码。

HTML代码：我们创建了一个div元素，并将加载文本字符包装在span元素内。

  
                  "width=device-width, initial-scale=1.0" />     GeeksforGeeks  
              G         e         e         k         s         f         o         r         G         e         e         k         s

CSS代码：

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

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

  
                  "width=device-width, initial-scale=1.0" /> 
    Document       
              G         e         e         k         s         f         o         r         G         e         e         k         s

输出：

【开发小技巧】024—如何使用HTML和CSS创建加载模糊文本动画效果？

添加附言

相关文章推荐