.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; ) )Zobacz Pen jrWwWM autorstwa Geoffa Grahama (@geoffgraham) na CodePen.
Uwagi:
- Demo opiera się na flexboksie, więc może to wpłynąć na układ podczas testowania
- Zakłada użycie Autoprefixera
- Szerokość kontenera tekstu zostanie określona przez długość używanego tekstu
- Dodanie większej liczby kroków do
typinganimacji zwiększy płynność pisania - Dostosuj w
letter-spacingoparciu o używaną rodzinę i rozmiar czcionki
Jeszcze!
Niektórzy używają JavaScript, który czasami może być preferowany (dosłowne dodawanie znaku na raz bardziej przypomina prawdziwą maszynę do pisania), a czasami nie (potencjalne problemy z dostępnością).
Zobacz animację Pen Typewriter czystego CSS autorstwa Thiago Teles Pereira (@thiagoteles) na CodePen.
Zobacz maszynę do pisania Pen JS autorstwa Simona Shahriveri (@ hi-im-si) na CodePen.
Zobacz maszynę do pisania Pen autorstwa gavra (@gavra) na CodePen.
Zobacz maszynę do pisania Pen CSS autorstwa Danielgroen (@danielgroen) na CodePen.
Zobacz Pen Tippy-tappy-typer autorstwa Stove (@stevn) na CodePen.
Zobacz artykuł Joeri Boudewijns (@Bojoer) na CodePen: pisanie wielu wierszy za pomocą migającego znaku pisma CSS.