A HTML nyelv biztosítja a weboldal szerkezetét, a CSS pedig az alkalmazás tervezését és formázását. Ez a kombináció lehetővé teszi animáció hozzáadását is, mivel az animált elemek vonzóbbak a statikus elemekhez képest. Azt is lehetővé teszi, hogy egy elem fokozatosan megváltoztassa a stílusát.
Ez a cikk bemutatja, hogyan alkalmazhatunk animációt az elemeken. Szóval, kezdjük!
Mik azok a CSS-animációs kulcskockák?
Az animáció elkészítéséhez az animációt a HTML elemhez kell kötnünk. Erre a célra használja a „ @keyframes ” után az animáció neve. Ez az összetevő határozza meg az animáció kezdetét és végét.
Hogyan állítsunk be CSS-animációs kulcskockákat?
Az animációs kulcskockák CSS-ben történő beállításához két példán megyünk keresztül.
1. példa
Az animációs kulcskockák CSS-ben történő beállításához hajtsa végre a következő lépéseket:
-
- Adjon hozzá egy -t, amelynek osztályneve ' fő-div ”.
- A div belsejében adjon hozzá egy másik div elemet az osztálynévvel img-peng ”.
- Ebben az img-peng divben adja hozzá az
-t a kép elhelyezéséhez. Ennek a címkének három attribútuma van, a ' src ' attribútum a kép elérési útjának megadásához, ' minden ' az az alternatív szöveg, amely akkor kerül hozzáadásra, ha a kép nem jelenik meg, és a ' szélesség ” attribútumot a kép szélességének megadásához.
HTML
< div osztály = 'fő-div' >
< div osztály = 'img-peng' >
< img src = 'images/pingvin.png' minden = 'pingvin' szélesség = '100' >
div >
div >
.main-div {
CSS
szélesség: 90 % ;
magasság: 90px;
háttérszín: rgb ( 67 , 66 , 87 ) ;
margó: 20px auto;
padding: 10px;
}
A CSS-ben a „ .main-div ” hozzáadásra kerül a div osztály eléréséhez. Az alábbiakban ismertetjük a rá alkalmazott tulajdonságokat:-
- ' szélesség ” tulajdonság értéke határozza meg a div szélességét.
- ' magasság ” tulajdonságot használják a div magasságának beállítására.
- ' háttérszín ” tulajdonság színt alkalmaz az elem hátterére.
- ' árrés ' a következőre van állítva: ' 20px autó ”, amely felülről és alulról jelzi a helyet, az auto pedig egyenlő helyet jelent balról és jobbról.
- ' párnázás ” tulajdonság értéke 10 képpont, ami szóközt alkalmaz az elem tartalma körül.
Stílus img-peng osztály
.img-peng {
szélesség: 50 képpont;
magasság: 100 képpont;
pozíció: relatív;
animáció: shake;
animáció-időtartam: 2s;
animáció-időzítés-funkció: 2s;
animáció-iteráció-szám: végtelen;
}
Az ' .img-peng ” a fenti HTML-fájlban említett div osztály eléréséhez használható. Ez a div elem stílusa az alábbiakban tárgyalt tulajdonságokkal rendelkezik:-
- ' szélesség ” tulajdonság értéke az elem szélességének beállítására szolgál.
- ' magasság ” tulajdonság értéke az elem magasságának beállítására szolgál.
- ' pozíció 'tulajdonsághoz az érték van hozzárendelve' relatív ”, ami azt jelenti, hogy a normál helyzetéhez képest lesz elhelyezve.
- ' élénkség ' név adva ' ráz ”. Az animációt azonban a követelménynek megfelelően nevezheti el.
- ' animáció-időtartam ” az animáció időtartamát jelöli, ami 2 másodperc.
- ' animációs időzítés funkció ” 2s értéket kap, ami azt jelenti, hogy 2 másodperc múlva az animáció befejeződik.
- ' animáció-iteráció-számlálás ” van beállítva végtelennek, ami azt jelenti, hogy ez az animáció végtelen időn belül fog megjelenni.
A @keyframes definiálása a to és from kulcsszavakkal
@ kulcskockák remegnek {
tól től {
felső: 50 képpont;
}
nak nek {
margó-alsó: 200 képpont;
}
}
A képhez beállított animációs kulcskockák leírása az alábbiakban található:-
- ' @keyframes ráz ” a shake animációnévre utal, amelyet a @keyframes kulcsszó követ. Ezen a szabályon belül az animáció viselkedése van megadva.
- A göndör zárójelben a „ tól től ” és „ nak nek ” kulcsszavak különböző intervallumokat adnak meg az animáció viselkedésének meghatározásához.
- Az ' tetejére ” tulajdonsághoz 50 képpont van hozzárendelve, ami azt jelenti, hogy az animáció a képernyő tetejétől 50 képponttól kezdődik, és a képernyő alján lévő 200 képpontig folytatódik.
Ennek eredményeként a következő kimenetet fogja látni:
Most engedje meg, hogy az animáció különböző időközönként eltérően viselkedjen. Ehhez használja a @keyframes animációs százalékait.A @keyframes megadása százalékos értékkel
@ kulcskockák remegnek {
0 % {
bal: -50 képpont ;
}
25 % {
balra: 50 képpont;
}
ötven % {
bal: -25 képpont ;
}
75 % {
balra: 25px;
}
100 % {
balra: 10px;
}
}
Tehát a fenti kódrészlet leírása itt található:-
- A százalékos értékek 0%, 25%, 50%, 75% és 100% az animációt különböző időközönként reprezentálják.
- Ráadásul 0%-nál a kép bal oldalán lévő szóköz a következő lesz -50 képpont ”. 25%-nál a bal oldali hely a következő lesz 50 képpont ”. 50%-nál a bal oldali hely a következő lesz -25 képpont ”. 75%-nál a bal hely a következő lesz 25 képpont ”, és amikor az animáció befejeződik (100%), a bal szóköz a „ 10 képpont ”.
A fenti kód a következő animációt jeleníti meg:
Vegyünk egy másik példát, hogy lássuk, hogyan állíthatunk be animációkat a képekhez.2. példa
A HTML-ben adjon hozzá egy
elemet, amelynek osztályneve ' Főoldal ”. Ebben aelemben helyezzen el még két div címkét „ osztályokkal felhő1 ” és „ felhő2 ”, ill.HTML
< div osztály = 'Főoldal' >
< div osztály = 'felhő1' > div >
< div osztály = 'felhő2' > div >
div >
test {
CSS
árrés: 0 ;
párnázás: 0 ;
}
A CSS-ben a következő CSS-tulajdonságokat rendeljük a body elemhez:-
- ' árrés ” tulajdonság, mint 0, nem ad szóközt az elem körül.
- ' párnázás ” tulajdonság 0 értékkel nem ad szóközt az elem tartalma körül.
Stílus főoldal div
.Főoldal {
háttér-kép: url ( / képeket / farkaséjszaka.png ) ;
háttér-ismétlés: nincs ismétlés;
háttér-méret: borító;
magasság: 100vh;
pozíció: relatív;
túlcsordulás: rejtett;
}
Itt:-
- ' .Főoldal ” a div osztály eléréséhez használható.
- ' háttérkép 'tulajdonsághoz az érték van hozzárendelve' url(/images/wolf-night.png) ” ahol a images az a mappa, amely a wolf-night.png képet tartalmazza.
- ' háttér-ismétlés 'tulajdonsághoz az érték van hozzárendelve' nem-ismétlés , ami azt jelenti, hogy a kép egyszer megjelenik.
- ' háttér méretű ''-ként van beállítva borító ” a teljes div elem kitöltéséhez.
- ' magasság ” 100 VH, ami a nézetablak magasságának 100%-a.
- ' pozíció ” relatívként beállítja a kép helyzetét az aktuális helyhez viszonyítva.
- ' túlcsordulás ” tulajdonság értéke rejtettre van állítva, hogy elrejtse a kép azon részét, amely túl nagy ahhoz, hogy beleférjen a tárolóba.
Stílusfelhő1 osztály
.felhő1 {
háttér-kép: url ( / képeket / cloud.png ) ;
background-size: tartalmaz;
háttér-ismétlés: nincs ismétlés;
pozíció: abszolút;
felső: 100 képpont;
szélesség: 500 képpont;
magasság: 300 képpont;
animáció: cloudanimation1;
animáció-időtartam: 70s;
animáció-iteráció-szám: végtelen;
}
A div osztály cloud1 a következő ismertetett tulajdonságokkal kerül alkalmazásra:-
- ' .felhő1 ” a div osztály cloud1 elérésére szolgál.
- ' háttérkép ” tulajdonság url(/images/cloud.png) néven van beállítva, ahol a képek a cloud.png képet tartalmazó mappát jelentik.
- ' háttér méretű ' értékkel ' tartalmaz ” biztosítja a kép láthatóságát.
- ' háttér-ismétlés ' tulajdonság, amelynek értéke ' nem-ismétlés ” a képet nem ismétlődőként jeleníti meg.
- ' pozíció ” abszolút pozícióba helyezi a képet a szülőeleméhez képest.
- ' tetejére ” tulajdonság a képet felülről 100 képpontra állítja.
- ' szélesség ” tulajdonságot használják a div elem szélességének 500 képpontra történő beállításához.
- ' magasság ” tulajdonságot használják a div elem magasságának 300 képpontra történő beállítására.
- ' élénkség ” a cloudanimation1 nevet kapja.
- ' animáció-időtartam ” az animáció időtartamát jelöli, ami 70 másodperc.
- ' animáció-iteráció-számlálás ” a végtelen értékhez van rendelve, amely végtelen ideig ismétli az animációt.
Eddig a CSS-tulajdonságokat a div osztály főoldalára és a cloud1-re alkalmaztuk. Most, a következő részben a következő div osztályt, a cloud2 stílust fogjuk kialakítani.
Stílus felhő2 osztály
.felhő2 {
háttér-kép: url ( / képeket / cloud.png ) ;
background-size: tartalmaz;
háttér-ismétlés: nincs ismétlés;
pozíció: abszolút;
felső: 50 képpont;
szélesség: 200 képpont;
magasság: 300 képpont;
animáció: cloudanimation2;
animáció-időtartam: 15s;
animáció-iteráció-szám: végtelen;
}
A div osztály cloud2 az alábbiakban ismertetett tulajdonságokkal kerül alkalmazásra:-
- ' .felhő2 ” a cloud2 osztály elérésére szolgál.
- ' háttérkép ” tulajdonság url(/images/cloud.png) néven van beállítva, ahol a kép egy mappa, amely a cloud.png képet tartalmazza.
- ' háttér méretű ” olyan értéket tartalmaz, amely biztosítja a kép láthatóságát.
- ' háttér-ismétlés ” tulajdonság a no-repeat értékkel nem ismétlődőként jeleníti meg a képet.
- ' pozíció ” abszolút pozícióba helyezi a képet a szülőeleméhez képest.
- ' tetejére ” tulajdonság a képet felülről 100 képpontra állítja.
- ' szélesség ” tulajdonságot használják a div elem szélességének beállítására.
- ' magasság ” tulajdonságot használják a div elem magasságának beállítására.
- ' élénkség ” a cloudanimation2 nevet kapja.
- ' animáció-időtartam ” az animáció időtartamát jelöli.
- ' animáció-iteráció-számlálás ” a végtelen értékhez van rendelve, amely végtelen ideig ismétli az animációt.
Adja meg a @keyframes-et a felhőanimációhoz1
@ kulcskockák felhőanimáció1 {
nak nek {
balra: 0px;
}
tól től {
bal: 100 % ;
}
}
A cloud1 div az alábbiakban leírt animációhoz van kötve:-
- ' @keyframes felhőanimáció1 ” az animáció cloudanimation1 nevét a @keyframes kulcsszó követi, amely az átmenet meghatározására szolgál.
- A @keyframes kulcsszó megadja, hogy az animáció hogyan készül el az elejétől a végéig a felhőképeken.
- Az ' nak nek ” és „ tól től ” kulcsszavak azt határozzák meg, hogy a cloud1 100%-ról a képernyő 0 képpontjára fog mozogni.
Adja meg a @keyframes-et a felhőanimációhoz2
@ kulcskockák felhőanimáció2 {
0 % {
bal: 0 % ;
}
100 % {
bal: 100 % ;
}
}
A div osztály cloud2 az alábbiakban ismertetett animációhoz van társítva:-
- ' @keyframes felhőanimáció2 ” jelenti a cloudanimation2 animáció nevét, amelyet a @keyframes kulcsszó követ, amely az animáció meghatározására szolgál.
- Az ' 0% ” és „ 100% ” jelenti az animáció elejét és végét.
- Az animáció 0%-ánál a felhő a bal oldalon lenne 0%-ra beállított értékkel, és fokozatosan a szélesség 100%-ára fog mozogni.
Kimenet
Szuper! Megbeszéltük, hogyan adhatunk sikeresen animációt az elemekhez a @keyframes kulcsszó használatával.Következtetés
A CSS lehetővé teszi, hogy stílusokat alkalmazzunk HTML elemekre. A CSS animációja átmenetet hajt végre egyik stílusról a másikra. Két összetevőből áll, az animációs stílusokból és a kulcskockákból. Az animációs stílusok különböző tulajdonságokat képviselnek, például a nevüket, az animáció időtartamát, az animáció iterációinak számát stb. Míg a kulcskép komponens határozza meg az animáció elejét és végét. Ez az útmutató az animációs kulcskockák beállítását mutatja be példákkal.
- Adjon hozzá egy