.typewriter h1 ( overflow: hidden; /* Ensures the content is not revealed until the animation */ border-right: .15em solid orange; /* The typwriter cursor */ white-space: nowrap; /* Keeps the content on a single line */ margin: 0 auto; /* Gives that scrolling effect as the typing happens */ letter-spacing: .15em; /* Adjust as needed */ animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; ) /* The typing effect */ @keyframes typing ( from ( width: 0 ) to ( width: 100% ) ) /* The typewriter cursor effect */ @keyframes blink-caret ( from, to ( border-color: transparent ) 50% ( border-color: orange; ) )Siehe den Pen jrWwWM von Geoff Graham (@geoffgraham) auf CodePen.
Anmerkungen:
- Die Demo basiert auf Flexbox, sodass das Layout beim Testen beeinträchtigt werden kann
- Übernimmt die Verwendung von Autoprefixer
- Die Breite des Textcontainers wird durch die Länge des verwendeten Textes bestimmt
- Wenn Sie der
typingAnimation weitere Schritte hinzufügen, wird die Eingabe reibungsloser - Passen Sie die
letter-spacingbasierend auf der verwendeten Schriftfamilie und Schriftgröße an
Mehr!
Einige verwenden JavaScript, was manchmal vorzuziehen ist (das buchstäbliche Hinzufügen eines Zeichens zu einem Zeitpunkt fühlt sich eher wie eine echte Schreibmaschine an) und manchmal nicht (potenzielle Bedenken hinsichtlich der Barrierefreiheit).
Sehen Sie sich die reine CSS-Animation für Schreibmaschinen von Thiago Teles Pereira (@thiagoteles) auf CodePen an.
Siehe die Pen JS-Schreibmaschine von Simon Shahriveri (@ hi-im-si) auf CodePen.
Siehe die Stiftschreibmaschine von gavra (@gavra) auf CodePen.
Siehe die Pen CSS-Schreibmaschine von Danielgroen (@danielgroen) auf CodePen.
Siehe den Pen Tippy-tappy-typer von Stove (@stevn) auf CodePen.
Weitere Informationen finden Sie im Stift-CSS zur Eingabe mehrerer Zeilen mit blinkendem Caret von Joeri Boudewijns (@Bojoer) auf CodePen.