Najlepszy samouczek przejścia CSS3 W 2024 r. W tym samouczku możesz dowiedzieć się przejścia CSS3,Pomoc Browser,Jak to działa?,Przykłady,Przykłady,Liczba zmian,Przykłady,Właściwości przejściowe,Przykłady,Przykłady,
CSS3, musimy dodać efekt, który można przekształcić z jednego stylu w innym czasie, bez użycia animacji Flash lub JavaScript. Najedź na następujących elementach:
Najedź na następujących elementach:
Wartości podane w tabeli przedstawiają pierwszą przeglądarką obsługującą numer wersji obiektu.
Natychmiast po -webkit- cyfrowego -ms- lub -moz- temu w uzasadnieniu przedrostka atrybutu pierwszy numer wersji przeglądarki.
属性 | |||||
---|---|---|---|---|---|
transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
transition-delay | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
transition-duration | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Przejście CSS3 jest elementem stopniowo zmieniać z jednego stylu na inny efekt.
W tym celu, dwie rzeczy muszą być zdefiniowane:
atrybut width zastosowano efekt przejścia, czas trwania 2 sekundy:
Uwaga: Jeśli nie zostanie określony limit czasu, przejście będzie miało żadnego wpływu, ponieważ wartość domyślna to 0.
Efekt będzie zmieniać wartości określonych zmian własności CSS. Typowa zmiana właściwości CSS jest myszy nad elementem użytkownika:
Przepisy gdy zawieszenie wskaźnik myszy (: hover) do elementu <div>, gdy:
Uwaga: Gdy kursor myszy na elemencie, stopniowo zmienia swój oryginalny styl
Aby dodać więcej niż jeden efekt stylu zmieniać, dodawać atrybutów oddzielonych przecinkami:
Dodano efekty szerokość, wysokość i przejściowe:
Poniższa tabela zawiera wszystkie właściwości przejścia:
nieruchomość | opis | CSS |
---|---|---|
przejście | Skrócona forma ustalania cztery właściwości przejścia w jednym obiekcie. | 3 |
Obiekt przejściowego | Nazwa przejścia własności CSS stosować przepisy. | 3 |
Okres przejściowy | Aby określić czas spędzony efekt przejścia. Wartość domyślna to 0. | 3 |
Przejście-timing-function | Z góry określony czas przejścia krzywej efekt. Domyślną wartością jest "łatwość". | 3 |
Przejście opóźnienia | Przepisy kiedy zacząć efekt przejścia. Wartość domyślna to 0. | 3 |
Poniższe dwa przykłady ustawić wszystkie atrybuty przejścia:
Wykorzystaj wszystkie właściwości przejścia w jednym przykładzie:
A przykłady takich samych efektów przejścia wyżej, ale używa skrótowej właściwości przejścia: