项目简介：
利用纯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))计算每个字需要延迟的时间，结果如下：
字母
var(--o)值
animation-delay时间
M
1
0.1s * 1 = 0.1s
u
2
0.1s * 2 = 0.2s
s
3
0.1s * 3 = 0.3s
i
4
0.1s * 4 = 0.4s
c
5
0.1s * 5 = 0.5s
C
6
0.1s * 6 = 0.6s
l
7
0.1s * 7 = 0.7s
u
8
0.1s * 8 = 0.8s
b
9
0.1s * 9 = 0.9s
通过设置多个文字阴影模糊距离，实现利用多层阴影实现霓虹灯光晕效果。
通过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);
}
}