Cascading Style Sheets (CSS) har kommet langt siden starten. Det er ting som er mulig med bare CSS som du kanskje ikke vet om, takket være den kontinuerlige utviklingen og forbedringen av språket.
En av de mest bemerkelsesverdige fremskrittene innen CSS er fremveksten og foredlingen av CSS-funksjoner, som har utvidet mulighetene og kraften til styling av webinnhold betydelig.
Innholdsfortegnelse
Hva er skrivemaskineffekten?
Skrivemaskineffekten er en tekstanimasjonsteknikk som simulerer prosessen med at innhold blir avduket gradvis, og etterligner skrivehandlingen mens det utspiller seg foran seerens øyne. Denne effekten minner om gamle skrivemaskiner, tidlige dataterminaler eller kommandolinjegrensesnitt (CLI).
Den gradvise fremtoningen av teksten tilfører et element av spenning og intriger, og oppmuntrer publikum til å følge nøye med på budskapet som utspiller seg.
Hvordan CSS steps() funksjonen fungerer
Funksjoner i CSS introduserer et nivå av fleksibilitet som tidligere var utfordrende å oppnå ved bruk av statiske stiler alene. Steps()-funksjonen er en populær funksjon som brukes i CSS-animasjoner. Det får animasjoner til å se ut som om de går videre i distinkte, diskrete trinn i stedet for jevn overgang.
steps() er en animasjonstidsfunksjon som tar inn to parametere. Den første parameteren angir antall trinn du vil at animasjonen skal ta. Den andre parameteren definerer oppførselen til hvert trinn. Syntaksen for steps()-funksjonene ser slik ut:
animation-timing-function: steps(n, direction)
I kodeblokken ovenfor har steps()-funksjonen to parametere, nemlig: n og retning. Retningsparameteren kan enten være start eller slutt.
Å angi startretningen sikrer at det første trinnet fullføres så snart animasjonen starter. Mens innstilling av retningen til slutt vil kjøre det siste trinnet når animasjonen er ferdig. For å illustrere viktigheten av steps()-funksjonen, ta en titt på følgende HTML-kode:
<div class="container">
<div></div>
</div>
Kodeblokken ovenfor definerer en container-div med en barne-div. Hvis du vil at barnedivisjonen skal gli over skjermen, bruker du CSS-animasjoner som dette:
.container {
background-color: blue;
}div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
Kodeblokken ovenfor bruker @keyframes-regelen for å definere en animasjon kalt movebox. Denne animasjonen blir deretter brukt på underordnet div, og får den til å bevege seg jevnt over skjermen i en uendelig sløyfe.
Hvis du ikke liker jevn animasjon og ønsker å oppnå en «hakkete» effekt, kan du bruke steps()-funksjonen slik:
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
animation-timing-function: steps(10, end);
}
Som du kan se i GIF-en nedenfor, vil inkorporering av steps()-funksjonen med en parameterverdi på 10 animere underordnet div i trinn i stedet for jevn animasjon. Jo høyere antall trinn, desto mindre hakkete vil animasjonen din se ut.
I eksemplet ovenfor er retningsparameteren gitt. Men hvis du utelater retningen, vil nettleseren bruke end som standardverdi for retning.
Opprette skrivemaskineffekten
Nå som du forstår hvordan steps()-funksjonen fungerer, er det på tide å sette alt du lærte ut i praksis. Opprett en ny mappe, og gi den et passende navn. I den mappen legger du til en index.htm-fil for markering og en style.css-fil for styling.
I index.htm-filen legger du til følgende boilerplate-kode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://wilku.top/how-to-create-a-typewriter-effect-with-css/style.css" />
</head>
<body>
<div class="container">
<div class="text">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Reiciendis, tempore!
</div>
</div>
</body>
</html>
Kodeblokken ovenfor definerer markeringen for et enkelt HTML-nettsted. Det er en container-div som inneholder en annen div med litt dummy-tekst.
Animering av teksten
Åpne styles.css-filen og sett bredden på container-div til bredden på innholdet.
.container{
width: fit-content;
}
Deretter, ved å bruke @keyframes-regelen, definerer du en animasjon som kontrollerer hvordan animasjonen utvikler seg over tid. Sett bredden til «0%» ved 0%. Ved 100 %, sett bredden til “100 %” slik:
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Deretter velger du elementet med klassenavnteksten og setter overflyt-egenskapen til skjult. Å gjøre dette vil sørge for at teksten forblir skjult så lenge skriveeffekten ikke har startet. Etter å ha gjort det, sørg for at teksten forblir på én linje ved å sette whitespace-egenskapen til nowrap. Gi tekstklassen en monospace-font og legg til en grønn vertikal kant til høyre for teksten.
Denne grensen vil gi utseendet til en markør. Angi riktig skriftstørrelse og animasjonsegenskapen til type-tekst. Til slutt legger du steps()-funksjonen til animasjons-timing-funksjonen.
.text {
overflow: hidden;
white-space: nowrap;
font-family: "Courier New", Courier, monospace;
border-right: solid 10px green;
font-size: 23px;
animation: type-text forwards 4s;
animation-timing-function: steps(40);
}
Når du kjører koden i nettleseren, bør du se dette:
Hvis du vil ha en lengre skriveeffekt, kan du justere animasjonens varighet og antall trinn spesifisert i steps()-funksjonen.
Gjør markøren til live
Skrivemaskineffekten er nesten fullført, selv om det mangler en funksjon, som er den blinkende markøren. Husk at i den siste kodeblokken ble en høyrekant satt på teksten for å tjene som markøren. Du kan legge til en animasjon til denne markøren ved å bruke @keyframes-regelen også.
@keyframes cursor-blink {
0% {
border-color: transparent;
} 100% {
border-color: green;
}
}
Etter å ha definert den tilpassede animasjonen, legg til animasjonsnavnet til animasjonsegenskapen i tekstklassen og sett varigheten til 0,6 sekunder.
.text{
animation: type-text forwards 4s,
cursor-blink .6s infinite;
}
Nå når du kjører koden, bør du se en blinkende markør.
Kraften til CSS-funksjoner
CSS-funksjoner har revolusjonert måten nettsteder bygges på, og tilbyr et bemerkelsesverdig verktøysett for deg som utvikler. Disse allsidige funksjonene muliggjør dynamisk styling og interaksjoner som en gang var reservert for komplekse skriptspråk.
Fra fargemanipulasjoner til responsive layouter, animasjoner og kreative transformasjoner, CSS-funksjoner har utvidet mulighetene for webdesign. Med funksjoner som calc() for fleksible beregninger, linear-gradient() for imponerende bakgrunner og translate() for fengslende animasjoner, kan du lage visuelt tiltalende og engasjerende brukeropplevelser.