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

📅  最后修改于: 2021-11-07 09:16:26             🧑  作者: Mango

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

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

示例 1:



  

    
    Neon text Display Using HTML and CSS
    

  

    
                  

GeeksforGeeks

    
        A Computer Science Portal for Geeks     
  

输出:

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

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



  

    
    Neon text Display Using HTML and CSS
    

  

  
    
    

GeeksforGeeks

     

输出: