模糊文本动画被称为 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
输出: