关于前端:css实现霓虹灯特效字体

在开始之前先理解内部字体的引入:
vite中字体的引入办法(.otf字体等)如下:
1、在src下的assets文件夹下创立font文件夹,将下载好的字体包放到该文件夹下

2、在font文件夹下创立font.css文件,如果你用的是scss,那么就是font.scssless同理。
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);
    
            }
        }
    }
}


案例源码:https://gitee.com/wang_fan_w/css-diary

如果感觉这篇文章对你有帮忙,欢送点赞、珍藏、转发哦~

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据