Wie erstelle ich mit CSS3 sanft verblassenden, blinkenden Text?

Blinkender Text mühelos gemacht mit CSS 3

Frage:

Wie kann ich blinkende Texte erzeugen? Text, der allmählich ausgeblendet und anschließend wieder eingeblendet wird, anstatt nur auszublenden und wieder aufzutauchen sofort?

Antwort:

Um diesen Effekt zu erzielen, müssen Sie in der Definition der Animations-Keyframes die Deckkraft auf 0 bei 50 % setzen. Dadurch wird sichergestellt, dass der Text während des Animationszyklus allmählich ausgeblendet und dann wieder eingeblendet wird.

Codeänderung:

Zuvor lautete der Code:

@-webkit-keyframes blinker {
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

Um das Problem zu beheben, ersetzen Sie es durch:

@-webkit-keyframes blinker {
  50% {
    opacity: 0;
  }
}

Diese Änderung führt dazu, dass der Text ausgeblendet wird 50 % der Animationsdauer und dann während der restlichen 50 % allmählich wieder eingeblendet.

Demo:

<div>

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

Und da haben Sie es! Blinkender Text mit nahtlosem Ein- und Ausblendeffekt, alles dank der Animationsfunktionen von CSS 3.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS3 sanft verblassenden, blinkenden Text?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!