首頁 > web前端 > html教學 > 使用HTML和CSS建立霓虹文字顯示

使用HTML和CSS建立霓虹文字顯示

WBOY
發布: 2023-09-03 09:25:06
轉載
1066 人瀏覽過

使用HTML和CSS建立霓虹文字顯示

如今,在網頁上建立霓虹燈文字已成為一種使其更具吸引力的趨勢。我們可以在網頁上建立霓虹燈文字,以產生引人注目的效果,吸引使用者對網頁所包含的重要資訊的注意。

我們可以使用帶有徽標、標題、廣告等的霓虹燈文字來突出顯示它們。在本教學中,我們將自訂 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中文網其他相關文章!

相關標籤:
來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板