See artikkel pakub:
- 1. meetod: tuhmumisefekt, kasutades CSS-i animatsiooni atribuuti
- 2. meetod: tuhmumisefekt, kasutades CSS-i üleminekuatribuuti
1. meetod: tuhmumisefekt, kasutades CSS-i 'animatsiooni' atribuuti
Lihtsa HTML-lehe kujundamiseks lisage sellele järgmine element:
- Lisage ' ' element koos ' stiilis ” atribuut. Atribuut 'style' sisaldab elemendi stiiliomadusi.
- Rakenda ' värvi ” atribuut stiiliatribuudis, et määrata elemendi teksti värv.
- Pärast seda kasutage ' ” element teksti või lihtsa lõigu lisamiseks.
Allpool on HTML-kood:
< h2 stiilis = 'värv: rgb(84, 8, 191)' >
Linuxhinti õpetuse veebisait
< / h2 >
< lk > tuhmumisefekt lehe laadimisel < / lk >
HTML-leht on edukalt loodud:
CSS-i jaotises, et rakendada lehel tuhmumisefekti, tuleb animatsioon ' CSS-i atribuuti kasutatakse '
Stiili 'keha' element
keha {animatsioon: fadeInPage easy 3s;
animatsiooni iteratsiooni arv: üks ;
}
„
” rakendatakse järgmiste CSS-i atribuutidega:- “ animatsioon ” on stenogrammi atribuut, mis määrab animatsiooni, määrates mitu väärtust. Siin on määratletud animatsiooni nimi, animatsiooni ajastuse funktsioon ja animatsiooni kestus.
- “ animatsioon-iteratsiooni-loendus ” määrab, mitu korda animatsioon peaks korduma.
Rakendage animatsioonile '@keyframes' reegleid
@keyframes fadeInPage {0 % {
läbipaistmatus: 0 ;
}
100 % {
läbipaistmatus: üks ;
}
}
Et määratleda ' @keyframes ” animatsiooni reeglid, maini animatsiooni nimi märksõna @keyframes järel. Muutke animatsiooni käitumist järgmiselt.
- kohas ' 0% animatsioon, ' läbipaistmatus ” atribuudile omistatakse väärtus 0. See tähendab, et animatsiooni käivitumisel on pilt läbipaistev.
- kohas ' 100% ' animatsioon, läbipaistmatus on seatud väärtusele ' üks ”, mis viitab ühevärvilisele värvile.
Väljund
Liigume edasi teise meetodi poole, kuidas lehe laadimisel sisse tuhmumisefekti rakendada.
2. meetod: tuhmumisefekt, kasutades CSS-i üleminekuatribuuti
Lisa ' laadimine ' atribuut '
Selles näites on CSS ' üleminek ” atribuuti kasutatakse tuhmumisefekti lisamiseks:
keha {läbipaistmatus: 0 ;
üleminek: läbipaistmatus 6s;
}
Allpool on ülaltoodud omaduste selgitus:
- “ läbipaistmatus ” atribuut määrab elementide läbipaistvuse.
- CSS-i kasutamine ' üleminek ”, muudavad atribuutide väärtusi teatud aja jooksul järk-järgult.
Väljund
Oleme teile õpetanud meetodeid, kuidas kasutada CSS-i lehe laadimisel tuhmumise efekti saavutamiseks.
Järeldus
HTML-i elementidele tuhmumisefekti rakendamiseks saab kasutada mitut CSS-i atribuuti. Täpsemalt öeldes ' animatsioon ”, “ läbipaistmatus ”, ja „ üleminek ” atribuute saab kasutada lehtede või elementide animeeritud efektide määramiseks. Animatsioone reguleeritakse kasutades ' @keyframe ” reeglid. Selles artiklis on selgitatud meetodeid, kuidas lisada lehe laadimisel CSS-i abil tuhmumisefekti.