Ovaj će članak pružiti:
- Metoda 1: Efekt zatamnjenja pomoću CSS svojstva animacije
- Metoda 2: Efekt zatamnjenja pomoću CSS svojstva prijelaza
Metoda 1: Efekt zatamnjenja pomoću CSS svojstva 'animacije'.
Da biste dizajnirali jednostavnu HTML stranicu, dodajte joj sljedeći element:
- Dodajte ' ' element zajedno s ' stil ” atribut. Atribut 'style' sadrži stilska svojstva elementa.
- Primijeni ' boja ” u atributu stila za definiranje boje teksta elementa.
- Nakon toga upotrijebite ' ” za dodavanje teksta ili jednostavnog odlomka.
Ispod je HTML kôd:
< h2 stil = 'boja: rgb(84, 8, 191)' >
Web stranica s vodičima za Linuxhint
< / h2 >
< str > efekt blijeđenja pri učitavanju stranice < / str >
HTML stranica je uspješno kreirana:
U odjeljku CSS, za primjenu efekta zatamnjenja na stranici, ' animacija ” CSS svojstvo koristit će se na “
Stilski element 'tijela'.
tijelo {animacija: fadeInPage ease 3s;
broj ponavljanja animacije: jedan ;
}
“
” se primjenjuje sa sljedećim CSS svojstvima:- “ animacija ” je skraćeno svojstvo koje postavlja animaciju određivanjem više vrijednosti. Ovdje se definira naziv animacije, funkcija vremena animacije i trajanje animacije.
- “ brojanje ponavljanja animacije ” definira koliko puta se animacija treba ponoviti.
Primijeni pravila '@keyframes' na 'animaciju'
@keyframes fadeInPage {0 % {
neprozirnost: 0 ;
}
100 % {
neprozirnost: jedan ;
}
}
Za definiranje ' @ključni okviri ” pravila za animaciju, navedite naziv animacije nakon ključne riječi @keyframes. Izmijenite ponašanje animacije na sljedeći način:
- u ' 0% ' animacija, ' neprozirnost ” svojstvu je dodijeljena vrijednost 0. To znači da je slika transparentna kada animacija počne.
- u ' 100% ', neprozirnost je postavljena na ' jedan “, što se odnosi na čvrstu boju.
Izlaz
Krenimo naprijed prema drugoj metodi za primjenu efekta Fade-in pri učitavanju stranice.
Metoda 2: Efekt zatamnjenja pomoću CSS svojstva 'prijelaza'.
Dodaj ' onload ' atribut unutar '
U ovom primjeru, CSS ' tranzicija ” svojstvo se koristi za dodavanje efekta blijeđenja:
tijelo {neprozirnost: 0 ;
prijelaz: neprozirnost 6s;
}
Slijedi objašnjenje gore navedenih svojstava:
- “ neprozirnost ” svojstvo definira transparentnost elemenata.
- Korištenje CSS-a ' tranzicija “, postupno mijenjati vrijednosti svojstava tijekom određenog vremena.
Izlaz
Naučili smo vas metodama korištenja CSS-a za efekt blijeđenja pri učitavanju stranice.
Zaključak
Nekoliko CSS svojstava može se koristiti za primjenu efekta blijeđenja na HTML elemente. Konkretnije, ' animacija ”, “ neprozirnost ', i ' tranzicija ” Svojstva se mogu koristiti za određivanje animiranih efekata na stranicama ili elementima. Animacije se podešavaju pomoću ' @ključni okvir ” pravila. Ovaj članak objasnio je metode za dodavanje efekta blijeđenja pri učitavanju stranice pomoću CSS-a.