写点什么

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

作者:南城FE
  • 2023-12-04
    广东
  • 本文字数:2209 字

    阅读完需:约 7 分钟


如图所示,这是一个很炫酷的霓虹灯文字效果且背景炫酷,就像很多个灯光闪烁着不同的颜色。


本次文章将解析如何用 CSS 代码实现这个效果,根据上面的动图分析出我们要实现的几个主要功能点:


  • 整个背景中有平均分布的小点衬托中心区域

  • 文字闪烁效果如同霓虹灯一样

  • 文字背景呈多个平均分布的亮点

  • 背景亮点的颜色整体呈现渐变色变化

1. 默认背景色

首先我们来看看如何通过 CSS 创建一个多个小点背景效果。

1.1 设置根元素变量

:root伪类中,定义了一系列的 CSS 变量,这些变量在整个文档中都是可用的。例如,--rotate用于控制旋转动画的角度,而--radius--bg--width等用于定义背景和形状的基本属性。


: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-sizebackground-position 即可完成默认的背景效果。


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;}
复制代码


此时的背景效果如下:


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

2.1 旋转动画的实现

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


.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 动画的效果就是下面的样子:



但是再增加一个 radial-gradient 径向渐变并设置 background-size5vmin 5vmin 的显示区域。


radial-gradient(#53515010 2px, #25282a 0),
复制代码


完成后的效果图:



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

2. 霓虹灯文字效果

接下来探讨如何实现背景中的霓虹灯文字效果。

2.1 文本的动态阴影效果

通过设置text-shadow属性,并使用自定义变量--color1--color4,为文本创建了动态的阴影效果。


.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 文本动画效果

基于添加好的阴影效果进一步增加动画效果,模拟灯光闪烁的效果,在动画中调整阴影的颜色和大小在一定时间内变化,从而产生动态效果。


flicker动画为文本添加了一个颜色和滤镜的变化效果。在动画的 50%时刻,文本的颜色变为白色,同时增加滤镜的饱和度和色调发生变化,创建了一种“闪烁”效果。


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,给元素添加了边框效果,从而增强了用户的交互体验。


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


增加悬停交互后的效果:


结语

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


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


关注公众号回复【 20231203 】可获取完整源代码~

参考

codepen.io/ghaste/pen/NWobwWbcodepen.io/erikjung/pen/XdWEKE




看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~


专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

发布于: 刚刚阅读数: 5
用户头像

南城FE

关注

公众号@南城大前端 2019-02-12 加入

专注前端开发,分享前端知识

评论

发布
暂无评论
纯CSS实现炫酷背景霓虹灯文字效果_CSS_南城FE_InfoQ写作社区