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

最新推荐文章于 2024-09-10 22:55:28 发布

web前端开发V

最新推荐文章于 2024-09-10 22:55:28 发布

阅读量158

点赞数

文章标签： css js html xml javascript

英文 | 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>

输出：

web前端开发V

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【开发小技巧】024—如何使用HTML和CSS创建加载模糊文本动画效果？

英文 |https://www.geeksforgeeks.org/how-to-create-loading-blur-text-animation-effect-using-htm...
复制链接

扫一扫