flickering Signs

Dieser Effekt immitiert eine Neon Reklame mit kaputten und flackernden Buchstaben.

Beispiel

HTML

<div class="light_letters">
    Hie<span class="fade">r</span> ei<span class="flicker">n</span> B<span class="fade_two">e</span>is<span class="sparkle">p</span>iel
</div>
            

CSS

div#background {
  background-color: black;
  text-align: center;
  vertical-align: middle;
  height: 120px;
  width: 100%;
  border: 1px solid;
  border-radius: 3px;
}
.light_letters{
  font-family: Impact, Charcoal, sans-serif;
  padding: 20px;
  font-size: 60px;
  color: red;
}
.light_letters{
  text-shadow: 0 0 5px red, 0 0 10px red, 0 0 50px red, 0 0 50px red;
}
.light_letters .fade {
  animation: fade 6s linear infinite;
}
@keyframes fade {
  0%,9%,11%,13%,15%,41%,43%,45% {
    text-shadow: 0 0 5px red, 0 0 10px red, 0 0 50px red, 0 0 50px red;
    opacity: 1;
  }
  12%,14%,16%,42%,44% {
    opacity: 0.6;
    text-shadow: none; 
  }
}
.light_letters .fade_two {
  animation: fade 4s linear infinite;
}
@keyframes fade_two {
  0%,8%,11%,14%,15%,47%,49%,51% {
    text-shadow: 0 0 5px red, 0 0 10px red, 0 0 50px red, 0 0 50px red;
    opacity: 1;
  }
  10%,12%,13%,44%,46% {
    opacity: 0.6;
    text-shadow: none; 
  }
}
.light_letters .flicker {
  animation: flicker 5s 1s linear infinite;
}
@keyframes flicker {
  49% {
    text-shadow: 0 0 5px red, 0 0 10px red, 0 0 50px red, 0 0 50px red;
    opacity: 1;
  }
  0%,48%,50%,52%,100% {
    opacity: 0.6;
    text-shadow: none; 
  }
}
.light_letters .sparkle {
  animation: sparkle 3s 3s linear infinite;
}
@keyframes sparkle {
  0%,9%,11%,13%,15%,41%,43%,45% {
    text-shadow: 0 0 5px red, 0 0 10px red, 0 0 50px red, 0 0 50px red;
    opacity: 1;
  }
  10%,12%,14%,42%,44% {
    opacity: 0.6;
    text-shadow: none; 
  }
}
            

Erklärung

Um diesen Effekt auszulösen werden hier gleich mehrere Dinge gelichzeitig getan. Neben dem grundsätzlichen "Beleuchten" der Buchstaben durch text-shadow werden einzelne Elemente nochmal mit einem besonderen Effekt und einer Animation belegt. Dieser wird durch das erstellen von Animationen und Keyframes realisiert.