如今,在網頁上建立霓虹燈文字已成為一種使其更具吸引力的趨勢。我們可以在網頁上建立霓虹燈文字,以產生引人注目的效果,吸引使用者對網頁所包含的重要資訊的注意。
我們可以使用帶有徽標、標題、廣告等的霓虹燈文字來突出顯示它們。在本教學中,我們將自訂 text-shadow CSS 屬性的值來建立霓虹燈文字。
使用者可以按照以下語法使用 HTML 和 CSS 建立霓虹燈文字。
text-shadow: 0 0 1.5rem white;
我們在上面的語法中使用了「text-shadow」CSS屬性來新增發光效果。它將水平偏移作為第一值,垂直偏移作為第二值,模糊半徑作為第三值,顏色作為第四值。
我們總是需要將垂直和水平偏移設定為 0。要產生霓虹燈效果,我們需要對 text-shadow CSS 屬性使用具有不同顏色和模糊半徑的多個值。
在下面的範例中,我們使用「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>
在下面的範例中,我們在文字中創建了彩虹霓虹燈效果。在這裡,我們在 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>
在下面的範例中,我們建立了閃爍的霓虹燈文字。在這裡,我們使用“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>
在下面的範例中,我們將漸層加入到文字中。我們使用“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中文網其他相關文章!