Wie kann ich mit CSS3 einen Blinkeffekt ohne JavaScript oder Übergänge erstellen?

Blinkanimation ohne Übergänge mit CSS3

Frage:

Kann Text ohne Verwendung von JavaScript oder Textdekoration blinken? Nachahmung des klassischen Tag ohne kontinuierliche Übergänge?

Antwort:

Das Das Tag hatte in alten Browsern einen Arbeitszyklus von 80 %, was bedeutet, dass es 80 % der Zeit sichtbar und 20 % ausgeblendet war. Hier ist eine CSS-Lösung, die dieses Verhalten genau nachbildet und sich nur auf Text auswirkt:

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

Verwendung:

This is <span class="blink">blinking</span> text.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS3 einen Blinkeffekt ohne JavaScript oder Übergänge erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!