【HTML+CSS】制作文字依次闪烁的霓虹灯特效

最新推荐文章于 2024-06-03 11:57:40 发布

caroyal

最新推荐文章于 2024-06-03 11:57:40 发布

阅读量4.6k

点赞数 20

分类专栏： HTML+CSS项目文章标签： html css 前端

本文链接：https://blog.csdn.net/caroyal/article/details/121593145

版权

HTML+CSS项目专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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