Jak używać przejścia CSS w celu zniknięcia krycia

CSS zapewnia wiele korzystnych właściwości elementom HTML. Właściwości te pomagają użytkownikom dostosować elementy HTML, takie jak rozmiar, kolor, krycie, przejście i wiele innych. Mówiąc dokładniej, „przemiana„Własność pozwala deweloperom ustawienie poziomu przezroczystości i dodanie efektów do elementów HTML. Ta konkretna funkcja może sprawić, że strona internetowa jest bardziej zabawna i wciągająca.

Ten post będzie Cię poinformować o korzystaniu z przejścia CSS w celu zniknięcia w kryzysie.

Jak używać przejścia CSS w celu zniknięcia krycia?

CSS „przemiana„Własność jest wykorzystywana do stopniowego zmiany wartości właściwości w określonym czasie trwania. Podczas gdy CSS „nieprzezroczystość”Właściwość dostosowuje poziom przezroczystości elementów.

Aby użyć przejścia CSS w celu zniknięcia krycia, wykonaj podane kroki.

Krok 1: Utwórz kartę w HTML

Przede wszystkim:

• Dodać "”Element i przypisz go klasa„karta".
• Następnie uwzględnij „

  „Tag do ustawienia nagłówka i„

  „Element do określania treści tekstu.

• Następnie dodaj „„Tag dla obrazu. „„src”Atrybut określa adres URL obrazu i„klasa”Atrybut jest ustawiony jako„Fade-Img„Aby uzyskać dostęp do obrazu w CSS do stylizacji.

Html

Pan. Jan

Autor techniczny

Krok 2: Styl kartę

„„.karta„Klasa jest stylizowana z nieruchomościami poniżej listy:

.karta
szerokość: 300px;
Wysokość: 300px;
granica: 1px Solid RGB (232, 229, 232);
Margines: Auto;
Wyściółka: 15px;
RADIUS BRAVES: 10px;
Pozycja: względny;

Tutaj:

• "szerokość”Określa szerokość elementu.
• "wysokość”Określa wysokość elementu.
• "granica”Dodaje granicę wokół elementu.
• "margines”Generuje przestrzeń wokół elementu.
• "wyściółka”Produkuje przestrzeń wewnątrz granicy elementu.
• "Radiusz graniczny„Zaokrągla krawędzie elementu.
• "pozycja„Własność jest ustawiona na„względny”, Który jest wykorzystywany do ustawiania elementu względem jego pierwotnej pozycji.

Wyjście

Krok 3: Dostosuj obraz

„„.Fade-Img„Klasa jest wykorzystywana w CSS do stylizacji obrazu. Rozmiar obrazu i krycie zostaną dostosowane w tej klasie:

.fade-img
Pozycja: absolutna;
po lewej: 0;
TOP: 0;
Wysokość: 100%;
szerokość: 100%;
Object-Fit: Cover;
Krycie: 0.2;
Przejście: krycie .25s swobodność;
Kursor: wskaźnik;

Do „opisanych właściwości są dodawane do„Fade-Img" klasa:

• "pozycja”Z wartością„absolutny”Ustawia pozycję elementu odpowiadającą jego prawie pozycjonowanemu elementowi.
• „„szczyt" I "lewy”To właściwości przesunięcia, które dostosowują element od górnej, lewej, prawej i dolnej.
• „„szerokość" I "wysokość„Właściwości są używane do określenia obszaru elementu.
• "obiekt-dopasowanie„Własność o wartości”okładka”Sprawia, że ​​obraz wypełnia pojemnik.
• "nieprzezroczystość„Wartość wyznacza poziom przezroczystości.
• "przemiana„Własność o wartości”nieprzezroczystość .25s łatwość„Definiuje właściwość krycia, która stopniowo się porusza w ciągu czasu trwania„25s".
• "kursor„Właściwość definiuje styl kursora.

Krok 4: Dodaj nieprzezroczystość na zawisie

„„.FADE-IMG: HOVER”Jest wykorzystywany do zastosowania stylizacji do obrazu, gdy unosi się na nim urządzenie wskazujące. Ponadto, ":unosić się”To pseudoklasa CSS, która jest wykorzystywana do dodawania stylów na zawieszonej zawodach:

.Fade-Img: Hover
Krycie: 0.9;

Tutaj poziom krycia jest dostosowywany do „0.9".

Wyjście

Można zauważyć, że z powodzeniem zastosowaliśmy właściwość przejściową CSS do zanikania tła.

Wniosek

Aby dodać przejście dla tła blaknięcia krycia, najpierw ustaw „" obszar. Następnie dostosuj jego rozmiar i krycie, używając CSS "szerokość”,„wysokość", I "nieprzezroczystość" nieruchomości. Następnie podaj „przemiana„Własność do niego, która określa, w jaki sposób wartości właściwości zmieniają się stopniowo przez określony czas trwania. A później "nieprzezroczystość”Jest ponownie ustawiony na myszy unoszący się:unosić się„Pseudoklasa. W tym poście wyjaśniono procedurę, jak korzystać z właściwości przejściowej w celu zniknięcia krycia w CSS.