Ten artykuł zapewni:
- Metoda 1: Efekt zanikania przy użyciu właściwości animacji CSS
- Metoda 2: Efekt zanikania przy użyciu właściwości przejścia CSS
Metoda 1: Efekt zanikania przy użyciu właściwości CSS „animation”.
Aby zaprojektować prostą stronę HTML, dodaj na niej następujący element:
- Dodaj ' ” element wraz z „ styl ' atrybut. Atrybut „style” zawiera właściwości stylizacyjne elementu.
- Aplikować ' kolor ” w atrybucie style, aby zdefiniować kolor tekstu elementu.
- Następnie użyj „ ”, aby dodać tekst lub prosty akapit.
Poniżej znajduje się kod HTML:
< h2 styl = 'kolor: rgb(84, 8, 191)' >
Witryna z samouczkami Linuxhint
< / h2 >
< p > efekt zanikania przy ładowaniu strony < / p >
Strona HTML została pomyślnie utworzona:
W sekcji CSS, aby zastosować efekt pojawiania się na stronie, „ animacja ” Właściwość CSS zostanie użyta na „
Element „ciała” stylu
ciało {animacja: fadeInPage łatwość 3s;
liczba iteracji animacji: jeden ;
}
„
” jest stosowane z następującymi właściwościami CSS:- “ animacja ” to skrócona właściwość, która ustawia animację poprzez określenie wielu wartości. Tutaj zdefiniowana jest nazwa animacji, funkcja czasu animacji i czas trwania animacji.
- “ liczba iteracji animacji ” określa, ile razy animacja ma się powtarzać.
Zastosuj reguły „@klatki kluczowe” do „animacji”
@keyframes fadeInPage {0 % {
nieprzezroczystość: 0 ;
}
100 % {
nieprzezroczystość: jeden ;
}
}
Aby zdefiniować „ @klatki kluczowe ” dla animacji, podaj nazwę animacji po słowie kluczowym @keyframes. Zmodyfikuj zachowanie animacji w następujący sposób:
- Na ' 0% ” animacja, „ nieprzezroczystość ” ma przypisaną wartość 0. Oznacza to, że w momencie rozpoczęcia animacji obraz jest przezroczysty.
- Na ' 100% ” animacja, krycie jest ustawione na „ jeden ”, co odnosi się do jednolitego koloru.
Wyjście
Przejdźmy do drugiej metody stosowania efektu Fade-in przy ładowaniu strony.
Metoda 2: Efekt zanikania przy użyciu właściwości „przejścia” CSS
Dodaj „ załaduj ” atrybut w ramach „
W tym przykładzie kod CSS „ przemiana ” służy do dodawania efektu zanikania:
ciało {nieprzezroczystość: 0 ;
przejście: krycie 6s;
}
Poniżej znajduje się wyjaśnienie powyższych właściwości:
- “ nieprzezroczystość ” określa przezroczystość elementów.
- Korzystanie z CSS „ przemiana ”, stopniowo zmieniać wartości właściwości w określonym czasie.
Wyjście
Nauczyliśmy Cię metod korzystania z CSS w celu uzyskania efektu zanikania podczas ładowania strony.
Wniosek
Kilka właściwości CSS może być wykorzystanych do zastosowania efektu zanikania w elementach HTML. Dokładniej, „ animacja ”, „ nieprzezroczystość ', oraz ' przemiana ” można użyć do określenia animowanych efektów na stronach lub elementach. Animacje są dostosowywane za pomocą „ @klatka kluczowa ' zasady. W tym artykule wyjaśniono metody dodawania efektu zanikania podczas ładowania strony za pomocą CSS.