HTML CSS 烟熏效果
使用blur()函数对模糊效果进行动画处理。然后使用第n个子属性来应用动画延迟。

HTML代码

创建了一个div元素，并将加载文本字符包装在span元素内。

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  4. <head> 
  5.     <meta charset="UTF-8" /> 
  6.     <meta name="viewport" content= 
  7.         "width=device-width, initial-scale=1.0" /> 
  8.     <title>GeeksforGeeks</title> 
  9. </head> 
  11. <body> 
  12.     <div class="geeks"> 
  13.         <span>G</span> 
  14.         <span>e</span> 
  15.         <span>e</span> 
  16.         <span>k</span> 
  17.         <span>s</span> 
  18.         <span>f</span> 
  19.         <span>o</span> 
  20.         <span>r</span> 
  21.         <span>G</span> 
  22.         <span>e</span> 
  23.         <span>e</span> 
  24.         <span>k</span> 
  25.         <span>s</span> 
  26.     </div> 
  27. </body> 
  29. </html>

CSS代码

  • 步骤1：将文本居中对齐作为背景。
  • 步骤2：提供了一个线性动画，其关键帧标识符为animate。
  • 步骤3：使用关键帧将模糊功能应用于动画的不同帧。

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

    1. <style> 
    2.   body { 
    3.       margin: 0; 
    4.       padding: 0; 
    5.       background: green; 
    6.   } 
    8.   .geeks { 
    9.       position: absolute; 
    10.       top: 50%; 
    11.       left: 50%; 
    12.       transform: translate(-50%, -50%); 
    13.       font-size: 30px; 
    14.       font-weight: 800; 
    15.       letter-spacing: 5px; 
    16.   } 
    18.   .geeks span { 
    19.       animation: animate 3s linear infinite; 
    20.   } 
    22.   .geeks span:nth-child(1) { 
    23.       animation-delay: 0s; 
    24.   } 
    26.   .geeks span:nth-child(2) { 
    27.       animation-delay: 0.1s; 
    28.   } 
    30.   .geeks span:nth-child(3) { 
    31.       animation-delay: 0.2s; 
    32.   } 
    34.   .geeks span:nth-child(4) { 
    35.       animation-delay: 0.3s; 
    36.   } 
    38.   .geeks span:nth-child(5) { 
    39.       animation-delay: 0.4s; 
    40.   } 
    42.   .geeks span:nth-child(6) { 
    43.       animation-delay: 0.5s; 
    44.   } 
    46.   .geeks span:nth-child(7) { 
    47.       animation-delay: 0.6s; 
    48.   } 
    50.   .geeks span:nth-child(8) { 
    51.       animation-delay: 0.9s; 
    52.   } 
    54.   .geeks span:nth-child(9) { 
    55.       animation-delay: 0.8s; 
    56.   } 
    58.   .geeks span:nth-child(10) { 
    59.       animation-delay: 0.9s; 
    60.   } 
    62.   .geeks span:nth-child(11) { 
    63.       animation-delay: 1s; 
    64.   } 
    66.   .geeks span:nth-child(12) { 
    67.       animation-delay: 1.1s; 
    68.   } 
    70.   .geeks span:nth-child(13) { 
    71.       animation-delay: 1.2s; 
    72.   } 
    74.   @keyframes animate { 
    75.       0% { 
    76.           filter: blur(0); 
    77.       } 
    79.       40% { 
    80.           filter: blur(20px); 
    81.       } 
    83.       80% { 
    84.           filter: blur(0); 
    85.       } 
    87.       100% { 
    88.           filter: blur(0); 
    89.       } 
    90.   } 
    91. </style>

    完整的代码

    ```html <!DOCTYPE html>

G e e k s f o r G e e k s

```

效果

烟熏效果的实现 - 图1