纯CSS实现炫酷背景霓虹灯文字效果

如图所示，这是一个很炫酷的霓虹灯文字效果且背景炫酷，就像很多个灯光闪烁着不同的颜色。sEc28资讯网——每日最新资讯28at.com

本次文章将解析如何用CSS代码实现这个效果，根据上面的动图分析出我们要实现的几个主要功能点：sEc28资讯网——每日最新资讯28at.com

• 整个背景中有平均分布的小点衬托中心区域
• 文字闪烁效果如同霓虹灯一样
• 文字背景呈多个平均分布的亮点
• 背景亮点的颜色整体呈现渐变色变化

1. 默认背景色

首先我们来看看如何通过CSS创建一个多个小点背景效果。sEc28资讯网——每日最新资讯28at.com

1.1 设置根元素变量

在:root伪类中，定义了一系列的CSS变量，这些变量在整个文档中都是可用的。例如，--rotate用于控制旋转动画的角度，而--radius、--bg、--width等用于定义背景和形状的基本属性。sEc28资讯网——每日最新资讯28at.com

:root {  --rotate: 0deg;  --radius: 12;  --bg: hsl(210 30% 70% / 0.15);  --width: 80;  --height: 80;  --border: 0;  --blur: 10;  --alpha: 0;  font-family: 'Montserrat', sans-serif;}

1.2 设计背景样式

在body标签中设置了背景的基础样式，使用了径向渐变（radial-gradient）来创建一种特殊的纹理效果。配合 background-size 和 background-position 即可完成默认的背景效果。sEc28资讯网——每日最新资讯28at.com

body {  background-color: #25282a;  background-image:     radial-gradient(#535150a0 0.95px, transparent 0.95px),    radial-gradient(#535150a0 0.95px, #25282a 0.95px);  background-size: 38px 38px;  background-position: 0 0, 19px 19px;  min-height: 100vh;  display: grid;  place-content: center;  padding: 0 10vw;}

此时的背景效果如下：sEc28资讯网——每日最新资讯28at.com

图片sEc28资讯网——每日最新资讯28at.com

2. 创建渐变背景旋转效果

2.1 旋转动画的实现

新增.back类利用conic-gradient来创建一个彩色圆环效果，而--rotate变量控制着这个圆环的旋转。这种效果通过@keyframes spin动画实现，其中--rotate的值在一定周期内从0deg变化到360deg，实现了一个完整的旋转周期。sEc28资讯网——每日最新资讯28at.com

.back {  // 背景图像和渐变设置  background-image:     radial-gradient(#53515010 1px, transparent 0),    radial-gradient(#53515010 2px, #25282a 0),    conic-gradient(from var(--rotate) at 50% 70%, hsl(0 0% 98% / .1) 0deg, #eec32d 72deg, #ec4b4b 144deg, #709ab9 216deg, #4dffbf 288deg, hsl(0 0% 98% / .1) 1turn);  background-size:     5vmin 5vmin,     5vmin 5vmin,    100% 100%;  animation: spin 5s linear infinite;}@keyframes spin {  0% { --rotate: 0deg; }  100% { --rotate: 360deg; }}

如果这里仅设置 conic-gradient 并配合 animation 动画的效果就是下面的样子：sEc28资讯网——每日最新资讯28at.com

图片sEc28资讯网——每日最新资讯28at.com

但是再增加一个 radial-gradient 径向渐变并设置 background-size 为 5vmin 5vmin 的显示区域。sEc28资讯网——每日最新资讯28at.com

radial-gradient(#53515010 2px, #25282a 0),

完成后的效果图：sEc28资讯网——每日最新资讯28at.com

图片sEc28资讯网——每日最新资讯28at.com

这里需要注意的一点就是多个渐变设置的顺序，这里的 conic-gradient 要放置在后面才能完成这个效果。这种旋转效果不仅增加了页面的视觉吸引力，而且通过颜色的流动变换，为用户提供了一种动态的互动体验。它不仅是一种美学上的选择，也展示了CSS动画和渐变的强大功能。sEc28资讯网——每日最新资讯28at.com

2. 霓虹灯文字效果

接下来探讨如何实现背景中的霓虹灯文字效果。sEc28资讯网——每日最新资讯28at.com

2.1 文本的动态阴影效果

通过设置text-shadow属性，并使用自定义变量--color1到--color4，为文本创建了动态的阴影效果。sEc28资讯网——每日最新资讯28at.com

.gd {  color: rgb(182, 255, 192);  --color1: pink;  --color2: orangered;  --color3: red;  --color4: magenta;  text-shadow:     0 0 10px var(--color1),    0 0 20px var(--color2),    0 0 40px var(--color3),    0 0 80px var(--color4);}

2.2 文本动画效果

基于添加好的阴影效果进一步增加动画效果，模拟灯光闪烁的效果，在动画中调整阴影的颜色和大小在一定时间内变化，从而产生动态效果。sEc28资讯网——每日最新资讯28at.com

flicker动画为文本添加了一个颜色和滤镜的变化效果。在动画的50%时刻，文本的颜色变为白色，同时增加滤镜的饱和度和色调发生变化，创建了一种“闪烁”效果。sEc28资讯网——每日最新资讯28at.com

will-change: filter, color;filter: saturate(60%);animation: flicker steps(100) var(--interval) 1s infinite;@keyframes flicker {  50% {    color: white;    filter: saturate(200%) hue-rotate(20deg);  }}

3. 悬停效果：增强用户交互

最后进一步增加用户的交互体验，当鼠标悬停的时候增加背景边框效果。.gd:hover选择器用于定义当鼠标悬停在元素上时的样式变化。默认边框不可见，在这里当鼠标悬停时，--border变量的值从0变为1，给元素添加了边框效果，从而增强了用户的交互体验。sEc28资讯网——每日最新资讯28at.com

.back {  border: double calc(var(--border) * 1px) transparent;}.gd:hover {  --border: 1;}

增加悬停交互后的效果：sEc28资讯网——每日最新资讯28at.com

图片sEc28资讯网——每日最新资讯28at.com

结语

本文详细解析了如何利用CSS的来创造炫酷动态渐变背景和霓虹灯文字效果。这种动效不仅对于前端开发者有启发，也为设计师和内容创作者提供了新的视角，去探索网页设计的无限可能性。sEc28资讯网——每日最新资讯28at.com

通过这段CSS代码的解析，我们可以看到CSS不仅是用来定义网页的基本样式，还可以创建复杂的视觉效果和动画。这些技术不仅提高了网页的美观性，还增强了用户的交互体验。随着前端技术的不断发展，我们可以期待更多创新的设计和实现，为网页带来更加丰富和动态的视觉效果。sEc28资讯网——每日最新资讯28at.com

参考

codepen.io/ghaste/pen/NWobwWbcodepen.io/erikjung/pen/XdWEKEsEc28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-37256-0.html纯CSS实现炫酷背景霓虹灯文字效果

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 万字长文带你彻底吃透Spring循环依赖，堪称全网最全（文末福利）

下一篇： 面试过程中常见的排序算法问题你见个？附常见排序算法源代码