HTML kalba suteikia tinklalapio struktūrą, o CSS – tos programos dizainą ir formatavimą. Šis derinys taip pat leidžia pridėti animaciją, nes animuoti elementai atrodo patrauklesni, palyginti su statiniais elementais. Tai taip pat leidžia elementui palaipsniui keisti savo stilių.
Šiame straipsnyje bus paaiškinta, kaip elementams pritaikyti animaciją. Taigi, pradėkime!
Kas yra CSS animacijos raktiniai kadrai?
Norėdami sukurti animaciją, turime susieti animaciją su HTML elementu. Šiuo tikslu naudokite raktinį žodį „ @keyframes “, po kurio nurodomas animacijos pavadinimas. Šis komponentas nurodo animacijos pradžią ir pabaigą.
Kaip nustatyti CSS animacijos pagrindinius kadrus?
Norėdami nustatyti animacijos pagrindinius kadrus CSS, peržiūrėsime du pavyzdžius.
1 pavyzdys
Norėdami nustatyti animacijos pagrindinius kadrus CSS, atlikite šiuos veiksmus:
-
- Pridėkite , kurio klasės pavadinimas ' pagrindinis-div “.
- Div viduje pridėkite kitą div su klasės pavadinimu ' img-peng “.
- Šiame img-peng div viduje pridėkite
, kad įdėtumėte vaizdą. Ši žyma turi tris atributus, „ src ' atributas, nurodantis vaizdo kelią, ' viskas “ yra alternatyvus tekstas, kuris pridedamas, jei vaizdas nerodomas, o „ plotis “ atributas, nurodantis vaizdo plotį.
HTML
< div klasė = 'pagrindinis padas' >
< div klasė = 'img-peng' >
< img src = 'images/pingvinas.png' viskas = 'pingvinas' plotis = '100' >
div >
div >
.main-div {
CSS
plotis: 90 % ;
aukštis: 90 pikselių;
fono spalva: rgb ( 67 , 66 , 87 ) ;
paraštė: 20px automatinis;
pamušalas: 10px;
}
CSS sistemoje „ .main-div “ yra pridėtas, kad būtų galima pasiekti div klasę. Jai taikomos savybės paaiškintos toliau:-
- “ plotis “ ypatybės reikšmė apibrėžia div plotį.
- “ aukščio “ ypatybė naudojama div aukščiui nustatyti.
- “ fono spalva “ savybė pritaiko spalvą elemento fonui.
- “ marža “ yra nustatytas kaip “ 20px automobilis “, kuris nurodo tarpą iš viršaus ir apačios, o „auto“ reiškia vienodą erdvę iš kairės ir dešinės.
- “ kamšalas ” ypatybės vertė priskiriama 10 pikselių, o tai aplink elemento turinį suteikia vietos.
Stiliaus img-peng klasė
.img-peng {
plotis: 50 pikselių;
aukštis: 100 pikselių;
padėtis: santykinė;
animacija: purtyti;
animacija-trukmė: 2s;
animacija-laikas-funkcija: 2s;
animacija-iteracijų skaičius: begalinis;
}
„ .img-peng “ naudojamas norint pasiekti div klasę, paminėtą aukščiau esančiame HTML faile. Šis div elementas sukurtas pagal toliau aptartas savybes:-
- “ plotis ypatybės reikšmė naudojama elemento pločiui nustatyti.
- “ aukščio “ ypatybės vertė naudojama elemento aukščiui nustatyti.
- “ padėtis 'turtui priskiriama vertė' giminaitis “, o tai reiškia, kad jis bus nustatytas įprastos padėties atžvilgiu.
- “ animacija “ vardas suteikiamas kaip “ purtyti “. Tačiau animaciją galite pavadinti pagal reikalavimą.
- “ animacija-trukmė “ reiškia animacijos trukmę, kuri yra 2 sekundės.
- “ animacijos laiko nustatymo funkcija “ priskiriama 2 s reikšmė, o tai reiškia, kad po 2 sekundžių animacija bus baigta.
- “ animacija-iteracijų skaičius “ yra nustatytas kaip begalinis, o tai reiškia, kad ši animacija įvyks per begalinį laiką.
Apibrėžkite @keyframes su raktiniais žodžiais į ir iš
@ pagrindinių kadrų drebėjimas {
iš {
viršuje: 50 pikselių;
}
į {
paraštė-apačia: 200 pikselių;
}
}
Toliau pateikiamas paveikslėlyje nustatytų animacijos pagrindinių kadrų aprašymas:-
- “ @keyframes purtyti “ reiškia animacijos pavadinimo purtymą, po kurio yra raktinis žodis @keyframes. Šioje taisyklėje nurodoma animacijos elgsena.
- Garbanotuose skliausteliuose yra „ iš “ ir „ į “ raktiniai žodžiai nurodo skirtingus intervalus, kad apibrėžtų animacijos elgesį.
- „ viršuje ypatybei priskiriama 50 pikselių reikšmė, o tai reiškia, kad animacija prasideda nuo 50 pikselių nuo ekrano viršaus ir tęsiasi iki 200 pikselių apačioje.
Dėl to pamatysite tokią išvestį:
Dabar leiskite animacijai skirtingais intervalais elgtis kitaip. Norėdami tai padaryti, naudokite animacijos procentus @keyframes.Nurodykite @keyframes su procentais
@ pagrindinių kadrų drebėjimas {
0 % {
liko: -50 taškų ;
}
25 % {
kairėje: 50 pikselių;
}
penkiasdešimt % {
liko: -25 pikseliai ;
}
75 % {
kairėje: 25px;
}
100 % {
kairėje: 10px;
}
}
Taigi, aukščiau esančio kodo fragmento aprašymas paminėtas čia:-
- Procentinės reikšmės 0%, 25%, 50%, 75% ir 100% reiškia animaciją skirtingais intervalais.
- Be to, esant 0%, tarpas vaizdo kairėje bus ' -50 taškų “. Esant 25 proc., vieta kairėje bus „ 50 piks “. Esant 50%, vieta kairėje bus ' -25 pikseliai “. Esant 75 proc., kairėje erdvėje bus „ 25 piks “, o kai animacija bus baigta (100 %), kairėje erdvėje bus „ 10 piks “.
Aukščiau pateiktas kodas rodo šią animaciją:
Paimkime kitą pavyzdį, kad pamatytume, kaip galime nustatyti vaizdų animaciją.2 pavyzdys
HTML pridėkite
, kurio klasės pavadinimas ' Pagrindinis puslapis “. Į šįelementą įdėkite dar dvi div žymas su klasėmis ' debesis1 “ ir „ debesis2 “, atitinkamai.HTML
< div klasė = 'Pagrindinis puslapis' >
< div klasė = 'debesis1' > div >
< div klasė = 'debesis2' > div >
div >
kūnas {
CSS
marža: 0 ;
pamušalas: 0 ;
}
CSS kūno elementui priskirsime šias CSS ypatybes:-
- “ marža ypatybė kaip 0 nenurodo tarpo aplink elementą.
- “ kamšalas ” ypatybė, kurios vertė 0, nenurodo tarpo aplink elemento turinį.
Stilius pagrindinio puslapio skyr
.Pagrindinis puslapis {
fono vaizdas: url ( / vaizdai / vilkų naktis.png ) ;
fono kartojimas: nekartoti;
fono dydis: viršelis;
aukštis: 100vh;
padėtis: santykinė;
perteklius paslėptas;
}
Čia:-
- “ .Pagrindinis puslapis “ naudojamas norint pasiekti div klasę.
- “ fono vaizdas 'turtui priskiriama vertė' url(/images/wolf-night.png) “, kur vaizdai yra aplankas, kuriame yra vaizdas wolf-night.png.
- “ fono kartojimas 'turtui priskiriama vertė' nekartoti , o tai reiškia, kad vaizdas bus rodomas vieną kartą.
- “ fono dydžio “ yra nustatytas kaip „ viršelis “, kad užpildytumėte visą div elementą.
- “ aukščio “ yra 100 VH, tai yra 100 % peržiūros srities aukščio.
- “ padėtis “ kaip santykinis nustato vaizdo padėtį, palyginti su dabartine vieta.
- “ perpildymas ” nuosavybės vertė nustatyta kaip paslėpta, kad būtų paslėpta vaizdo dalis, kuri per didelė, kad tilptų į konteinerį.
Stilius debesis1 klasė
.debesis1 {
fono vaizdas: url ( / vaizdai / debesis.png ) ;
background-size: įtraukti;
fono kartojimas: nekartoti;
padėtis: absoliuti;
viršuje: 100 taškų;
plotis: 500 pikselių;
aukštis: 300 pikselių;
animacija: cloudanimation1;
animacija-trukmė: 70s;
animacija-iteracijų skaičius: begalinis;
}
Div klasė cloud1 taikoma su šiomis paaiškintomis savybėmis:-
- “ .debesis1 “ naudojamas norint pasiekti div klasės debesis1.
- “ fono vaizdas ” ypatybė nustatyta kaip url(/images/cloud.png), kur vaizdai yra aplankas, kuriame yra vaizdas cloud.png.
- “ fono dydžio 'su reikšme ' turėti “ užtikrina vaizdo matomumą.
- “ fono kartojimas “ nuosavybė, kurios vertė nustatyta kaip „ nekartoti “ rodomas vaizdas kaip nesikartojantis.
- “ padėtis “, kaip absoliučiai išdėsto vaizdą, palyginti su pirminiu elementu.
- “ viršuje “ ypatybė nustato vaizdą 100 piks. nuo viršaus.
- “ plotis “ ypatybė naudojama nustatant div elemento plotį iki 500 pikselių.
- “ aukščio ypatybė naudojama nustatant div elemento aukštį iki 300 pikselių.
- “ animacija “ priskiriamas pavadinimas cloudanimation1.
- “ animacija-trukmė “ reiškia animacijos trukmę, kuri yra 70 sekundžių.
- “ animacija-iteracijų skaičius “ priskiriama reikšmė begalinė, kuri kartos animaciją be galo daug kartų.
Iki šiol mes pritaikėme CSS ypatybes div klasės pagrindiniam puslapiui ir „Cloud1“. Dabar, kitame skyriuje, sukursime kitą div klasę, pavadintą cloud2.
Stilius debesis2 klasė
.debesis2 {
fono vaizdas: url ( / vaizdai / debesis.png ) ;
background-size: įtraukti;
fono kartojimas: nekartoti;
padėtis: absoliuti;
viršuje: 50 pikselių;
plotis: 200 pikselių;
aukštis: 300 pikselių;
animacija: cloudanimation2;
animacija-trukmė: 15s;
animacija-iteracijų skaičius: begalinis;
}
Div klasė cloud2 taikoma su savybėmis, kurios paaiškintos toliau:-
- “ .debesis2 “ naudojamas prieigai prie klasės debesis2.
- “ fono vaizdas ” ypatybė nustatyta kaip url(/images/cloud.png), kur vaizdas yra aplankas, kuriame yra vaizdas cloud.png.
- “ fono dydžio “ yra reikšmė, užtikrinanti vaizdo matomumą.
- “ fono kartojimas “ ypatybė, kurios vertė nustatyta kaip nekartoti, vaizdas rodomas kaip nesikartojantis.
- “ padėtis “, kaip absoliučiai išdėsto vaizdą, palyginti su pirminiu elementu.
- “ viršuje “ ypatybė nustato vaizdą 100 piks. nuo viršaus.
- “ plotis ypatybė naudojama div elemento pločiui nustatyti.
- “ aukščio “ ypatybė naudojama div elemento aukščiui nustatyti.
- “ animacija “ priskiriamas pavadinimas cloudanimation2.
- “ animacija-trukmė “ reiškia animacijos trukmę.
- “ animacija-iteracijų skaičius “ priskiriama reikšmė begalinė, kuri kartos animaciją be galo daug kartų.
Nurodykite @keyframes debesų animacijai1
@ raktinių kadrų debesų animacija1 {
į {
kairėje: 0px;
}
iš {
liko: 100 % ;
}
}
„Cloud1 div“ yra susietas su animacija, kuri aprašyta toliau:-
- “ @keyframes debesų animacija1 Po animacijos „Cloudanimation1“ pavadinimo rašomas raktinis žodis @keyframes, kuris naudojamas perėjimui nurodyti.
- Raktinis žodis @keyframes nurodo, kaip debesies vaizduose nuo pradžios iki pabaigos atliekama animacija.
- „ į “ ir „ iš “ raktiniai žodžiai nurodo, kad debesis1 pasikeis nuo 100% iki 0 ekrano taškų.
Nurodykite @keyframes debesų animacijai2
@ raktinių kadrų debesų animacija2 {
0 % {
liko: 0 % ;
}
100 % {
liko: 100 % ;
}
}
Div klasė cloud2 yra susieta su animacija, kuri paaiškinta toliau:-
- “ @keyframes debesų animacija2 “ reiškia animacijos pavadinimą cloudanimation2, po kurio seka raktinis žodis @keyframes, kuris naudojamas animacijai nurodyti.
- „ 0 % “ ir „ 100 % “ reiškia animacijos pradžią ir pabaigą.
- Esant 0 % animacijos, debesis būtų kairėje, o reikšmė nustatyta kaip 0 %, ir ji palaipsniui pereis į 100 % pločio.
Išvestis
Tai kieta! Aptarėme, kaip galime sėkmingai nurodyti elementų animaciją naudojant raktinį žodį @keyframes.Išvada
CSS leidžia mums taikyti stilius HTML elementams. CSS animacija atlieka perėjimus iš vieno stiliaus į kitą. Jį sudaro du komponentai: animacijos stiliai ir pagrindiniai kadrai. Animacijos stiliai atspindi skirtingas savybes, pvz., pavadinimą, animacijos trukmę, animacijos iteracijų skaičių ir kt. Tuo tarpu pagrindinio kadro komponentas apibrėžia animacijos pradžią ir pabaigą. Šiame vadove su pavyzdžiais paaiškinta, kaip nustatyti animacijos pagrindinius kadrus.
- Pridėkite