Wprowadzenie do animacji
Przez najbliższe osiem tygodni (zaplanowałem 8 postów) pokaże Ci jak tworzyć animacje CSS i efekty graficzne zachowując odpowiednie praktyki i kompatybilność z wszystkimi przeglądarkami.
Odkryjemy dogłębnie zasady działania przejść w CSS i transformacji 2D oraz0 3D. Dodam również rozbudowany materiał o filtrach i gradientach.
Sporą częścią materiału stanowić będą animacje CSS, w których od podstaw pokaże jak budować animacje bez komplikacji.
Zazwyczaj dodaję ćwiczenie na końcu rozdziału, ale tym razem również na początku poćwiczysz sobie na przykładzie.
- Stwórz podstawową deklaracje html.
- W ciele dokumentu dodaj diva z klasą
loader
. W środku dodaj trzy divy z klasami odpowiednio:one
,two
,three
. - Przejdź do pliku style.css. Dla całego dokumentu dodaj selektor
*
. W środku dodaj następujące właściwości: margines zerowy, padding zerowy, ramka zerowa ibox-sizing: border-box;
. - Dodaj koleją deklaracje odnoszącą się do ciała dokumentu i znacznika html: wysokość na 100%.
- Dla samego ciała strony dodaj tło w jakimkolwiek kolorze.
- Przejdźmy do naszej pierwszej klasy. Dodaj deklarację klasy
loader
. W środku umieść następujące właściwości: szerokość 200px, wysokość 200px, pozycje absolutną, top, left right i bottom na 0 oraz margines automatyczny. - Ostylujmy divy zawarte w klasie
loader
. Dodajmy następujące właściwości: top, left, right, bottom na zero, margines automatyczny,transform: rotate(45deg)
,border-top-color: przykładowy kolor
, opóźnienie animacji: .25s, zaokrąglenie ramki na 50%, pozycja absolutna,animation: spin 2s infinite
. - Następnie ostylujmy klasę
one
zawartą w klasieloader
. Dodajmy następujące właściwości: szerokość 200px, wysokość 200px,transform: rotate(45deg)
,border: 20px solid transparent
,border-top-color: przykładowy kolor
i opóźnienie animacji na 0s. - Przejdźmy do klasy
two
zawartej w klasieloader
. Dodajmy następujące właściwości: szerokość 133.33333px, wysokość 133.33333px,border: 20px solid rgba(255, 255, 255, 0.5)
,border-top-color: przykładowy kolor
i opóźnienie animacji na 0.25s. - Ostatnią klasą którą ostylujemy jest
three
zawartą w klasieloader
. Dodajmy następujące właściwości: szerokość 66.66667px, wysokość 66.66667px,border: 20px solid rgba(255, 255, 255, 0.5)
,border-top-color: przykładowy kolor
i opóźnienie animacji na .5s. - Aby nasza animacja zaczęła żyć należy dodać następującą deklarację:
@keyframes spin {
50%,
100% {
transform: rotate(405deg);
}
}
damp-rain-kqq0l
damp-rain-kqq0l danielminschinski
Pierwsze koty za płoty. Uruchomiliśmy wspólnie pierwszą naszą animacje. W kolejnych materiałach przedstawie rozszerzenie tematu. Sprawdź Plan nauki Frontend Developera aby już teraz zapoznać się z tematami które zostaną udostępnione.
Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb oraz kanału na YouTube.
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA