Skip to content
HTML.dk logo
  • Snippets
  • Tutorials
    • Lav din egen hjemmeside
    • Tjene penge på nettet
    • Guide til HTML
    • Guide til CSS
    • Artikler
  • Nyheder
  • Bidrag til sitet
Søgning

Skrivende tekst effekt med CSS

  • HTML.dk
  • 2. maj 20192. maj 2019
  • CSS snippets

Det her er en ret cool lille effekt, som kan bruges til forskellige ting. Hvis du f.eks. vil vise overfor dine besøgende på din hjemmeside, at de skal skrive noget, så kan du indsætte et stykke tekst og animerer det med CSS´en herunder, så teksten bliver skrevet på skærmen, mens den besøgende kigger med – ret fedt ikke!

.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; }
}

DEMO:

See the Pen CSS Typewriter Animation by Geoff Graham (@geoffgraham) on CodePen.


Sticky (frosne) overskrift-rækker på html-tabeller
Tilføj / Fjern brugerfelter i WordPress

Seneste artikler

  • Løsningen på bekymringer om privatliv på søgemaskiner
  • Sådan bliver du anonym på internettet
  • SEO baner vejen til mere online synlighed
  • Bliv selvstændig som studerende
  • Find mobilabonnementer her med Mobilabo

Mere fra HTML.dk

  • Alle snippets 24
  • Artikler 75
  • CSS snippets 13
  • HTML snippets 4
  • jQuery / JavaScript snippets 6
  • Nyheder 14
  • Scripts 1
  • Tutorials 7
  • Uncategorized 2
  • WordPress snippets 1

Kontakt

HTML.dk
Ceres Allé 7
Aarhus C
Skriv til os

Links

Om HTML.dk
Skriv til os!
Send et bidrag
Nyheder
Snippets

Nyt indhold fra HTML.dk

  • Løsningen på bekymringer om privatliv på søgemaskiner
  • Sådan bliver du anonym på internettet
  • SEO baner vejen til mere online synlighed
  • Bliv selvstændig som studerende
  • Find mobilabonnementer her med Mobilabo
  • Optimer dine daglige processer med et automatiseret lønsystem

HTML logo big