css实现霓虹灯特效字体

在开始之前先了解外部字体的引入： vite中字体的引入方法（.otf字体等）如下： 1、在src下的assets文件夹下创建font文件夹，将下载好的字体包放到该文件夹下 2、在font文件夹下创建font.css文件，如果你用的是scss，那么就是font.scss。less同理。 3、在font.css文件中引入字体包

@font-face{
          
   
    font-family: AndilanteriaSignature;  /*字体名-自定义*/
    src: url("./Andilanteria Signature.otf"); /* 字体路径 */
    font-weight: normal;
    font-style: normal;
}

4、在main文件下引入即可全局使用

import  ./assets/font/font.scss

根据引入的字体绘制一个创意文字

<div class="grenn">Motley Crue</div>

/* scss */
.grenn{
          
   
        font-family: AndilanteriaSignature;  /*使用字体*/
        font-size: 80px;
        color: #91bb8d;
}

给字体添加发光阴影，使用filter: brightness();提升亮度，让字体亮起来

text-shadow: 0px 0px 1px #fff,0px 0px 8px #91bb8d,0px 0px 16px #91bb8d,0px 0px 32px #91bb8d,0px 0px 64px #91bb8d,0px 0px 128px #91bb8d;
filter: brightness(1.5);

这里添加阴影的方式，第一层给一个白色的阴影，让字体产生光亮的感觉，后面的为字体自身颜色的阴影，颜色层层叠加，并且模糊度层层加大，让它看起来有一层朦胧感。 给字体添加一个hover事件，关联动画，鼠标移入时字体发光，发光的同时，调大阴影的亮度和色彩扩散范围，下面是该特效的完整代码：

<div class="neonFont">
     <div class="grenn">Motley Crue</div>
     <div class="pink">Scorpions</div>
</div>

/* scss */
.neonFont{
          
   
    width: 600px;
    height: 300px;
    padding: 20px;
    margin: 20px;
    border: 1px solid red;
    text-align: center;
    background-color: black;

    .grenn{
          
   
        font-family: AndilanteriaSignature;
        font-size: 80px;
        color: #91bb8d;
        margin-top: 20px;
    &:hover{
          
   
        animation: grennLight 2s infinite linear alternate ;
    }
    @keyframes grennLight {
          
   
        from {
          
   
            text-shadow: 0px 0px 1px #fff,0px 0px 8px #91bb8d,0px 0px 16px #91bb8d,0px 0px 32px #91bb8d,0px 0px 64px #91bb8d,0px 0px 128px #91bb8d;
            filter: brightness(1.5);
        }
        to {
          
   
            text-shadow: 0px 0px 2px #fff,0px 0px 16px #91bb8d,0px 0px 30px #91bb8d,0px 0px 70px #91bb8d,0px 0px 150px #91bb8d,0px 0px 310px #91bb8d;
            filter: brightness(1.8);
        }
    }
    }
    
    .pink{
          
   
        font-family: AndilanteriaSignature;
        font-size: 80px;
        color: #b0355a;
        margin-top: 20px;
        &:hover{
          
   
            animation: lights 2s infinite linear alternate ;
        }
        @keyframes lights {
          
   
            from {
          
   
                text-shadow: 0px 0px 1px #fff,0px 0px 8px #b0355a,0px 0px 16px #b0355a,0px 0px 32px #b0355a,0px 0px 64px #b0355a,0px 0px 128px #b0355a;
                filter: brightness(1.5);
            }
            to {
          
   
                text-shadow: 0px 0px 2px #fff,0px 0px 16px #b0355a,0px 0px 30px #b0355a,0px 0px 70px #b0355a,0px 0px 150px #b0355a,0px 0px 310px #b0355a;
                filter: brightness(3);
    
            }
        }
    }
}

案例源码：