利用纯HTML+CSS实现文字依次闪烁的霓虹灯特效，文字大小可随浏览器宽度自行调节
HTML部分：
<body><h2><!-- 利用var()给字母排序，以实现依次闪烁效果 --><span style="--o:1">M</span><span style="--o:2">u</span><span style="--o:3">s</span><span style="--o:4">i</span><span style="--o:5">c</span><span style="--o:6">C</span><span style="--o:7">l</span><span style="--o:8">u</span><span style="--o:9">b</span></h2></body>
给每个包含单个字母的span添加--o:数字，在css中使用var()实现字母依次闪烁效果。
其中，span内含的字母可替换。
CSS部分：
前置代码
* {/* 清除预设margin和padding */margin: 0;padding: 0;/* 把borders和padding全都包含在定义的宽高里面 */box-sizing: border-box;/* 设置字体（cursive为备选字体） */font-family: "MV Boli", cursive;}
清除预设margin和padding，清除border和padding对盒子大小的干扰，设置字体。
body部分
body {background: #111;}
设置背景颜色
布局与字体部分
h2 {/* flex布局 */display: flex;/* 初始文字透明 */color: transparent;/* 文字水平垂直居中显示 */justify-content: center;align-items: center;/* h2高度 */height: 100vh;/* 字号 */font-size: 15vw;}h2 span:nth-child(6) {/* 单词间隙 */margin-left: 5vw;}
设置flex布局，实现文字水平垂直居中显示和文字大小随浏览器宽度自行变化。规定文字的字号和初始颜色。
其中，设置h2高度为100vh，配合align-items: center; 实现文字在浏览器内垂直居中。
为了防止没有霓虹效果时字体显现出来，所以设置初始文字颜色为透明（transparent）。
霓虹灯特效部分
h2 span {animation: LetterColor 3s linear infinite;/* 计算每个字的动画起始时间 */animation-delay: calc(0.1s * var(--o));}@keyframes LetterColor {0% {color: #fff;/* 利用模糊距离不同的阴影实现霓虹灯光晕效果 */text-shadow: 0 0 10px #00b3ff,0 0 20px #00b3ff,0 0 40px #00b3ff,0 0 80px #00b3ff,0 0 120px #00b3ff,0 0 200px #00b3ff,0 0 300px #00b3ff,0 0 400px #00b3ff;/* 设置高斯模糊与色调，实现模糊效果和颜色变换 */filter: blur(2px) hue-rotate(0deg);}30%,70% {color: #fff;/* 减少光晕大小 */text-shadow: 0 0 10px #00b3ff,0 0 20px #00b3ff,0 0 40px #00b3ff,0 0 80px #00b3ff,0 0 120px #00b3ff,0 0 200px #00b3ff;/* 色调变换360度 */filter: blur(2px) hue-rotate(360deg);}100% {/* 动画结束字变透明 */color: transparent;/* 动画结束消除阴影 */text-shadow: none;/* 动画结束色调重置 */filter: blur(2px) hue-rotate(0deg);}}
实现每个字延迟0.1s开始动画，文字和阴影色调变换360度的霓虹灯特效。
其中，利用calc(0.1s * var(--o))计算每个字需要延迟的时间，结果如下：
通过设置多个文字阴影模糊距离，实现利用多层阴影实现霓虹灯光晕效果。
通过blur滤镜实现霓虹灯模糊效果，利用hue-rotate改变色调实现颜色变换效果。
完整HTML代码：
<!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>霓虹灯文字</title><link rel="stylesheet" href="style.css"></head><body><h2><!-- 利用var()给字母排序，以实现依次闪烁效果 --><span style="--o:1">M</span><span style="--o:2">u</span><span style="--o:3">s</span><span style="--o:4">i</span><span style="--o:5">c</span><span style="--o:6">C</span><span style="--o:7">l</span><span style="--o:8">u</span><span style="--o:9">b</span></h2></body></html>
完整CSS代码：
* {/* 清除预设margin和padding */margin: 0;padding: 0;/* 把borders和padding全都包含在定义的宽高里面 */box-sizing: border-box;/* 设置字体（cursive为备选字体） */font-family: "MV Boli", cursive;}body {background: #111;}h2 {/* flex布局 */display: flex;/* 初始文字透明 */color: transparent;/* 文字水平垂直居中显示 */justify-content: center;align-items: center;/* h2高度 */height: 100vh;/* 字号 */font-size: 15vw;}h2 span:nth-child(6) {/* 单词间隙 */margin-left: 5vw;}h2 span {animation: LetterColor 3s linear infinite;/* 计算每个字的动画起始时间 */animation-delay: calc(0.1s * var(--o));}@keyframes LetterColor {0% {color: #fff;/* 利用模糊距离不同的阴影实现霓虹灯光晕效果 */text-shadow: 0 0 10px #00b3ff,0 0 20px #00b3ff,0 0 40px #00b3ff,0 0 80px #00b3ff,0 0 120px #00b3ff,0 0 200px #00b3ff,0 0 300px #00b3ff,0 0 400px #00b3ff;/* 设置高斯模糊与色调，实现模糊效果和颜色变换 */filter: blur(2px) hue-rotate(0deg);}30%,70% {color: #fff;/* 减少光晕大小 */text-shadow: 0 0 10px #00b3ff,0 0 20px #00b3ff,0 0 40px #00b3ff,0 0 80px #00b3ff,0 0 120px #00b3ff,0 0 200px #00b3ff;/* 色调变换360度 */filter: blur(2px) hue-rotate(360deg);}100% {/* 动画结束字变透明 */color: transparent;/* 动画结束消除阴影 */text-shadow: none;/* 动画结束色调重置 */filter: blur(2px) hue-rotate(0deg);}}
