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

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

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

html+css制作3D七夕表白旋转相册特效
一个温暖的拥抱,一句轻声的问候,一个暖心的笑容,一双坚实的双手,让我们日久天长,健健康康,快乐每一天!祝你们七夕快乐!一个基于html+css制作简易的3D七夕表白旋转相册特效,就当送给你们当作七夕表 ...
css动画中文字慢慢显示,利用定时器和css3动画制作文字依次渐变显示的效果
如上图,这种效果看着是不是挺"柔"的附代码文字一次渐变出现 body{ background-color: #333333; padding: 20px; -webkit-bo ...
html文字依次显示,利用定时器和css3动画制作文字依次渐变显示的效果
如上图,这种效果看着是不是挺"柔"的附代码文字一次渐变出现 body{ background-color: #333333; padding: 20px; -webkit-bo ...
css制作炫酷的罗盘时钟特效（附代码）
效果图然后是代码 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
html5显示状态灯,如何使用css3+html5来制作文字霓虹灯效果
使用css3+html5来制作文字霓虹灯效果的特点文字带有闪烁的霓虹灯动画,且文字选中时也有很酷的动画特效: 文字可动态输入,且输入的文字实时渲染霓虹灯特效. 使用css3+html5来制作文字霓虹 ...
html霓虹灯效果图,如何使用css3+html5来制作文字霓虹灯效果（付完整代码）
在科技日益发展的今天,人们对于审美越来越挑剔,这就要求我们对于前端开发的态度更加的严谨的同时,需要加入新鲜的元素,以达到吸引目光的目的.那么今天本文带大家了解一下如何使用css3+html5来制作文字 ...
html5闪光字效果,如何使用css3+html5来制作文字霓虹灯效果（付完整代码）
在科技日益发展的今天,人们对于审美越来越挑剔,这就要求我们对于前端开发的态度更加的严谨的同时,需要加入新鲜的元素,以达到吸引目光的目的.那么今天本文带大家了解一下如何使用css3+html5来制作文字 ...
jQuery和CSS制作霓虹灯文字效果
原文:jQuery和CSS制作霓虹灯文字效果源代码下载地址:http://www.zuidaima.com/share/1607121521200128.htm
图片复印如何去除黑底_如何用AE制作可爱漂亮闪烁霓虹灯效果？只需简单几步任何人都可以...
HELLO 大家好,亲们很久不见甚是想念!我是分享AEC4D手机特效小知识的乐乐,今后会定期持续分享一些AE小特效,C4D操作,手机特效,PS修图的原创教程内容,虽然可能只值5毛钱噢,只愿能为大家闲暇 ...

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

HTML部分：

CSS部分：

前置代码

body部分

布局与字体部分

霓虹灯特效部分

完整HTML代码：

完整CSS代码：

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

最新文章

热门文章