Šis raksts sniegs:
- 1. metode: izbalēšanas efekts, izmantojot CSS animācijas rekvizītu
- 2. metode: izbalēšanas efekts, izmantojot CSS pārejas rekvizītu
1. metode: izbalēšanas efekts, izmantojot CSS “animācijas” rekvizītu
Lai izveidotu vienkāršu HTML lapu, pievienojiet tai šādu elementu:
- Pievienojiet ' ' elements kopā ar ' stils ” atribūts. Atribūts “style” satur elementa stila īpašības.
- Pielietojiet ' krāsa ” rekvizītu stila atribūtā, lai definētu elementa teksta krāsu.
- Pēc tam izmantojiet ' ” elementu, lai pievienotu tekstu vai vienkāršu rindkopu.
Zemāk ir HTML kods:
< h2 stils = 'krāsa: rgb(84, 8, 191)' >
Linuxhint apmācības vietne
< / h2 >
< lpp > izbalēšanas efekts lapas ielādes laikā < / lpp >
HTML lapa ir veiksmīgi izveidota:
CSS sadaļā, lai lapā lietotu izbalēšanas efektu, animācija CSS rekvizīts tiks izmantots HTML lapas elements.
Stila “ķermeņa” elements
ķermeni {animācija: fadeInPage ease 3s;
animācijas atkārtojumu skaits: viens ;
}
“
” tiek lietots ar šādiem CSS rekvizītiem:- ' animācija ” ir saīsināts rekvizīts, kas nosaka animāciju, norādot vairākas vērtības. Šeit ir definēts animācijas nosaukums, animācijas laika funkcija un animācijas ilgums.
- ' animācijas atkārtojumu skaits ” nosaka, cik reižu animācijai jāatkārtojas.
Lietojiet “@keyframes” noteikumus “animācijai”
@keyframes fadeInPage {0 % {
necaurredzamība: 0 ;
}
100 % {
necaurredzamība: viens ;
}
}
Lai definētu ' @keyframes ” animācijas noteikumus, aiz atslēgvārda @keyframes nosauciet animācijas nosaukumu. Mainiet animācijas darbību šādi:
- Pie “ 0% 'animācija, ' necaurredzamība ” rekvizīta vērtība ir 0. Tas nozīmē, ka, sākoties animācijai, attēls ir caurspīdīgs.
- Pie “ 100% ' animācija, necaurredzamība ir iestatīta uz ' viens ”, kas attiecas uz vienkrāsainu.
Izvade
Pāriesim pie otrās metodes izbalēšanas efekta piemērošanai lapas ielādes laikā.
2. metode: izbalēšanas efekts, izmantojot CSS “pārejas” rekvizītu
Pievienojiet ' ielāde ' atribūts sadaļā ' ” elements. Šis notikums tiek aktivizēts lapas ielādes laikā. Slodzes laikā korpusa elementa necaurredzamība ir iestatīta uz ' viens ”, kas attiecas uz vienkrāsainu:
< ķermeni ielāde = 'document.body.style.opacity='1'' >Šajā piemērā CSS ' pāreja ” rekvizīts tiek izmantots, lai pievienotu izbalēšanas efektu:
ķermeni {necaurredzamība: 0 ;
pāreja: necaurredzamība 6s;
}
Tālāk ir sniegts iepriekš minēto īpašību skaidrojums:
- ' necaurredzamība ” īpašība nosaka elementu caurspīdīgumu.
- Izmantojot CSS pāreja ”, noteiktā laika posmā pakāpeniski maina rekvizītu vērtības.
Izvade
Mēs esam iemācījuši jums metodes, kā izmantot CSS, lai lapas ielādes laikā samazinātu efektu.
Secinājums
Var izmantot vairākus CSS rekvizītus, lai HTML elementiem piemērotu izbalēšanas efektu. Konkrētāk, “ animācija ”, “ necaurredzamība ', un ' pāreja ” rekvizītus var izmantot, lai norādītu animētus efektus lapās vai elementos. Animācijas tiek pielāgotas, izmantojot ' @keyframe ” noteikumi. Šajā rakstā ir izskaidrotas metodes, kā pievienot izbalēšanas efektu lapas ielādei, izmantojot CSS.