利用纯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);
}
}