W tym poście zbadamy, jak zastosować przejścia za pomocą właściwości wyświetlania CSS.
Jak zastosować przejścia we właściwości „display” CSS?
Użytkownicy nie mogą stosować przejść bezpośrednio w CSS „ wyświetlacz ' własność. Istnieje jednak alternatywny sposób zastosowania przejść do właściwości wyświetlania. W tym celu wykonaj poniższą procedurę.
Krok 1: Utwórz kontener „”.
Najpierw utwórz kontener div za pomocą „
Krok 2: Dodaj nagłówek
Następnie wstaw nagłówek, używając dowolnego „ ' do ' ” tagi. Na przykład, ' ” dodaje nagłówek.
Krok 3: Dodaj dane do listy
W celu wstawienia danych w postaci zestawienia należy skorzystać z opcji „
< dz klasa = 'zwierzak domowy' >
< h1 > Lista zwierząt domowych < / h1 >
< że > Kura < / że >
< że > Kaczka < / że >
< że > Pies < / że >
< że > Kot < / że >
< że > Królik < / że >
< / dz >
Dane wyjściowe powyższego kodu są następujące:
Teraz przejdź do sekcji CSS do stylizacji listy.
Krok 4: Styl elementu „.pet-animal”.
Uzyskać dostęp do '
.zwierzak domowy {
granica : 2 piks kropkowany rgb ( 230 , piętnaście , piętnaście ) ;
margines : 50px ;
kolor tła : rgb ( 252 , 239 , 169 ) ;
}
Tutaj:
- “ granica ” służy do określenia granicy wokół elementu.
- “ margines ” określa przestrzeń wokół granicy elementu.
- “ kolor tła ” przydziela kolor z tyłu elementu.
Wynikowy obraz pokazuje wynik powyższego kodu:
Krok 5: Lista dodanych stylów „li”
Teraz uzyskaj dostęp do listy „ dz „kontener mający klasę” zwierzak domowy ' za pomocą ' .zwierzę domowe > li ” i zastosuj poniższe właściwości:
.zwierzak domowy > że {
widoczność : ukryty ;
nieprzezroczystość : 0,2 ;
przemiana : widoczność 0s , nieprzezroczystość 0,5s liniowy ;
}
Tutaj:
- „ widoczność CSS służy do ustawienia widoczności elementu bez zmiany układu dokumentu, takiego jak ukryty lub widoczny.
- “ nieprzezroczystość ” określa przezroczystość elementu.
- “ przemiana ” umożliwia użytkownikom płynną zmianę wartości właściwości w określonym czasie:
Krok 6: Zastosuj pseudoklasę „hover”.
Teraz zastosuj „ unosić się ” obiekt na liście:
.zwierzak domowy : unosić się > że {
widoczność : widoczny ;
nieprzezroczystość : jeden ;
}
„ :unosić się CSS to pseudoklasa, która wprowadza zmiany w czasie wykonywania, gdy wskaźnik myszy przesuwa się nad elementem. Pokaż listę za pomocą „ widoczność ” i ustaw przezroczystość za pomocą przycisku „ nieprzezroczystość ” Właściwości CSS do listy po najechaniu kursorem:
Można zauważyć, że pomyślnie zastosowaliśmy przejście na „ wyświetlacz ' własność.
Wniosek
Przejścia CSS nie można zastosować bezpośrednio do „ wyświetlacz ' własność. Można go jednak zastosować w inny sposób. Aby to zrobić, dodaj znacznik listy do dokumentu HTML, uzyskaj dostęp do listy według nazwy znacznika i zastosuj „ przemiana ”, „ nieprzezroczystość ', oraz ' widoczność ” Właściwości CSS na liście. Następnie skorzystaj z opcji „ : unosić się ” pseudo-klasę i ustaw wartość widoczności jako „ widoczny ”. W tym poście wyjaśniono, w jaki sposób przejście jest stosowane do właściwości wyświetlania CSS.
Najpierw utwórz kontener div za pomocą „
Krok 2: Dodaj nagłówek
Następnie wstaw nagłówek, używając dowolnego „ ' do ' ” tagi. Na przykład, ' ” dodaje nagłówek.
Krok 3: Dodaj dane do listy
W celu wstawienia danych w postaci zestawienia należy skorzystać z opcji „
< dz klasa = 'zwierzak domowy' >
< h1 > Lista zwierząt domowych < / h1 >
< że > Kura < / że >
< że > Kaczka < / że >
< że > Pies < / że >
< że > Kot < / że >
< że > Królik < / że >
< / dz >
Dane wyjściowe powyższego kodu są następujące:
Teraz przejdź do sekcji CSS do stylizacji listy.
Krok 4: Styl elementu „.pet-animal”.
Uzyskać dostęp do '
granica : 2 piks kropkowany rgb ( 230 , piętnaście , piętnaście ) ;
margines : 50px ;
kolor tła : rgb ( 252 , 239 , 169 ) ;
}
Tutaj:
- “ granica ” służy do określenia granicy wokół elementu.
- “ margines ” określa przestrzeń wokół granicy elementu.
- “ kolor tła ” przydziela kolor z tyłu elementu.
Wynikowy obraz pokazuje wynik powyższego kodu:
Krok 5: Lista dodanych stylów „li”
Teraz uzyskaj dostęp do listy „ dz „kontener mający klasę” zwierzak domowy ' za pomocą ' .zwierzę domowe > li ” i zastosuj poniższe właściwości:
.zwierzak domowy > że {widoczność : ukryty ;
nieprzezroczystość : 0,2 ;
przemiana : widoczność 0s , nieprzezroczystość 0,5s liniowy ;
}
Tutaj:
- „ widoczność CSS służy do ustawienia widoczności elementu bez zmiany układu dokumentu, takiego jak ukryty lub widoczny.
- “ nieprzezroczystość ” określa przezroczystość elementu.
- “ przemiana ” umożliwia użytkownikom płynną zmianę wartości właściwości w określonym czasie:
Krok 6: Zastosuj pseudoklasę „hover”.
Teraz zastosuj „ unosić się ” obiekt na liście:
.zwierzak domowy : unosić się > że {widoczność : widoczny ;
nieprzezroczystość : jeden ;
}
„ :unosić się CSS to pseudoklasa, która wprowadza zmiany w czasie wykonywania, gdy wskaźnik myszy przesuwa się nad elementem. Pokaż listę za pomocą „ widoczność ” i ustaw przezroczystość za pomocą przycisku „ nieprzezroczystość ” Właściwości CSS do listy po najechaniu kursorem:
Można zauważyć, że pomyślnie zastosowaliśmy przejście na „ wyświetlacz ' własność.
Wniosek
Przejścia CSS nie można zastosować bezpośrednio do „ wyświetlacz ' własność. Można go jednak zastosować w inny sposób. Aby to zrobić, dodaj znacznik listy do dokumentu HTML, uzyskaj dostęp do listy według nazwy znacznika i zastosuj „ przemiana ”, „ nieprzezroczystość ', oraz ' widoczność ” Właściwości CSS na liście. Następnie skorzystaj z opcji „ : unosić się ” pseudo-klasę i ustaw wartość widoczności jako „ widoczny ”. W tym poście wyjaśniono, w jaki sposób przejście jest stosowane do właściwości wyświetlania CSS.