Rakstāmmašīnas efekts CSS-triki

Anonim 
.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; ) )

Skatiet Geoff Graham (@geoffgraham) Pen jrWwWM vietnē CodePen.

Piezīmes:

  • Demonstrācija paļaujas uz flexbox, lai tas varētu ietekmēt izkārtojumu testēšanā
  • Pieņem, ka tiek izmantots Autoprefixer
  • Teksta konteinera platumu noteiks izmantotā teksta garums
  • Ja typinganimācijai pievienosiet vairāk darbību, palielināsiet rakstīšanas vienmērīgumu
  • Pielāgojiet, letter-spacingpamatojoties uz izmantoto fontu saimi un fonta lielumu

Vairāk!

Daži izmanto JavaScript, kas dažreiz var būt vēlams (burtiski pievienojot rakstzīmi vienlaikus šķiet vairāk kā īsta rakstāmmašīna), un dažreiz tas nav (iespējamās pieejamības problēmas).

Skatiet Thiago Teles Pereira (@thiagoteles) Pen Typewriter animācijas tīro CSS vietnē CodePen.

Skatiet Saimona Šahriveri (@ hi-im-si) Pen JS rakstāmmašīnu vietnē CodePen.

CodePen skatiet Gavras (@gavra) rakstāmmašīnu Pen.

Skatiet Danielgroen (@danielgroen) Pen CSS rakstāmmašīnu vietnē CodePen.

Skatiet Stove (@stevn) Pen Tippy-tappy-typer vietnē CodePen.

Skatiet Joeri Boudewijns (@Bojoer) vietnē CodePen Pen CSS, rakstot vairākas līnijas ar mirgojošu caret.