Przejście CSS wiele właściwości
Przykład 1
Uruchom ten kod, najpierw utworzając plik HTML. Otwieramy nowy plik, a następnie wybieramy HTML jako język w kodzie Visual Studio; Musimy umieścić „!„Wewnątrz pliku, który tutaj utworzyliśmy. Wszystkie podstawowe tagi HTML pojawiają się w tym pliku. Musimy tylko wpisać korpus HTML i link pliku CSS w „głowie.„Tutaj, w ciele, najpierw tworzymy nagłówek, a następnie akapit. Po tym akapicie tworzymy tutaj jedną pustą div. Użyjemy tego kodu HTML również w naszych następnych przykładach. Teraz przejdziemy do pliku CSS w celu dalszego kodowania. Zastosujemy właściwości przejściowe w tym DIV w pliku CSS.
Najpierw ustawiliśmy „div”, a jego „szerokość” to „100px” i „100px” dla „wysokości.”Następnie ustaw„ tło ”jako„ fioletowy.„„ Radiusz graniczny ”tego div to„ 50%”, więc pojawi się jako okrąg. Po tych wszystkich właściwościach zastosujemy właściwość „przejściowego” i umieścić tutaj „szerokość” i „2s”. Stosuje efekt przejścia na szerokość DIV i animuje przez 2SEC. Następnie używamy „zawisu” z „Div”, więc kiedy unosimy się nad tym divem, zmieni swoją szerokość na „300px”, ponieważ wybraliśmy „300px” jako „szerokość."
Wyjście tego kodu pokazuje, jak zmienia się właściwość przejściowa w szerokości elementu DIV. W tym filmie widać, że jego szerokość wzrasta, gdy unosimy mysz nad tym kołem Div. Gdy mysz nie jest ponad tym elementem, wróci do pierwotnej pozycji.
Video gracze.COM/WP-CONTENT/UPLOODS/2022/06/TRANSITION-PROPRYTY-PROFILE-1-MICrosoft -Edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Zastosuj klawisze strzałek w górę/w dół, aby zwiększyć lub zmniejszyć objętość.Przykład nr 2
Tutaj zastosujemy właściwość przejściową zarówno do szerokości, jak i wysokości. „Szerokość” Div to „120px”, a „wysokość” to również „120px”. „Tło” Div jest w kolorze „pomarańczowym”, a jego „promień graniczny” to „30%” w tym przykładzie. Używamy tutaj właściwości „przejściowej”, która zmienia jej „szerokość” z czasem trwania „2s” i zmienia jej „wysokość” z czasem „4s”. Wszystkie te przejścia są stosowane, gdy uruchamiamy mysz nad tym elementem DIV. Używamy również „div.Hover ”, w którym ustawiamy„ szerokość ”i„ wysokość ”elementu DIV po unosowaniu. Ustawiamy „320px” dla „szerokości”, kiedy unosimy się nad nim i
„Wysokość” 320px ”.
W tym podanym filmie możesz zobaczyć dane wyjściowe tego przykładu. Widać, że gdy unosimy się na tym elemencie DIV, zmienia jego szerokość, a także jego wysokość, ponieważ ustawiamy zarówno szerokość, jak i wysokość w właściwości przejściowej CSS.
Video gracze.COM/WP-CONTENT/UPLOODS/2022/06/TRANSITION-PROPRYTY-PROFILE-1-MICrosoft -Edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Zastosuj klawisze strzałek w górę/w dół, aby zwiększyć lub zmniejszyć objętość.Przykład nr 3
Tutaj użyjemy wszystkich właściwości przejściowych osobno na DIV. Najpierw ustawiamy „szerokość” i „wysokość” i oba są w „130px”. Następnie wybieramy „różowy” jako „tło” Div. Jego „promień graniczny” wynosi „20%”. Teraz mamy tutaj właściwości przejściowe. Najpierw ustawiamy „przejściową-proporcję” i podajemy nazwę, na której zastosowano przejście. Tutaj ustawiamy „szerokość” w tej właściwości. Zamierzamy ustawić czas w osobnych właściwościach przejściowych. Do ustalenia czasu przejścia używamy właściwości „Przejścia” i dajemy czas tutaj w tej właściwości. Ustawiamy „2s” dla tej „trwania czasu trwania."
Następnie mamy właściwość „funkcji przejściowej”. Ta właściwość jest tutaj używana do określenia prędkości przejścia. Tutaj ustawiamy to jako „liniowe”, co oznacza, że prędkość efektu przejścia będzie taka sama od początku do końca. Następnie stosujemy również opóźnienie w tym przejściu, używając właściwości „Transition-Delay”. Ustawiamy tę wartość właściwości jako „1s”. Spowoduje opóźnienie „1Sec” dla efektu przejścia. Używamy wszystkich właściwości przejściowych tutaj w tym kodzie osobno. Po tym wszystkim ustawiamy „szerokość” div, kiedy na nim unosimy. Po uniesieniu zmienia swoją szerokość na „350px”.
Dane wyjściowe pokazano tutaj na filmie. Widać, że po unoszeniu myszy na tej div wymaga opóźnienia 1 sekundy, a następnie zastosuje przejście na jego szerokości, a szerokość zmienia się w sposób liniowy, co oznacza ze stałą prędkością od początku do końca.
Video gracze.COM/WP-CONTENT/UPLOODS/2022/06/TRANSITION-PROPRYTY-PROFILE-1-MICrosoft -Edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Zastosuj klawisze strzałek w górę/w dół, aby zwiększyć lub zmniejszyć objętość.Przykład nr 4
W tym przykładzie używamy właściwości skrótów wszystkich właściwości, które użyliśmy w naszym poprzednim przykładzie 3 w tym samouczku. „Szerokość” i „wysokość” są ustalane tutaj jako „150px” dla każdego, a „tło” jest „różowe.„Następnie używamy skrótowej właściwości przejścia, w której określamy„ przejście-proporcjonalność ”,„ czas trwania przejścia ”,„ funkcja przejściowa i „przejście” w jednej właściwości „przejściowej” właściwości „przejściowej”. Tutaj „szerokość” określa, że przejście jest stosowane na „szerokości” Div, a czas trwania przejścia wynosi „2s” oraz w „liniowej” funkcji czasowej przejścia i opóźnieniu 1 sekund w przejściu. Wszystkie te właściwości są zdefiniowane tutaj w jednej właściwości. Tak więc nazywa się to również krótką własnością przejścia. Ustawiliśmy również „szerokość” tego div po unosowaniu nad mysią.
Wideo wyjściowe pokazuje, że kiedy przesuwamy mysz na to, wymaga 1-sekundowego opóźnienia przed zastosowaniem przejścia na jego szerokość, co zmienia się liniowo od początku do końca.
Video gracze.COM/WP-CONTENT/UPLOODS/2022/06/TRANSITION-PROPRYTY-PROFILE-1-MICrosoft -Edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Zastosuj klawisze strzałek w górę/w dół, aby zwiększyć lub zmniejszyć objętość.Przykład nr 5
Tworzymy tutaj wiele elementów DIV o różnych nazwach i zastosujemy różne właściwości funkcji przejściowej do wszystkich z nich. W tym kodzie tworzymy pięć różnych elementów div.
„Szerokość” i „wysokość” wszystkich elementów Div to „100px” dla każdego. Stosujemy „przejście” na „szerokość” w czasie trwania „2s”. Wyrównujemy również tekst zapisany wewnątrz Div w „Center”, wykorzystując właściwość „Aligację tekstu” i ustawiając „Bold” dla tego „Was-W-Waert.„Następnie wspomniemy o pierwszym div przy pomocy nazwy div i użyjemy właściwości„ funkcji przejściowej ”dla tego div, i ustaw„ liniowy ”dla tego div. Tak więc pokazuje tę samą prędkość od początku do końca. „Tło” „Div1” jest „czerwone."
W drugim div, „div2”, używamy „łatwości” dla „funkcji przejściowej.„Ta„ łatwość ”rozpocznie się powoli, a potem szybko i kończy powoli. „Tło” „Div2” jest „zielone.„Dla trzeciego div,„ div3 ”, używamy tła„ niebieskiego ”i ustalamy„ łatwość ”jako wartość„ funkcji przejściowej.„„ Łatwość ”służy do tego, że efekt przejściowy rozpoczyna się powoli. Czwarta div ma „żółte” tło i „ułatwianie” tej właściwości. Przejście „łatwe” kończy się powoli. Ostatnia div używa „łatwości” w „Funkcji przejściowej” i rozpocznie się i zakończy powoli. Ponadto „pochodzenie” ostatniej div to „bordowy."
W filmie mamy pięć różnych elementów Div z różnymi „funkcją przejściową” i można zauważyć, że czas przejścia wszystkich elementów Div jest inny.
Video gracze.COM/WP-CONTENT/UPLOODS/2022/06/TRANSITION-PROPRYTY-PROFILE-1-MICrosoft -Edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Zastosuj klawisze strzałek w górę/w dół, aby zwiększyć lub zmniejszyć objętość.Wniosek
Podaliśmy ten samouczek wyjaśniający pojęcie właściwości przejściowych w CSS. W tym samouczku szczegółowo omówiliśmy ten temat. Wyjaśniliśmy osobno właściwości przejściowe, czas trwania przejścia, funkcja przejścia i właściwości opóźnienia przejściowego oraz właściwości skrótów tych właściwości. Przeszliśmy ponad pięć różnych przykładów i dostarczyliśmy wyniki wideo, aby sprawdzić, jak działa ta właściwość. Mam nadzieję, że rozumiesz wiele właściwości przejściowych w CSS i zrobisz to sam.