英文 | 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>
输出: