📅 最后修改于: 2023-12-03 14:49:40.358000 🧑 作者: Mango
在网页设计中，广告、提示、标语等突出性的文本往往需要一种醒目的显示方式，此时霓虹灯效果是一个不错的选择，本文将向您介绍如何使用 HTML 和 CSS 来展现酷炫的霓虹灯文本。
在 HTML 中，我们可以使用 <span> 标签来包裹需要霓虹灯效果的文本内容，为其添加一个 class 属性，并赋值为 neon-text，如下所示：
<span class="neon-text">
嘿！这是霓虹灯文本。
</span>
接下来，我们可以使用 CSS 来为 neon-text 类添加样式，实现霓虹灯效果。首先，我们需要为包裹文本的 <span> 标签设置 position 和 display 属性：
.neon-text {
position: relative;
display: inline-block;
}
然后，我们可以为其添加伪类 ::after，并设置其样式，实现细边框和发光效果：
.neon-text::after {
content: '';
position: absolute;
top: -0.125em;
left: -0.125em;
right: -0.125em;
bottom: -0.125em;
z-index: -1;
background-color: #333;
box-shadow: 0 0 0.5em #fff, 0 0 2em #fff, 0 0 3.5em #fff, 0 0 5em #f00, 0 0 6.5em #f00, 0 0 8em #f00, 0 0 9.5em #f00;
border: 0.125em solid #f00;
}
最后，我们还可以添加一些动画效果，让霓虹灯文本更加生动：
.neon-text::after {
/* ... */
animation: neon-text 1.5s ease-in-out infinite alternate;
}
@keyframes neon-text {
from {
opacity: 0;
}
to {
opacity: 1;
text-shadow: 0 0 1.25em #fff, 0 0 2.5em #fff, 0 0 3.75em #fff, 0 0 5em #f00, 0 0 6.25em #f00, 0 0 7.5em #f00, 0 0 8.75em #f00;
}
}
完整的 HTML 和 CSS 代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>霓虹灯文本</title>
<style>
.neon-text {
position: relative;
display: inline-block;
}
.neon-text::after {
content: '';
position: absolute;
top: -0.125em;
left: -0.125em;
right: -0.125em;
bottom: -0.125em;
z-index: -1;
background-color: #333;
box-shadow: 0 0 0.5em #fff, 0 0 2em #fff, 0 0 3.5em #fff, 0 0 5em #f00, 0 0 6.5em #f00, 0 0 8em #f00, 0 0 9.5em #f00;
border: 0.125em solid #f00;
animation: neon-text 1.5s ease-in-out infinite alternate;
}
@keyframes neon-text {
from {
opacity: 0;
}
to {
opacity: 1;
text-shadow: 0 0 1.25em #fff, 0 0 2.5em #fff, 0 0 3.75em #fff, 0 0 5em #f00, 0 0 6.25em #f00, 0 0 7.5em #f00, 0 0 8.75em #f00;
}
}
</style>
</head>
<body>
<span class="neon-text">
嘿！这是霓虹灯文本。
</span>
</body>
</html>
现在，您已经学会了如何使用 HTML 和 CSS 来展现霓虹灯文本，可以根据自己的需要，调整样式和动画效果，让您的网页更加醒目、生动。