Korzystanie z CSS dla efektu zanikającego na obciążeniu strony

CSS pozwala nam dodać różne właściwości stylizacji, takie jak kolor, granica, rozmiar czcionki i wyrównanie tekstu do elementów HTML. Te właściwości stylizacyjne zapewniają atrakcyjny wygląd aplikacji. Ponadto istnieje kilka innych właściwości CSS, które pomagają nam dodać efekty animacji do elementów. Korzystanie z animacji może również zwiększyć zaangażowanie użytkowników na stronach internetowych.

Ten artykuł będzie zawierać:

• Metoda 1: Efekt zanikania za pomocą właściwości animacji CSS
• Metoda 2: Efekt blakania za pomocą właściwości przejściowej CSS

Metoda 1: Efekt blakania 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 „stylu” zawiera właściwości stylizacji elementu.

• Aplikować "kolor„Właściwość w atrybucie stylu, aby zdefiniować kolor tekstu elementu.
• Następnie użyj „

  „Element, aby dodać tekst lub prosty akapit.

Poniżej znajduje się kod HTML:

Witryna samouczka Linuxhint

Efekt zniknięcia na obciążeniu strony

Strona HTML jest utworzona pomyślnie:

W sekcji CSS, aby zastosować efekt zanikania na stronie, „animacja„Własność CSS będzie używana w„„Element strony HTML.

Element „Body” stylu

ciało
Animacja: FadeInpage EATE 3S;
Animacja-Iteration-Count: 1;

„” Jest stosowany z następującymi właściwościami CSS:

• "animacja”Jest właściwością skrótów, która ustawia animację, określając wiele wartości. Tutaj zdefiniowane jest nazwa animacji, funkcja animacji i czas trwania animacji.
• "Animacja-iteration-Count”Określa, ile razy animacja powinna się iterować.

Zastosuj reguły „@KeyFrames” na temat „Animacji”

@Keyframe FadeInpage
0%
Krycie: 0;

100%
Krycie: 1;

Zdefiniować „@Keyframes”Zasady animacji, wspomnij o nazwie animacji po słowach kluczowych @KeyFrame. Zmodyfikuj zachowanie animacji w następujący sposób:

• Na "0%„Animacja,„nieprzezroczystość„Własność przypisuje się wartość 0. Oznacza to, że kiedy zaczyna się animacja, obraz jest przezroczysty.
• Na "100%„Animacja, krycie jest ustawione na„1”, Który odnosi się do solidnego koloru.

Wyjście

Przejdźmy do drugiej metody zastosowania efektu zanikania na obciążeniu strony.

Metoda 2: Efekt zanikania przy użyciu właściwości „przejściowej” CSS

Dodaj „Onload”Atrybut w„ „" element. To wydarzenie jest wyzwalane na obciążeniu strony. Po obciążeniu krycie elementu ciała jest ustawione na „1”, Który dotyczy solidnego koloru:

W tym przykładzie CSS „przemiana„Własność jest wykorzystywana do dodania efektu zanikania:

ciało
Krycie: 0;
Przejście: krycia 6s;

Poniżej znajduje się wyjaśnienie wyżej wymienionych właściwości:

• "nieprzezroczystość„Własność definiuje przejrzystość elementów.
• Korzystanie z CSS "przemiana”Stopniowo zmieniają wartości właściwości w określonym czasie.

Wyjście

Nauczyliśmy Cię metod stosowania CSS w celu zanikania efektu na obciążeniu strony.

Wniosek

Kilka właściwości CSS można wykorzystać do zastosowania efektu zanikającego na elementy HTML. Mówiąc dokładniej, „animacja”,„nieprzezroczystość", I "przemiana„Właściwości można użyć do określenia animowanych efektów na stronach lub elementach. Animacje są dostosowywane za pomocą „@Keyframe" zasady. W tym artykule wyjaśniono metody dodania efektu blaknięcia na obciążeniu strony za pomocą CSS.