如今，在網頁上建立霓虹燈文字已成為一種使其更具吸引力的趨勢。我們可以在網頁上建立霓虹燈文字，以產生引人注目的效果，吸引使用者對網頁所包含的重要資訊的注意。
我們可以使用帶有徽標、標題、廣告等的霓虹燈文字來突出顯示它們。在本教學中，我們將自訂 text-shadow CSS 屬性的值來建立霓虹燈文字。
文法
使用者可以按照以下語法使用 HTML 和 CSS 建立霓虹燈文字。
text-shadow: 0 0 1.5rem white;
登入後複製
我們在上面的語法中使用了「text-shadow」CSS屬性來新增發光效果。它將水平偏移作為第一值，垂直偏移作為第二值，模糊半徑作為第三值，顏色作為第四值。
我們總是需要將垂直和水平偏移設定為 0。要產生霓虹燈效果，我們需要對 text-shadow CSS 屬性使用具有不同顏色和模糊半徑的多個值。
範例 1（基本 Neon 文字）
在下面的範例中，我們使用「text-shadow」CSS 屬性為文字建立了基本的霓虹燈效果。我們使用具有不同邊框半徑和顏色的多個值來產生霓虹燈效果。
在輸出中，使用者可以觀察具有霓虹燈效果的文字。
<html>
<head>
<style>
.neon {
font-size: 5rem;
color: white;
font-family: 'Arial', sans-serif;
text-shadow: 0 0 1.5rem white, 0 0 3.5rem white, 0 0 5rem white, 0 0 7rem #ff00de, 0 0 8rem #ff00de, 0 0 10rem #ff00de, 0 0 12rem #ff00de, 0 0 15rem #ff00de;
}
</style>
</head>
<body>
<h2> Creating the <i> basic Neon text </i> using the CSS. </h2>
<div class = "neon"> Neon Text </div>
</html><html>
<head>
<style>
.neon {
font-size: 5rem;
color: white;
font-family: 'Arial', sans-serif;
text-shadow: 0 0 1.5rem white, 0 0 3.5rem white, 0 0 5rem white, 0 0 7rem #ff00de, 0 0 8rem #ff00de, 0 0 10rem #ff00de, 0 0 12rem #ff00de, 0 0 15rem #ff00de;
}
</style>
</head>
<body>
<h2> Creating the <i> basic Neon text </i> using the CSS. </h2>
<div class = "neon"> Neon Text </div>
</html>
登入後複製
範例 2（彩虹霓虹燈文字）
在下面的範例中，我們在文字中創建了彩虹霓虹燈效果。在這裡，我們在 div 元素中新增了文字。
我們使用CSS中的「background-image」CSS屬性來新增線性漸層作為背景。我們以 45 度應用了 4 種不同顏色的線性漸層。此外，我們使用“-webkit-background-clip”CSS 屬性以文字形狀剪輯背景圖像。
此外，我們使用「-webkit-text-fill-color」CSS屬性將透明顏色填入文字。因此，它將填充與背景相同的顏色。此外，我們還使用了帶有「rainbow-keyframe」關鍵影格的動畫 CSS 屬性。在關鍵影格中，我們更改「色調旋轉」的程度來旋轉背景中的色調。
在輸出中，使用者可以觀察到文字中的彩虹效果。
<html>
<head>
<style>
.rainbow-neon {
font-size: 5rem;
background-image: linear-gradient(45deg, #f3626b, #6181ff, #a25bf2, #ffc100);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: rainbow-keyframe 3s linear infinite;
}
@keyframes rainbow-keyframe {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
</style>
</head>
<body>
<h2> Creating the <i> rainbow Neon text </i> using the CSS </h2>
<div class="rainbow-neon"> It's raining actually. </div>
</body>
</html>
登入後複製
範例 3（閃爍的霓虹燈文字）
在下面的範例中，我們建立了閃爍的霓虹燈文字。在這裡，我們使用“text-shadow”CSS 屬性為文字添加霓虹燈效果。此外，我們使用「animation」屬性來新增閃爍動畫。在「閃爍」關鍵影格中，我們會變更「text-shadow」屬性的值。
在輸出中，我們可以看到帶有發光效果的閃爍文字。
<html>
<head>
<style>
.flicker {
font-size: 4rem;
color: blue;
text-shadow: 0 0 1.5rem white, 0 0 3.5rem white, 0 0 5rem white, 0 0 7rem #ff00de, 0 0 8rem #ff00de, 0 0 10rem #ff00de, 0 0 12rem #ff00de, 0 0 15rem #ff00de;
color: #fff;
animation: flicker 0.5s linear infinite;
}
@keyframes flicker {
0%, 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40%, 45%, 50%, 55%, 60%, 65%, 70%, 75%, 80%, 85%, 90%, 95%, 100%
{ text-shadow: 0 0 1.5rem white, 0 0 3.5rem white, 0 0 5rem white, 0 0 7rem #ff00de, 0 0 8rem #ff00de, 0 0 10rem #ff00de, 0 0 12rem #ff00de, 0 0 15rem #ff00de;
}
1%, 6%, 11%, 16%, 21%, 26%, 31%, 36%, 41%, 46%, 51%, 56%, 61%, 66%, 71%, 76%, 81%, 86%, 91%, 96%
{
text-shadow: none;
}
}
</style>
</head>
<body>
<h2> Creating the <i> flickering Neon text </i> using the CSS. </h2>
<div class = "flicker"> This text is flickering. </div>
</body>
</html>
登入後複製
範例 4（漸層霓虹燈文字）
在下面的範例中，我們將漸層加入到文字中。我們使用“background-image”屬性將漸變應用於文字。
在輸出中，使用者可以觀察帶有漸層的文字顏色。此外，使用者還可以透過將不同的顏色值傳遞給 Linear-gradient() 函數參數來變更漸層的顏色。
<html>
<head>
<style>
.gradient {
font-size: 3rem;
background-image: linear-gradient(45deg, #00dbde, #fc00ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<h2> Creating the <i> Gradient Neon text </i> using the CSS. </h2>
<div class = "gradient"> Check gradient in Neon text </div>
</body>
</html>
登入後複製
用戶學會了只使用 HTML 和 CSS 建立霓虹燈文字。我們學習了從基本霓虹燈文本創建高級霓虹燈文本，其中包含彩虹效果和閃爍效果等動畫。
以上是使用HTML和CSS建立霓虹文字顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！
