Ang artikulong ito ay magbibigay ng:
- Paraan 1: Fade-in Effect Gamit ang CSS animation Property
- Paraan 2: Fade-in Effect Gamit ang CSS transition Property
Paraan 1: Fade-in Effect Gamit ang CSS 'animation' Property
Upang magdisenyo ng isang simpleng HTML na pahina, idagdag ang sumusunod na elemento dito:
- Idagdag ang ' 'elemento kasama ang' istilo ” katangian. Ang attribute na 'style' ay naglalaman ng mga katangian ng pag-istilo ng elemento.
- Ilapat ang ' kulay ” property sa style attribute para tukuyin ang kulay ng text ng elemento.
- Pagkatapos nito, gamitin ang ' ” elemento upang magdagdag ng ilang teksto o isang simpleng talata.
Nasa ibaba ang HTML code:
< h2 istilo = 'kulay: rgb(84, 8, 191)' >
Website ng Tutorial sa Linuxhint
< / h2 >
< p > fade-in effect sa pag-load ng page < / p >
Matagumpay na nalikha ang HTML page:
Sa seksyong CSS, para ilapat ang fade-in effect sa page, ang “ animation 'Gagamitin ang CSS property sa '
Estilo 'katawan' Element
katawan {animation: fadeInPage ease 3s;
animation-iteration-count: isa ;
}
Ang '
' ay inilapat sa mga sumusunod na katangian ng CSS:- “ animation ” ay ang shorthand property na nagtatakda ng animation sa pamamagitan ng pagtukoy ng maraming value. Dito, tinukoy ang pangalan ng animation, animation-timing-function, at animation-duration.
- “ animation-iteration-count ” tumutukoy kung ilang beses dapat umulit ang animation.
Ilapat ang mga panuntunan sa '@keyframes' sa 'animation'
@keyframes fadeInPage {0 % {
opacity: 0 ;
}
100 % {
opacity: isa ;
}
}
Upang tukuyin ang ' @keyframes ” mga panuntunan para sa animation, banggitin ang pangalan ng animation pagkatapos ng keyword na @keyframes. Baguhin ang pagkilos ng animation gaya ng sumusunod:
- sa ' 0% 'animasyon, ang' opacity Ang ” property ay itinalaga ang value na 0. Ibig sabihin kapag nagsimula ang animation, transparent ang imahe.
- sa ' 100% ' animation, ang opacity ay nakatakda sa ' isa ”, na tumutukoy sa isang solidong kulay.
Output
Sumulong tayo sa pangalawang paraan para sa paglalapat ng Fade-in effect sa pag-load ng page.
Paraan 2: Fade-in Effect Gamit ang CSS 'transition' Property
Magdagdag ng ' onload ' attribute sa loob ng '
Sa halimbawang ito, ang CSS ' paglipat ” ang ari-arian ay ginagamit para magdagdag ng fade-in effect:
katawan {opacity: 0 ;
paglipat: opacity 6s;
}
Ang sumusunod ay ang paliwanag ng mga nabanggit na katangian:
- “ opacity Tinutukoy ng pag-aari ang transparency ng mga elemento.
- Paggamit ng CSS ' paglipat ”, unti-unting binabago ang mga halaga ng mga katangian sa isang tinukoy na oras.
Output
Itinuro namin sa iyo ang mga pamamaraan para sa paggamit ng CSS para sa isang fade-in effect sa pag-load ng page.
Konklusyon
Maaaring gamitin ang ilang mga katangian ng CSS upang maglapat ng fade-in effect sa mga elemento ng HTML. Mas partikular, ang ' animation ”, “ opacity ”, at “ paglipat Ang mga katangian ay maaaring gamitin upang tukuyin ang mga animated na epekto sa mga pahina o elemento. Ang mga animation ay inaayos sa pamamagitan ng paggamit ng “ @keyframe ” mga tuntunin. Ipinaliwanag ng artikulong ito ang mga paraan upang magdagdag ng fade-in effect sa pag-load ng page gamit ang CSS.