在开始之前先了解外部字体的引入：
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文件下引入即可全局使用
impor './assets/font/font.scss'
根据引入的字体绘制一个创意文字
Motley Crue
/* 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事件，关联动画，鼠标移入时字体发光，发光的同时，调大阴影的亮度和色彩扩散范围，下面是该特效的完整代码：
/* 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
如果觉得这篇文章对你有帮助，欢迎点赞、收藏、转发哦~
