使用css实现闪光的霓虹灯文字效果 

<!DOCTYPE html>
<html>
<head>
<title>Glowing Neon Text</title>
<style>
body {
  background-color: #000; /* Dark background for better effect */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: 'Arial Black', sans-serif; /* Bold font works well */
}

.neon-text {
  color: #fff; /* Base 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 */
  animation: flicker 1.5s infinite alternate; /* Animation for flicker effect */
}

/* Flicker animation */
@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; /* Removes shadow for flicker effect */
  }
}

/* Optional: Add some styling to the container */
.container {
  padding: 20px;
  border-radius: 10px;
}
</style>
</head>
<body>
  <div class="container">
    <h1 class="neon-text">Glowing Neon Text</h1>
  </div>
</body>
</html>

Explanation and Key improvements:

  • Dark Background: A dark background (#000) significantly enhances the neon effect.
  • Bold Font: A bold font like Arial Black or Impact makes the text stand out more.
  • Multiple Text Shadows: Layering multiple text shadows with increasing blur radius and varying intensities creates the glowing effect. Using white in conjunction with a color makes it appear brighter.
  • Flicker Animation: The flicker animation simulates a realistic neon light flicker by intermittently removing the text shadow. The percentages in the keyframes are tweaked to create a more random and natural-looking flicker.
  • Color Customization: You can easily change the neon color by modifying the #0fa values in the text-shadow property. For example, #f0a for pink, #0f0 for green, etc.
  • Container (Optional): The .container div is optional but can be used to add padding or a background to the text area.

How to Use:

  1. Save the code as an HTML file (e.g., neon.html).
  2. Open the file in your web browser.

This improved version provides a more convincing and customizable neon text effect. You can experiment with different colors, flicker speeds, and shadow properties to achieve the desired look.

posted @ 2024-12-10 09:29  王铁柱6  阅读(150)  评论(0)    收藏  举报