使用css實現霓虹燈效果

.neon-text {
  color: #fff; /* Text color */
  text-shadow:
    0 0 7px #fff, /* White glow */
    0 0 10px #fff, /* White glow */
    0 0 21px #fff, /* White glow */
    0 0 42px #0fa, /* Colored glow */
    0 0 82px #0fa, /* Colored glow */
    0 0 92px #0fa, /* Colored glow */
    0 0 102px #0fa, /* Colored glow */
    0 0 151px #0fa; /* Colored glow */
}

/* Alternative - using a brighter base color and less shadow layers */
.neon-text-alt {
  color: #0fa; /* Brighter base color */
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #0fa,
    0 0 42px #0fa;
}

/* Applying to an element */
h1 {
  font-size: 4em;
  font-family: 'Arial Black', sans-serif; /* Bold font works best */
  @apply neon-text; /* If using a CSS framework like Tailwind */
}


/* Animating the glow - optional */
.neon-text-animated {
  animation: flicker 1.5s linear infinite alternate;
}

@keyframes flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow:
          0 0 4px #fff,
          0 0 11px #fff,
          0 0 19px #fff,
          0 0 40px #0fa,
          0 0 80px #0fa,
          0 0 90px #0fa,
          0 0 100px #0fa,
          0 0 150px #0fa;
    }
    20%, 24%, 55% {
        text-shadow: none;
    }

}



/* Example usage with a background and box */
.neon-box {
  background-color: #222;
  padding: 20px;
  border-radius: 10px;
  display: inline-block; /* Or block for full width */
}

Explanation and Key Points:

• text-shadow: This is the core of the neon effect. Multiple shadows with increasing blur radius and varying colors create the glow.
• Color: #0fa (cyan-green) is used as an example, but you can change this to any color you want. Brighter colors generally work better.
• White glow: Adding white shadows beneath the colored ones enhances the brightness and makes the effect pop.
• Blur Radius: Increasing blur radius for each successive shadow creates the outward glow.
• Font: Bold, sans-serif fonts like Arial Black, Impact, or Roboto Black work best for this effect.
• Animation (Optional): The neon-text-animated class and the flicker animation provide a subtle flickering effect for a more realistic neon look. You can adjust the timing and intensity of the flicker.
• Background: A dark background is essential for the neon effect to be visible. The example uses #222.
• neon-box: This class demonstrates how to apply the effect to an element with a background and padding.

How to Use:

1. Add the CSS to your stylesheet.

2. Apply the neon-text (or neon-text-animated for the flickering effect) class to the text element you want to style. For example:

   <h1 class="neon-text">Neon Text</h1>
   <p class="neon-text-animated">Flickering Neon Text</p>
   <div class="neon-box">
       <span class="neon-text-alt">Neon in a box</span>
   </div>
   

Customization:

• Color: Change the color values in the text-shadow property to create different colored neon lights.
• Glow Intensity: Adjust the blur radius values to control the intensity of the glow.
• Flicker Speed: