前言
在进步的数字时代，网页的视觉设计和交互体验愈发重要。对于一个网站，除了内容本身的质量外，吸引用户的首要因素便是网页的设计与视觉表现。文字作为网站中非常重要的内容承载，其表现形式的多样化，极大的丰富了网页的视觉体验。
对于动态效果的实现，我们通常会考虑使用JavaScript或者相关的库，但其实CSS在这方面有着强大的能力。本文所介绍的实现，完全由纯CSS完成，无需任何JavaScript脚本的辅助。
我们将通过编写HTML和CSS代码，创建一个具有动态发光效果的文字。这个效果能够使页面的标题等关键文字更加醒目，提升网页的视觉吸引力，同时也能提高用户的浏览体验。
本文为你详细讲解每一行代码的含义和作用，帮助你深入了解这个特效的实现方式。无论你是寻找创新的设计灵感，还是希望了解CSS的深层次用法，本文都将为你提供丰富的信息。
效果展示
代码讲解
1. 设定基础样式和变量
首先，我们设定了一些全局变量和基础样式，包括背景颜色、字体、颜色变量等。
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap");
:root {
--bg: #000000;
--clr-1: #00c2ff;
--clr-2: #33ff8c;
--clr-3: #ffc640;
--clr-4: #e54cff;
--blur: 1rem;
--fs: clamp(3rem, 8vw, 7rem);
--ls: clamp(-1.75px, -0.25vw, -3.5px);
}
body {
min-height: 100vh;
display: grid;
place-items: center;
background-color: var(--bg);
color: #fff;
font-family: "Inter", "DM Sans", Arial, sans-serif;overflow: hidden
}
*,
*::before,
*::after {
font-family: inherit;
box-sizing: border-box;
}
这部分代码主要设置了页面的基础样式，并且引入了一个外部字体。在全局根元素上定义的CSS变量–bg、–clr-1、–clr-2等，这些都是为了后续的样式设计提供便利的颜色配置，你只需要改变这里的值，就能改变整个页面中使用到这些颜色的元素。
2. 设定文本样式
然后我们为文本和动画元素设定了样式。
.content {
text-align: center;
}
.title {
font-size: var(--fs);
font-weight: 800;
letter-spacing: var(--ls);
position: relative;
overflow: hidden;
background: var(--bg);
margin: 0;
}
.aurora {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
mix-blend-mode: darken;
pointer-events: none;
}
.aurora__item {
overflow: hidden;
position: absolute;
width: 60vw;
height: 60vw;
background-color: var(--clr-1);
border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
filter: blur(var(--blur));
mix-blend-mode: overlay;
}
在这部分代码中，文本被设置成了居中，而动画元素被设置成了绝对定位，并且设定了混合模式，让动画元素能够与背景色混合，达到一种炫酷的效果。
3. 设定动画样式
最后，我们设定了动画样式，创建了一个动态变化的发光效果。
.aurora__item:nth-of-type(1) {
...
}
.aurora__item:nth-of-type(2) {
...
}
.aurora__item:nth-of-type(3) {
...
}
.aurora__item:nth-of-type(4) {
...
}
@keyframes aurora-1 {
...
}
@keyframes aurora-2 {
...
}
@keyframes aurora-3 {
...
}
@keyframes aurora-4 {
...
}
@keyframes aurora-border {
...
}
在这部分代码中，我们通过 @keyframes 规则创建了多个关键帧动画，用来改变 aurora__item 各元素的位置和边框半径等属性，然后用 animation 属性将这些动画应用到 aurora__item 的相应元素上，从而创建出发光文字的动画效果。
完整代码
<div class="content">
<h1 class="title">
发光的文字
<div class="aurora">
<div class="aurora__item"></div>
<div class="aurora__item"></div>
<div class="aurora__item"></div>
<div class="aurora__item"></div>
</div>
</h1>
</div>
css 内容
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap");
:root {
--bg: #000000;
--clr-1: #00c2ff;
--clr-2: #33ff8c;
--clr-3: #ffc640;
--clr-4: #e54cff;
--blur: 1rem;
--fs: clamp(3rem, 8vw, 7rem);
--ls: clamp(-1.75px, -0.25vw, -3.5px);
}
body {
min-height: 100vh;
display: grid;
place-items: center;
background-color: var(--bg);
color: #fff;
font-family: "Inter", "DM Sans", Arial, sans-serif;overflow: hidden
}
*,
*::before,
*::after {
font-family: inherit;
box-sizing: border-box;
}
.content {
text-align: center;
}
.title {
font-size: var(--fs);
font-weight: 800;
letter-spacing: var(--ls);
position: relative;
overflow: hidden;
background: var(--bg);
margin: 0;
}
.subtitle {
}
.aurora {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
mix-blend-mode: darken;
pointer-events: none;
}
.aurora__item {
overflow: hidden;
position: absolute;
width: 60vw;
height: 60vw;
background-color: var(--clr-1);
border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
filter: blur(var(--blur));
mix-blend-mode: overlay;
}
.aurora__item:nth-of-type(1) {
top: -50%;
animation: aurora-border 6s ease-in-out infinite,
aurora-1 12s ease-in-out infinite alternate;
}
.aurora__item:nth-of-type(2) {
background-color: var(--clr-3);
right: 0;
top: 0;
animation: aurora-border 6s ease-in-out infinite,
aurora-2 12s ease-in-out infinite alternate;
}
.aurora__item:nth-of-type(3) {
background-color: var(--clr-2);
left: 0;
bottom: 0;
animation: aurora-border 6s ease-in-out infinite,
aurora-3 8s ease-in-out infinite alternate;
}
.aurora__item:nth-of-type(4) {
background-color: var(--clr-4);
right: 0;
bottom: -50%;
animation: aurora-border 6s ease-in-out infinite,
aurora-4 24s ease-in-out infinite alternate;
}
@keyframes aurora-1 {
0% {
top: 0;
right: 0;
}
50% {
top: 100%;
right: 75%;
}
75% {
top: 100%;
right: 25%;
}
100% {
top: 0;
right: 0;
}
}
@keyframes aurora-2 {
0% {
top: -50%;
left: 0%;
}
60% {
top: 100%;
left: 75%;
}
85% {
top: 100%;
left: 25%;
}
100% {
top: -50%;
left: 0%;
}
}
@keyframes aurora-3 {
0% {
bottom: 0;
left: 0;
}
40% {
bottom: 100%;
left: 75%;
}
65% {
bottom: 40%;
left: 50%;
}
100% {
bottom: 0;
left: 0;
}
}
@keyframes aurora-4 {
0% {
bottom: -50%;
right: 0;
}
50% {
bottom: 0%;
right: 40%;
}
90% {
bottom: 50%;
right: 25%;
}
100% {
bottom: -50%;
right: 0;
}
}
@keyframes aurora-border {
0% {
border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
}
25% {
border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
}
50% {
border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
}
75% {
border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
}
100% {
border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
}
}
完结
