.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; ) )Vaadake CodePenil Geoff Graham'i (@geoffgraham) pliiatsi jrWwWM.
Märkused:
- Demo tugineb flexboxile, nii et see võib testimisel paigutust mõjutada
- Eeldab Autoprefixeri kasutamist
- Tekstimahuti laius määratakse kasutatava teksti pikkuse järgi
typingAnimatsioonile täiendavate sammude lisamine suurendab sisestamise sujuvust- Kohandage kasutatava
letter-spacingfondipere ja fondisuuruse põhjal
Veel!
Mõni kasutab JavaScripti, mis võib mõnikord olla eelistatavam (sõna otseses mõttes märgi lisamine korraga tundub pigem päris kirjutusmasin) ja mõnikord mitte (potentsiaalsed juurdepääsetavuse probleemid).
Vaadake CodePenil Thiago Teles Pereira (@thiagoteles) Pen Typewriter animatsiooni puhast CSS-i.
Vaadake CodePenist Simon Shahriveri (@ hi-im-si) Pen JS kirjutusmasinat.
Vaadake CodePenilt gavra (@gavra) kirjutusmasinat Pliiats.
Vaadake CodePenilt Danielgroeni (@danielgroen) kirjutusmasinat Pen CSS.
Vaadake CodePeni saidil Stove (@stevn) Pen Tippy-tappy-typer.
Vaadake CodePenilt Joeri Boudewijnsi (@Bojoer) pliiatsi CSS-i, kirjutades mitu rida vilkuva karetiga.