.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; ) )Žr. Geoffo Grahamo (@geoffgraham) „Pen jrWwWM“ „CodePen“.
Pastabos:
- Demonstracija remiasi „flexbox“, todėl tai gali turėti įtakos testavimo išdėstymui
- Laikoma, kad naudojamas „Autoprefixer“
- Teksto talpyklos plotis bus nustatomas pagal naudojamo teksto ilgį
- Pridėjus daugiau veiksmų prie
typinganimacijos, tekstas bus sklandesnis - Koreguokite
letter-spacingatsižvelgdami į naudojamą šriftų šeimą ir šrifto dydį
Daugiau!
Kai kurie naudoja „JavaScript“, kuris kartais gali būti pageidautinas (pažodžiui pridedant simbolį vienu metu jaučiasi labiau kaip tikra rašomąja mašinėle), o kartais - ne (galimos prieinamumo problemos).
Peržiūrėkite Thiago Teles Pereira (@thiagoteles) „Pen Typewriter“ animacinę CSS animaciją „CodePen“.
„CodePen“ ieškokite Simono Shahriveri (@ hi-im-si) „Pen JS“ rašomosios mašinėlės.
„CodePen“ ieškokite gavra (@gavra) rašomosios mašinėlės rašiklio.
„CodePen“ ieškokite Danielgroen (@danielgroen) „Pen CSS“ rašomosios mašinėlės.
„CodePen“ rasite „Stove“ (@stevn) „Pen Tippy-tappy-typer“.
Peržiūrėkite Joeri Boudewijns (@Bojoer) „CodePen“ „Pen CSS“, rašydamas kelias eilutes su mirksinčia „Caret“.