CSS 创建霓虹文字

紫微前端

于 2022-07-04 14:05:58 发布

阅读量332

点赞数

CC 4.0 BY-SA版权

分类专栏：原生javascript制作各种酷炫组件文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/125598916

原生javascript制作各种酷炫组件专栏收录该内容

157 篇文章 ¥89.90 ¥99.00

订阅专栏

本文将介绍如何利用CSS实现霓虹灯效果的文字，包括颜色渐变、动画效果和边框光晕等技巧，让你的网页文字更加炫酷吸引人。

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

<h1 class="neonText">
 neon lights
</h1>

<style>

.neonText {
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #bc13fe,
    0 0 82px #bc13fe,
    0 0 92px #bc13fe,
    0 0 102px #bc13fe,
    0 0 151px #bc13fe;
}
  
body {
  font-size: 18px;
  font-family: "Sacramento", sans-serif;
  background-color: #010a01;
  display: flex;
  justify-content: center;
  align-items: center;  
}  

h1, h2 {
  text-align: center;
  font-weight: 400;
}
  
h1 {
  font-size: 6.2rem;
  animation: pulsate 1.5s infinite alternate;  
  border: 0.2rem solid #fff;
  bord

了解本专栏