A klasszikus írógép-effektus létrehozásához nincs szükség JavaScriptre. Tanulja meg, hogyan kell ezt megtenni pusztán CSS-sel a step() függvény segítségével.
A Cascading Style Sheets (CSS) hosszú utat tett meg létrehozása óta. Vannak dolgok, amelyek csak a CSS-sel lehetségesek, és amelyekről nem tudhat, a nyelv folyamatos fejlődésének és fejlesztésének köszönhetően.
A CSS egyik legfigyelemreméltóbb előrelépése a CSS-funkciók megjelenése és finomítása, amelyek jelentősen kibővítették a webes tartalom stílusának lehetőségeit és erejét.
Mi az írógép effektus?
Az írógép-effektus egy szöveganimációs technika, amely a tartalom fokozatos leleplezésének folyamatát szimulálja, utánozva a gépelést, ahogy az a néző szeme előtt kibontakozik. Ez a hatás a régi iskolai írógépekre, a korai számítógép-terminálokra, ill Parancssori interfészek (CLI-k).
A szöveg fokozatos megjelenése feszültséget és intrikát ad, ami arra ösztönzi a hallgatóságot, hogy fokozottan figyeljen a kibontakozó üzenetre.
Hogyan működik a CSS Steps() függvény
A CSS funkciói olyan szintű rugalmasságot biztosítanak, amelyet korábban csak statikus stílusok használatával nehéz volt elérni. A lépések() A függvény egy népszerű funkció, amelyet CSS-animációkban használnak. Ezáltal az animációk úgy néznek ki, mintha különálló, diszkrét lépésekben haladnának a zökkenőmentes átmenet helyett.
lépések() egy animációs időzítő funkció, amely két paramétert vesz fel. Az első paraméter az animáció által megtett lépések számát jelöli. A második paraméter határozza meg az egyes lépések viselkedését. A szintaxis a lépések() a függvények így néznek ki:
animation-timing-function: steps(n, direction)
A fenti kódblokkban a lépések() A függvénynek két paramétere van: n és irány. A irány paraméter bármelyik lehet Rajt vagy vége.
Beállítása a irány nak nek Rajt biztosítja, hogy az első lépés az animáció indulásakor azonnal befejeződjön. Ezzel szemben a irány nak nek vége lefut az utolsó lépés az animáció végén. Hogy szemléltesse a fontosságát a lépések() függvényt, nézze meg a következő HTML-kódot:
<divclass="container">
<div>div>
div>
A fenti kódblokk meghatározza a tartály div gyerekkel div. Ha azt szeretné, hogy a gyermek div átcsússzon a képernyőn, használja a következő CSS-animációkat:
.container {
background-color: blue;
}div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
A fenti kódblokk a @keyframes szabály az animáció meghatározásához nevezett Movebox. Ezt az animációt ezután a gyermek div-re alkalmazzuk, aminek hatására az egyenletesen mozog a képernyőn egy végtelen ciklusban.
a GIPHY-n keresztül
Ha nem szereti a sima animációt, és "szaggatott" hatást szeretne elérni, használhatja a lépések() így működik:
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
animation-timing-function: steps(10, end);
}
Ahogy az alábbi GIF-en is látható, amely tartalmazza a lépések() A 10-es paraméterértékű függvény lépésenként animálja a gyermek div-t a sima animáció helyett. Minél nagyobb a lépések száma, annál kevésbé fog kinézni az animáció.
a GIPHY-n keresztül
A fenti példában a irány paraméter megadva. Ha azonban kihagyja a irány, a böngésző használni fogja vége alapértelmezett értékeként irány.
Írógép-effektus létrehozása
Most, hogy megérted, hogyan a lépések() funkció működik, itt az ideje, hogy mindazt, amit tanult, a gyakorlatba is átültesse. Hozzon létre egy új mappát, és adjon neki megfelelő nevet. Ebben a mappában adjon hozzá egy index.htm fájl a jelöléshez és a stílus.css fájl a stílushoz.
Ban,-ben index.htm fájlt, adja hozzá a következő alapkódot:
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>A fenti kódblokk határozza meg a jelölést egyszerű HTML weboldal. Van egy tartály div, amely egy másik div-t tartalmaz némi álszöveggel.
A szöveg animálása
Nyissa meg a stílusok.css fájlt, és állítsa be a szélességét tartály div tartalmának szélességére.
.container{
width: fit-content;
}
Ezután használja a @keyframes szabály, definiáljon egy animációt, amely szabályozza az animáció időbeli előrehaladását. Állítsa a szélességet "0%-ra" itt 0%. Nál nél 100%, állítsa a szélességet "100%-ra" a következőképpen:
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Ezután válassza ki az elemet az osztálynévvel szöveg és állítsa be a túlcsordulás tulajdonát rejtett. Ezzel biztosíthatja, hogy a szöveg rejtve maradjon mindaddig, amíg a gépelési effektus el nem indul. Ezt követően biztosítsa, hogy a szöveg egy sorban maradjon a beállításával fehér űr tulajdonát nowrap. Adja meg a szöveg osztályozzon egy monospace betűtípust, és adjon hozzá egy zöld függőleges szegélyt a szöveg jobb oldalán.
Ez a szegély kurzor megjelenését kelti. Állítsa be a megfelelőt betűméret és a élénkség tulajdonát típus-szöveg. Végül adjuk hozzá a lépések() funkciót a animációs időzítés funkció.
.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);
}
Amikor futtatja a kódot a böngészőben, a következőket kell látnia:
a GIPHY-n keresztül
Ha hosszabb gépelési effektust szeretne, beállíthatja az animáció időtartamát és a lépések számát, amelyet a lépések() funkció.
A kurzor életre keltése
Az írógép-effektus már majdnem kész, bár hiányzik egy funkció, ez a villogó kurzor. Emlékezzünk vissza, hogy az utolsó kódblokkban egy jobb oldali szegélyt állítottunk be a szövegen, amely kurzorként szolgál. A kurzorhoz animációt adhat hozzá a @keyframes szabályt is.
@keyframes cursor-blink {
0% {
border-color: transparent;
}
100% {
border-color: green;
}
}
Az egyéni animáció meghatározása után adja hozzá az animáció nevét a élénkség ingatlan a szöveg osztályba, és állítsa be az időtartamot 0,6 másodpercre.
.text{
/* Other style rules*/
animation: type-textforwards 4s,
cursor-blink.6sinfinite;
}
Most, amikor futtatja a kódot, egy villogó kurzort kell látnia.
a GIPHY-n keresztül
A CSS-funkciók ereje
A CSS-funkciók forradalmasították a webhelyek felépítésének módját, és figyelemre méltó eszköztárat kínálnak Önnek, mint fejlesztőnek. Ezek a sokoldalú funkciók olyan dinamikus stílust és interakciókat tesznek lehetővé, amelyek egykor összetett szkriptnyelvek számára voltak fenntartva.
A színmanipulációktól a reszponzív elrendezésekig, animációkig és kreatív átalakításokig a CSS-funkciók kibővítették a webdesign lehetőségeit. Olyan függvényekkel, mint a calc() a rugalmas számításokhoz, a linear-gradient() a lenyűgöző hátterekhez, és A lebilincselő animációkhoz a translate() segítségével tetszetős és vonzó felhasználót készíthetsz tapasztalatokat.
