Skip to main content

Blinkende Schrift

Übersicht

Eine kleine Bastelei um Schriftzüge blinken zu lassen...

Ich habe diese Spielerei mal irgendwo gesehen und nachgebaut - Also: Die Idee geklaut ;-)

Ich empfand es als nicht unwitzig um PopUps o.ä. etwas fetziger zu gestalten, zumal wir hier nur CSS beutzen.

MIEGELKE

HTML:

<div class="miegelke">
    
<b>MI<span>E</span>GEL<span>K</span>E</b></div>

CSS:

.miegelke b {
  font-size: 60px;
  color: #ffd966;
  text-shadow: 0 -90px 180px, 0 0 5px, 0 0 1em #4450ff, 0 0 0.8em #4450ff, 0 0 0.3em #4450ff, 0 15px 5px #000;
}

.miegelke b span {
  animation: blinken linear infinite 4s;
}

.miegelke b span:nth-of-type(2){
  animation: blinken linear infinite 3s;
}

@keyframes blinken {
  70% {color: inherit; text-shadow: inherit}
  75% {color: #333}
  80% {text-shadow: none}
  81% {color: inherit; text-shadow: inherit}
  82% {color: #333; text-shadow: none}
  90% {color: inherit; text-shadow: inherit}
  95% {color: #333; text-shadow: none}
  92.5% {color: inherit; text-shadow: inherit}
}