Przejście CSS3 - efekt zanikania

Arkusz stylów kaskadowych zapewnia wiele właściwości stylizacji elementów HTML. Te właściwości obejmują prostą styl animacji. Ponadto efekty zanikania i zanikającego należą do tych powszechnych. CSS „przemiana”Własność i„animacja”Z regułami @KeyFrame pomaga zastosować animację do elementów HTML.

Ten artykuł ilustruje metodę dodawania efektów zanikania na różne elementy HTML.

Jak dodać efekt zanikający do tekstu?

„„animacja„Własność można użyć do dodania efektu zanikania do tekstu. Aby to zrobić, najpierw w pliku HTML, dodaj element „” i przypisz go „Fadeout-Text" ID:

Linuxint

Styl##fadeout-text ”

„„#Fadeout-Text”Służy do uzyskania dostępu do utworzonego identyfikatora o identyfikatorze„Fadeout-Text”I zastosuj następujące właściwości:

#fadeout-text
szerokość: 100%;
Kolor: ciemny;
Rozmiar czcionki: 6em;
Text-Align: Center;
Font-Family: Fantasy;
odstępy między literami: .2em;
Animacja: Fadeout 5s;

Tutaj:

• "szerokość”Określa szerokość elementu div.
• "kolor”Definiuje tekst elementu lub kolor czcionki.
• "rozmiar czcionki”Określa rozmiar czcionki.
• "tekst-align”Określa wyrównanie tekstu.
• "rodzina czcionek”Określa styl czcionki.
• "odstępy między literami”Ustawia odstępy między postaciami.
• "animacja„Właściwość ustawia nazwę animacji”Fadeout”I czas„5s„Jak pięć sekund.

Zdefiniuj zasadę „@KeyFrames” na właściwości animacji

Aby zastosować zachowanie animacji w elemencie, wspomnij o „animacja„Nazwa po„@Keyframe„Słowo kluczowe w następujący sposób:

@Keyframes Fadeout
0%
Krycie: 1;

100%
Krycie: 0;

Poniżej znajduje się wyjaśnienie powyższego fragmentu kodu:

• "0%”Definiuje początek animacji.
• "100%”Definiuje koniec animacji.
• "nieprzezroczystość„Własność jest wykorzystywana do dostosowania poziomu przezroczystości elementu.

Wyjście

Jak dodać efekt zanikający na zawisie?

W HTML możliwe jest również zastosowanie efektu zanikania, gdy użytkownik unosi mysz na element.

Przykład

Poniższy przykład instruuje, jak zastosować efekt zanika.

Styl identyfikator „fadeout-text”

Po pierwsze, określ „nieprzezroczystość" Jak "100%”Oprócz innych nieruchomości w stylu:

Krycie: 100%;

Dodaj pseudo-elector „: Hover”

#Fadeout-Text: Hover
Krycie: 10%;
przejście: 3s;

„„#Fadeout-Text: Wover”Służy do zastosowania określonych właściwości na elemencie na zawisie. Tutaj "przemiana„Własność zmienia ruch elementu w ciągu czasu trwania.

Wyjście

Jak dodać efekt zanikający do obrazów?

Dodawanie efektów animacji na obrazach jest jedną z najbardziej zabawnych funkcji aplikacji internetowej. Za pomocą wcześniej omawianej koncepcji możesz również zniknąć obraz na stronie internetowej.

Przykład

Dodać "”Element i przypisz go identyfikator„Fadeout-Image”:

Style identyfikator „Fadeout-Image”

„„#Fadeout-Image”Służy do uzyskania dostępu do„ Fadeout-Image ”HTML i zastosowania następujących właściwości:

#fadeout-image
szerokość: 100%;
Wysokość: 50%;
Image tła: URL (/obrazy/noc-.jpg);
Powtórzenie tła: bez powtórzenia;
Rozmiar tła: okładka;
Pozycja: absolutna;
Animacja: Fadeout 5s;

W powyższym kodzie:

• "zdjęcie w tle”Definiuje adres URL obrazu.
• "powtarzanie tła”Definiuje nie powtarzanie obrazu.
• "Rozmiar tła”Określa rozmiar obrazu tła.
• "pozycja„Nieruchomość jako„absolutny”Ustawia pozycję obrazu istotną dla najbliższego pozycjonowanego przodka.

Dodaj reguły „@Keyframe” do właściwości „Animation”

Podobnie wykorzystamy „@Keyframes„Zasady zastosowania efektu zanikającego, aby stworzyć efekt animacji:

@Keyframes Fadeout
0%
Krycie: 1;

100%
Krycie: 0;

Wyjście

Chodziło o dodanie efektu blaknięcia na elementy HTML za pomocą CSS.

Wniosek

Właściwości CSS, takie jak „nieprzezroczystość”,„animacja”,„przemiana", I "@Keyframe”Reguły są znaczące, aby dodać efekt blaknięcia na elementy HTML. „Krycie” ustawia poziom przejrzystości, właściwość „przejściowa” dostosowuje stopniowy ruch animacji, a właściwość „Animacja” wraz z zasadą „@KeyFrames” pomaga w dodaniu animacji do elementów. Ten post wyjaśnił procedurę, jak dodać efekt zanikający na elementy za pomocą CSS.