Norint sukurti klasikinį rašomosios mašinėlės efektą, jums nereikia JavaScript. Sužinokite, kaip tai padaryti naudojant tik CSS, naudodami funkciją žingsniai ().
Kaskadiniai stiliaus lapai (CSS) nuo pat įkūrimo nuėjo ilgą kelią. Yra dalykų, kuriuos galima padaryti naudojant tik CSS, apie kuriuos galbūt nežinote dėl nuolatinės kalbos raidos ir tobulinimo.
Vienas iš ryškiausių CSS pasiekimų yra CSS funkcijų atsiradimas ir tobulinimas, kurios žymiai išplėtė žiniatinklio turinio stiliaus galimybes ir galią.
Kas yra rašomosios mašinėlės efektas?
Rašomosios mašinėlės efektas – tai teksto animacijos technika, kuri imituoja laipsniško turinio atskleidimo procesą, imituojant spausdinimo veiksmą, kai jis atsiskleidžia prieš žiūrovo akis. Šis efektas primena senosios mokyklos rašomąsias mašinėles, ankstyvuosius kompiuterių terminalus arba Komandinės eilutės sąsajos (CLI).
Palaipsniui atsiradęs tekstas prideda įtampos ir intrigos elemento, skatinantis auditoriją atidžiai stebėti besiskleidžiančią žinutę.
Kaip veikia CSS žingsnių() funkcija
CSS funkcijos suteikia lankstumo, kurį anksčiau buvo sunku pasiekti naudojant vien statinius stilius. The žingsniai () funkcija yra populiari funkcija, naudojama CSS animacijose. Dėl to animacijos atrodo taip, lyg jos juda skirtingais, atskirais žingsniais, o ne sklandžiai pereina.
žingsniai () yra animacijos laiko nustatymo funkcija, kuri apima du parametrus. Pirmasis parametras nurodo veiksmų, kuriuos norite atlikti animacijoje, skaičių. Antrasis parametras apibrėžia kiekvieno žingsnio elgesį. Sintaksė, skirta žingsniai () funkcijos atrodo taip:
animation-timing-function: steps(n, direction)
Aukščiau esančiame kodo bloke žingsniai () funkcija turi du parametrus, būtent: n ir kryptis. The kryptis parametras gali būti bet kuris pradėti arba galas.
Nustatant kryptis į pradėti užtikrina, kad pirmasis veiksmas būtų atliktas vos prasidėjus animacijai. Tuo tarpu nustatant kryptis į galas bus atliktas paskutinis veiksmas, kai animacija bus baigta. Norėdami parodyti svarbą žingsniai () funkciją, pažvelkite į šį HTML kodą:
<divclass="container">
<div>div>
div>
Aukščiau pateiktas kodo blokas apibrėžia a konteineris div su vaiku div. Jei norite, kad antrinis „div“ slystų ekranu, naudokite CSS animacijas, tokias kaip:
.container {
background-color: blue;
}div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
Aukščiau pateiktas kodo blokas naudoja @keyframes taisyklė animacijai apibrėžti pavadintas Movebox. Tada ši animacija taikoma antriniam div, todėl jis sklandžiai juda ekrane begaliniu ciklu.
per GIPHY
Jei jums nepatinka sklandi animacija ir norite pasiekti „nepaprastą“ efektą, galite pasinaudoti žingsniai () veikia taip:
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
animation-timing-function: steps(10, end);
}
Kaip matote toliau pateiktame GIF, kuriame yra žingsniai () funkcija, kurios parametro reikšmė yra 10, animuos antrinį div etapais, o ne sklandžiai. Kuo didesnis žingsnių skaičius, tuo mažiau trūkinėja jūsų animacija.
per GIPHY
Aukščiau pateiktame pavyzdyje kryptis pateiktas parametras. Tačiau jei praleisite kryptis, naršyklė naudos galas kaip numatytąją reikšmę kryptis.
Rašomosios mašinėlės efekto kūrimas
Dabar, kai supratote, kaip žingsniai () funkcija veikia, laikas pritaikyti viską, ko išmokote. Sukurkite naują aplanką ir suteikite jam tinkamą pavadinimą. Tame aplanke pridėkite an index.htm žymėjimo failas ir a stilius.css stiliaus failas.
Viduje index.htm failą, pridėkite šį pagrindinį kodą:
html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<linkrel="stylesheet"href="style.css" />
head>
<body>
<divclass="container">
<divclass="text">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Reiciendis, tempore!
div>
div>
body>
html>Aukščiau pateiktas kodo blokas apibrėžia a žymėjimą paprasta HTML svetainė. Čia yra konteineris div, kuris turi kitą div su netikru tekstu.
Teksto animavimas
Atidaryk stiliai.css failą ir nustatykite jo plotį konteineris div iki jo turinio pločio.
.container{
width: fit-content;
}
Toliau, naudojant @keyframes Taisyklę, apibrėžkite animaciją, kuri valdo animacijos eigą laikui bėgant. Nustatykite plotį į „0%“. 0%. At 100%, nustatykite plotį į "100%" taip:
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Tada pasirinkite elementą su klasės pavadinimu tekstą ir nustatykite perpildymas nuosavybė į paslėptas. Tai padarę įsitikinsite, kad tekstas bus paslėptas tol, kol neprasidėjo spausdinimo efektas. Tai atlikę įsitikinkite, kad tekstas lieka vienoje eilutėje, nustatydami balta vieta nuosavybė į nowrap. Duok tekstą įrašykite monotarpinį šriftą ir pridėkite žalią vertikalią kraštinę teksto dešinėje.
Ši kraštinė suteiks žymeklio išvaizdą. Nustatykite tinkamą šrifto dydis ir animacija nuosavybė į tipas-tekstas. Galiausiai pridėkite žingsniai () funkcija į animacijos laiko nustatymo funkcija.
.text {
overflow: hidden;
white-space: nowrap;
font-family: "CourierNew", Courier, monospace;
border-right: solid 10pxgreen;
font-size: 23px;
animation: type-textforwards 4s;
animation-timing-function: steps(40);
}
Kai paleidžiate kodą naršyklėje, turėtumėte pamatyti štai ką:
per GIPHY
Jei norite ilgesnio spausdinimo efekto, galite reguliuoti animacijos trukmę ir žingsnių skaičių, nurodytą žingsniai () funkcija.
Žymeklio atgaivinimas
Rašomosios mašinėlės efektas beveik baigtas, nors trūksta vienos funkcijos – mirksinčio žymeklio. Prisiminkite, kad paskutiniame kodo bloke ant teksto buvo nustatyta dešinė kraštinė, kuri naudojama kaip žymeklis. Galite pridėti animaciją prie šio žymeklio naudodami @keyframes taisyklė taip pat.
@keyframes cursor-blink {
0% {
border-color: transparent;
}
100% {
border-color: green;
}
}
Apibrėžę pasirinktinę animaciją, pridėkite animacijos pavadinimą animacija turtas ant tekstą klasę ir nustatykite trukmę iki 0,6 sekundės.
.text{
/* Other style rules*/
animation: type-textforwards 4s,
cursor-blink.6sinfinite;
}
Dabar, kai paleisite kodą, turėtumėte pamatyti mirksintį žymeklį.
per GIPHY
CSS funkcijų galia
CSS funkcijos pakeitė svetainių kūrimo būdą ir siūlo jums, kaip kūrėjui, puikų įrankių rinkinį. Šios universalios funkcijos įgalina dinamišką stilių ir sąveiką, kuri kažkada buvo skirta sudėtingoms scenarijų kalboms.
Nuo manipuliacijų spalvomis iki reaguojančių maketų, animacijų ir kūrybinių transformacijų – CSS funkcijos išplėtė interneto dizaino galimybes. Su tokiomis funkcijomis kaip calc() lanksčiams skaičiavimams, linear-gradient() nuostabiam fonui ir Translate(), kad sukurtumėte žavias animacijas, galite sukurti vizualiai patrauklų ir patrauklų vartotoją patirtys.
