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

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

翻译 | web前端开发

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

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

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

<!DOCTYPE html> 
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>GeeksforGeeks</title>
</head>

<body>
<div class="geeks">
<span>G</span>
<span>e</span>
<span>e</span>
<span>k</span>
<span>s</span>
<span>f</span>
<span>o</span>
<span>r</span>
<span>G</span>
<span>e</span>
<span>e</span>
<span>k</span>
<span>s</span>
</div>
</body>

</html>
CSS代码:
步骤1:第一步很简单,我们将文本居中对齐并为我们的身体提供背景。

步骤2:然后,我们提供了一个线性动画,其关键帧标识符为animate。

步骤3:现在我们使用关键帧将模糊功能应用于动画的不同帧。

步骤4:最后一步是应用第n个子概念为每个角色提供动画延迟,以便在一个时间点只有一个角色变得模糊。

<style>
body {
margin: 0;
padding: 0;
background: green;
}

.geeks {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
font-weight: 800;
letter-spacing: 5px;
}

.geeks span {
animation: animate 3s linear infinite;
}

.geeks span:nth-child(1) {
animation-delay: 0s;
}

.geeks span:nth-child(2) {
animation-delay: 0.1s;
}

.geeks span:nth-child(3) {
animation-delay: 0.2s;
}

.geeks span:nth-child(4) {
animation-delay: 0.3s;
}

.geeks span:nth-child(5) {
animation-delay: 0.4s;
}

.geeks span:nth-child(6) {
animation-delay: 0.5s;
}

.geeks span:nth-child(7) {
animation-delay: 0.6s;
}

.geeks span:nth-child(8) {
animation-delay: 0.9s;
}

.geeks span:nth-child(9) {
animation-delay: 0.8s;
}

.geeks span:nth-child(10) {
animation-delay: 0.9s;
}

.geeks span:nth-child(11) {
animation-delay: 1s;
}

.geeks span:nth-child(12) {
animation-delay: 1.1s;
}

.geeks span:nth-child(13) {
animation-delay: 1.2s;
}

@keyframes animate {
0% {
filter: blur(0);
}

40% {
filter: blur(20px);
}

80% {
filter: blur(0);
}

100% {
filter: blur(0);
}
}
</style>
完整代码:在本节中,我们将结合以上两个部分来创建加载文本动画效果。
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />

<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
background: green;
}

.geeks {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
font-weight: 800;
letter-spacing: 5px;
}

.geeks span {
animation: animate 3s linear infinite;
}

.geeks span:nth-child(1) {
animation-delay: 0s;
}

.geeks span:nth-child(2) {
animation-delay: 0.1s;
}

.geeks span:nth-child(3) {
animation-delay: 0.2s;
}

.geeks span:nth-child(4) {
animation-delay: 0.3s;
}

.geeks span:nth-child(5) {
animation-delay: 0.4s;
}

.geeks span:nth-child(6) {
animation-delay: 0.5s;
}

.geeks span:nth-child(7) {
animation-delay: 0.6s;
}

.geeks span:nth-child(8) {
animation-delay: 0.9s;
}

.geeks span:nth-child(9) {
animation-delay: 0.8s;
}

.geeks span:nth-child(10) {
animation-delay: 0.9s;
}

.geeks span:nth-child(11) {
animation-delay: 1s;
}

.geeks span:nth-child(12) {
animation-delay: 1.1s;
}

.geeks span:nth-child(13) {
animation-delay: 1.2s;
}

@keyframes animate {
0% {
filter: blur(0);
}

40% {
filter: blur(20px);
}

80% {
filter: blur(0);
}

100% {
filter: blur(0);
}
}
</style>
</head>

<body>
<div class="geeks">
<span>G</span>
<span>e</span>
<span>e</span>
<span>k</span>
<span>s</span>
<span>f</span>
<span>o</span>
<span>r</span>
<span>G</span>
<span>e</span>
<span>e</span>
<span>k</span>
<span>s</span>
</div>
</body>

</html>

输出:

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

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

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