使用 HTML 和 CSS 显示霓虹灯文本

在本文中，您将学习使用 HTML 和 CSS创建霓虹灯文本显示。
霓虹灯文本显示是最简单但最引人注目的效果之一，用于为您的网页上的文本提供酷炫的设计。在霓虹灯显示中，文本的颜色会持续发光，您可以通过动画时间进行控制。文本使用 text-shadow属性和一些颜色组合获得发光效果。方法：首先，我们将在span类中添加我们想要以霓虹灯样式显示的文本。然后在这个类中，我们根据需要设置字体颜色。然后我们必须使用动画属性并为其命名。在动画中，我们将动画时间设置为ease-in-out为动画的慢开始和慢结束，动画迭代为无限连续显示，最后将动画方向交替，使动画先前进，然后向后。

然后我们使用@keyframes来指定动画代码。在@keyframes 中，我们使用 text-shadow 属性，并应用各种颜色组合来创建霓虹灯效果。

示例 1：

  

    
    
    

  

    
    
    
        
GeeksforGeeks
    
        A Computer Science Portal for Geeks
    

  

输出：

注意：您可以删除任何标签中显示的文本，而不必包含 标签中的文本。

示例：2 ：在此示例中，您将看到文本从阴影到其他阴影发光，这对眼睛更具吸引力。

  

    
    
    

  

  
    
    
GeeksforGeeks
  

  

输出：