Jak mieć wiele przejść CSS na elemencie

Wiele platform internetowych wymaga animacji na niektórych stronach internetowych, aby aplikacja wyglądała na bardziej przyciągającą wzrok. W tym celu programiści używają właściwości CSS podczas projektowania interfejsów front-end. Mówiąc dokładniej, przejścia CSS oznaczają stosowanie animacji na elemencie HTML za pośrednictwem właściwości CSS w taki sposób, że automatycznie stosuje właściwości jeden po drugim.

W tym artykule omówiono metodę stosowania właściwości CSS w celu posiadania wielu przejść w elemencie HTML.

Jak zastosować wiele przejść CSS na elemencie?

Wystarczy najpierw utworzyć elementy w HTML, na których należy zastosować przejścia, a następnie dodać identyfikatory CSS lub selektory klas w elemencie stylu, aby zapoznać się z elementami HTML.

Przykład

Utwórzmy element kontenera Div w korpusie kodu HTML, a następnie zastosuj na nim właściwości CSS, aby wyglądał o animowany:

Unosić się, aby zobaczyć przejścia

Witaj użytkownik!!!

W powyższym fragmencie kodu:

• • Jakiś "

    „Nagłówek jest dodawany wbudowanym CSS”margines„Nieruchomość ustawiona na„1 rem”A nagłówek mówi„Unosić się, aby zobaczyć przejścia".

  • Potem „„Element kontenera jest dodawany z klasą zadeklarowaną jako„moja klasa".
  • „„„Element kontenerowy ma tekst„Witaj użytkownik!!!" w środku tego. Przejścia CSS zostaną zastosowane do tego elementu DIV.

Element stylu CSS powinien mieć wszystkie niezbędne właściwości, które sprawiają, że DIV wyglądał o animowany:

.moja klasa
Rozmiar czcionki: 3;
Margines: 2M;
Justify-Content: Center;
Wyświetlacz: Flex;
granica: 10px solidny fiolet;
Szerokość: 20rem;
Wysokość: 9rem;
Przejście: kolor 1s, ułatwianie wyściółki 1s-top 1s,
Ułatwianie wyściółki 1S, rozmiar wielkości czcionki 3S;

.MyClass: Hover
kolor niebieski;
granica: 10px stałej pomarańczowej;
Wyściółka: 100px;
Bottom wyściółki: 40px;
Rozmiar czcionki: 1.8rem;

W powyższym elemencie stylu CSS:

• • Dodano selektor klas, który odnosi się do „moja klasa„Element kontenera Div. Wewnątrz różne właściwości CSS są zdefiniowane dla elementu kontenera Div.
  • „„rozmiar czcionki”Właściwość ustawia rozmiar tekstu napisanego w pojemniku Div, aby„3".
  • „„margines„Nieruchomość jest dodawana, aby zapewnić odstęp2”Po tekście lub nagłówku.
  • „„justify-content”Właściwość wyrównuje tekst kontenera Div do środka kontenera Div.
  • „„Display-Flex„Własność została dodana w celu automatycznego wyrównania zawartości w elemencie DIV.
  • „„granica„Własność jest dodawana, aby ustawić ciężar graniczny kontenera Div jako„10px”I określa kolor granicy jako„fioletowy".
  • „„szerokość„Własność definiuje pionową długość elementu DIV jako„20rem".
  • Podobnie „„ „wysokość„Własność określa poziomą długość elementu DIV jako„9rem".
  • „„przemiana„Własność jest dodawana w celu zdefiniowania czasu, w którym należy zastosować przejścia. Dla "kolor”,„Wyściółka" I "Wyściółka”, Został ustawiony jako„1 sekunda" i dla "rozmiar czcionki”, Został ustawiony jako„3 sekundy".
  • Potem pseudoklasa „:unosić się”Dodaje się do selektora klasy CSS” „.moja klasa„Aby zdefiniować właściwości CSS, które należy zaimplementować, podczas gdy użytkownik unosi się nad elementem utworzonym przez„moja klasa".
  • „„kolor„Własność jest zdefiniowana jako„niebieski”Tak, że gdy użytkownik unosi się nad elementem, natychmiast zmienia kolor tekstu na niebieski.
  • Następnie „granica„Własność zdefiniowano, że zmienia wielkość granicy na„10px„Podczas gdy unoszenie się i kolor granic został zdefiniowany jako„Pomarańczowy".
  • „„Wyściółka" I "Wyściółka„Dodano właściwości w celu zdefiniowania odstępu między zawartością a granicami odpowiednio od góry i dolnej.
  • „„rozmiar czcionki”Jest zdefiniowane jako„8rem„Podczas unoszenia się.

Wyniki powyższych zastosowanych przejść CSS będą następujące:

To podsumowuje metodę stosowania wielu przejść CSS na elemencie HTML.

Wniosek

Przejścia CSS są stosowane do elementów HTML, aby wyglądały na animowane. Wszystko, czego potrzebuje do zastosowania przejściów CSS, to dodanie identyfikatora lub selektora klasy w elemencie stylu CSS odnoszącym się do elementu HTML, na którym należy zastosować przejścia, a następnie dodanie wszystkich niezbędnych właściwości, takich jak kolor, czcionka, granice, wyściółki przed przejściem. W tym artykule prowadzonym na temat zastosowania wielu przejść CSS na elemencie HTML.