Verwenden Sie CSS3, um Tippeffekte zu simulieren (Codebeispiel)

In diesem Artikel erfahren Sie anhand von Codebeispielen, wie Sie mit CSS3 chinesische/englische Tippeffekte simulieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Empfehlung: CSS-Video-Tutorial

1. Prinzip der Verwendung von CSS3 zur Erzielung eines Tippeffekts

Um den Tippeffekt zu simulieren, müssen Sie die Zeichen nach und nach einzeln anzeigen.

Hier wird durch Ändern der Containerbreite die Breite des Containers schrittweise von 0 aus erhöht. Die Breite jeder Vergrößerung entspricht der Breite jedes Zeichens, sodass der Effekt des Tippens simuliert werden kann.

Um den Realismus zu verbessern, können Sie den Blinkeffekt des Cursors hinzufügen, damit Sie den Tippeffekt besser simulieren können.

Punkte, die implementiert werden müssen:

• So verwenden Sie CSS, um die Breite des Textcontainers schrittweise zu erhöhen

• Wie Sie die Breite des Containers jedes Mal entsprechend der Breite jedes Zeichens erhöhen

• So simulieren Sie das Blinken des Cursors. Effekt

Entsprechende Implementierungsmethode:

• Verwenden Sie Animationen in CSS3, um einen Animationseffekt zu erzielen.

• Verwenden Sie Schritte in der Animation, um Schritt für Schritt zu implementieren Animation

• Verwenden Sie die rechte Randanimation des Textcontainers, um den Cursor-Blinkeffekt zu erzielen

2. Umsetzung

1. Englischer Tippeffekt

html :

<h1 id="A-nbsp-miss-nbsp-is-nbsp-as-nbsp-good-nbsp-as-nbsp-a-nbsp-mile">A miss is as good as a mile.</h1>

cs s-Implementierung:

@keyframes typing {
    from { width: 0}
}
@keyframes blink-caret {
    50% { border-color: transparent; }
}
 
h1 {
    font: 200% monospace;
    border-right: .08em solid;
    width: 28ch;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 10s steps(28, end),
               blink-caret .5s step-end infinite alternate; //这里的alternate是为了让光标闪烁的正常一点
}

Da es sich hier um eine Implementierung des englischen Typisierungseffekts handelt, verwendet die Schriftart eine Monospace-Schriftart mit der Längeneinheit ch (1ch ist die Breite der Zahl 0 in der aktuellen Schriftart). Unter der Monospace-Schriftart beträgt die Breite anderer Zeichen ebenfalls 1ch. Auf diese Weise können Sie die Breite des Textcontainers = die Anzahl aller Zeichen * 1ch festlegen.

Lassen Sie die Breite des Textcontainers mithilfe von Animationsschritten schrittweise von 0 auf die tatsächliche Breite ansteigen.

Schritte können die Animation in abzuspielende Schritte unterteilen, da es 28 Zeichen gibt und die fortlaufende Animation zum Abspielen in 28 Schritte unterteilt werden muss, um jedes Zeichen einzeln anzuzeigen.

Blink-Caret-Animation wird verwendet, um den Blinkeffekt des Cursors zu erzielen, der durch Ändern der Transparenz des rechten Randes und wiederholtes Abspielen erreicht wird. 2. Chinesischer Tippeffekt Anzahl chinesischer Schriftzeichen * 2ch.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3, um Tippeffekte zu simulieren (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!