CSS3炫酷的发光文字可自定义文字色彩

最新推荐文章于 2025-04-04 15:24:41 发布

魏晓栋c

最新推荐文章于 2025-04-04 15:24:41 发布

阅读量1.7k

点赞数

本文链接：https://blog.youkuaiyun.com/weixiaodong1006/article/details/103846039

版权

这篇博客介绍了如何使用CSS3创建鼠标悬停时呈现发光动画的文字特效。通过结合特殊字体，实现了3D立体视觉效果。代码示例展示了实现这一特效的具体HTML和CSS代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是一款基于纯CSS3的文字发光特效，当我们将鼠标滑过文字时，文字就会模拟发光动画，展现出非常酷的发光画面。另外，由于引用了特殊字体，所以整个文字效果看起来有着3D立体的特效
在这里插入图片描述
话不多说直接上代码

HTML代码

<div id="container">

  <p><a href="#">
    RED
  </a></p>

  <p><a href="#">
    BLUE
  </a></p>

  <p><a href="#">
    Yellow
  </a></p>

  <p><a href="#">
    GREEN
  </a></p>

  <p><a href="#">
    ORANGE
  </a></p>

  <p><a href="#">
    VIOLET
  </a></p>

</div>

css部分

*{
   
  margin: 0;
  padding: 0;
}

@font-face {
   
  font-family: 'Monoton';
  font-style: normal;
  font-weight: 400;
  src: local('Monoton'), local('Monoton-Regular'), url(http://themes.googleusercontent.com/static/fonts/monoton/v4/AKI-lyzyNHXByGHeOcds_w.woff) format('woff');
}

@font-face {
   
  font-family: 'Iceland';
  font-style: normal;
  font-weight: 400;
  src: local('Iceland'), local('Iceland-Regular'), url(http://themes.googleusercontent.com/static/fonts/iceland/v3/F6LYTZLHrG9BNYXRjU7RSw.woff) format('woff');
}

@font-face {
   
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(http://themes.googleusercontent.com/static/fonts/pacifico/v5/yunJt0R8tCvMyj_V4xSjafesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}

@font-face {
   
  font-family: 'PressStart';