css实现霓虹特效字体
时间：2023-03-31 01:08:30
CSS
开始之前先了解一下外部字体的介绍：vite中字体（.otf字体等）的导入方法如下：1.在src下assets文件夹下创建一个font文件夹,并下载2.在font文件夹下创建一个font.css文件。如果你使用scss，那么它就是font.scss。更少也是如此。3.在font.css文件中引入字体包@font-face{font-family:'AndilanteriaSignature';/*字体名称-自定义*/src:url("./Andilanteria\Signature.otf");/*字体路径*/font-weight:normal;font-style:normal;}4.import'./assets/font/font.scss'根据导入的字体绘制创意文字MotleyCrue
/*scss*/.grenn{font-family:'AndilanteriaSignature';/*使用字体*/font-size:80px;color:#91bb8d;}为字体添加光晕对于阴影，使用filter:brightness();增加亮度并使字体更亮text-shadow:0px0px1px#fff,0px0px8px#91bb8d,0px0px16px#91bb8d,0px0px32px#91bb8d,0px0px64px#91bb8d,0px0px128px#91bb8d;filterbrightness:(1.5);这里是添加阴影的方式，第一层给一个白色阴影让字体感觉明亮，后面是字体本身颜色的阴影，颜色有层次感。模糊程度逐层增加，看起来很朦胧。为字体添加悬停事件，关联动画，鼠标移入时字体发光，同时增加阴影亮度和颜色扩散范围。以下是特效的完整代码：/*scss*/.neonFont{宽度：600px；高度：300px；填充：20px；边距：20px；边框：1px纯红色；文本对齐：居中；背景色：黑色；.grenn{font-family:'AndilanteriaSignature';字体大小：80px；颜色：#91bb8d；顶部边距：20px；{动画：grennLight2s无限线性交替；}@keyframesgrennLight{来自{文本阴影：0px0px1px#fff，0px0px8px#91bb8d，0px0px16px#91bb8d，0px0px32px#91bb8d，0px4px0px，#90px0px128px#91bb8d；过滤器：亮度（1.5）；d,0px0px150px#91bb8d,0px0px310px#91bb8d;过滤器：亮度（1.8）；}}}.pink{font-family:'AndilanteriaSignature';字体大小：80px；颜色：#b0355a；20px;&:hover{动画：点亮2s无限线性交替;}@keyframeslights{from{text-shadow:0px0px1px#fff,0px0px8px#b0355a,0px0px16px#b0355a,0px0px5a#b030px64px#b0355a,0px0px128px#b0355a;过滤器：亮度（1.5）；0px150px#b0355a,0px0px310px#b0355a;过滤器：亮度（3）；}}}}案例源码：https://gitee.com/wang_fan_w/css-diary如果觉得本文对您有帮助，欢迎点赞收藏转发~
