Utwórz animowaną sztukę CSS

Sep 14, 2025

Jak

(Kredyt obrazu: Tiffany Choong)

Tworzenie obrazów CSS jest zabawnym sposobem na ćwiczenie swoich umiejętności i tworzenia schludnego kawałka grafiki. To miła przerwa od zwykłej codziennej stylizacji komponentów internetowych. Wszystko, co musisz uruchomić, to pusty dokument i plik CSS; Zalecamy korzystanie z Sass, która umożliwi ponowne wykorzystanie stylów i pisać prostsze selektory (patrz nasz przewodnik Co to jest Sass? Aby dowiedzieć się więcej o tym preprocesorze).

Zaczniemy od kilku najważniejszych wskazówek dotyczących opanowania CSS Art, a następnie pokazać, jak odtworzyć ten animowany Pikachu Balloon, używając tylko CSS (upewnij się, że przechowujesz swoje pliki w przyzwoitym magazyn w chmurze ).

Aby uzyskać więcej inspiracji, odkryj naszą rundę niesamowitego Przykłady animacji CSS. . Po czymś bardziej podstawowym? Zacznij od nauki Jak stworzyć lód lolly za pomocą CSS .

Lub, jeśli zaczynasz nową stronę, porzucić złożoność błyskotliwą Kreator strony internetowej i upewnij się, że masz swoje hosting miejsce na.

Zmniejsz projekt do prostych kształtów

Podczas tworzenia Sztuki CSS może pomóc spojrzeć na kilka obrazów referencyjnych dla inspiracji, a następnie utworzyć uproszczoną zmianę kreskówek, jak idziesz, wyobrażając sobie obiekt przy użyciu prymitywnych kształtów, co sprawia, że lepiej Kształty CSS. .

Użyj jasnego tła, aby pomóc w pozycjonowaniu

Podczas nakładania się kształtów podobnych kolorów trudno jest zobaczyć, gdzie są umieszczone lub jak wyglądają. Przydatne jest, że kształt pracujesz nad wyróżnieniem, zmieniając kolor tła do czegoś jasnego i wesoły, jak magenta. Pozwala to łatwo zobaczyć dokładną pozycję i kształt elementu.

Użyj rozmiarów płynów.

Jeśli chodzi o określenie wartości PX dla właściwości, polecamy korzystanie z jednostki REM. W przypadku, gdy zdecydujesz, że chcesz, aby twój ogólny utwór był większy lub mniejszy, używając jednostek REM, musisz zmienić bazę html {font-size: ... px} W Sass, aby skalować całą pracę w górę lub w dół.

Określając wysokości i szerokości elementów dziecka, które powinny mieć względne znaczenie dla rodzica, procenty są przydatne. Ponieważ te wartości są zawsze w stosunku do ich rodzica, powinny one również skalować HTML Rozmiar czcionki .

Generate CSS — Generuj CSS to konferencja na zamówienie przyniosła Ci przez kreatywnych BLOQ, Net and Web Designer. Kliknij, aby zarezerwować bilet wczesny ptak! (Kredyt obrazu: Getty / Future)

01. Zacznij od pojemników

Pojemnik opakowany do przechowywania kawałków grafiki jest dobrym miejscem do rozpoczęcia. W kontenerze możemy umieścić trzy wewnętrzne pojemniki - głowę, ciało i balony.

Pojemnik powinien być zwykle Pozycja: Względna aby umożliwić umieszczenie innych elementów stosunkowo w nim za pomocą Pozycja: Absolute. I mają dobrze zdefiniowaną wysokość i szerokość, w przeciwnym razie pozycjonowanie elementów dziecka staje się trudne.

W twoich stylach dodaj swoje podstawowe kolory jako zmienne Sass do ponownego użycia. Sass. rozjaśnić() i zaciemniać() Funkcje tworzą odcienie i odcienie swoich kolorów, które mogą być używane jako podświetlenia lub cienie dla Twojego znaku.

02. Styl głowa

Z konstrukcją zorientowali się, najpierw styl głowa. W tym przypadku głowa tworzy ładny punkt centralny dla grafiki, a nie ustalając jej pozycję do absolutnego, można go ustawić na krewny. Umożliwia to pojemnikowi posiadanie stabilnego elementu w niej, dając inne pływające elementy bezwzględne punkt kotwicy, a zatem większą kontrolę nad ich pozycją.

Cechy twarzy będą potrzebować kontenera do pozycjonowania, więc utwórz & lt; div & gt; Wewnątrz pojemnika na głowę na żółty kształt o szerokości, wysokości i koloru tła - teraz sprawić, aby ten prostokąt wyglądał bardziej jak kształt głowy. Jedną z najczęstszych i przydatnych właściwości w CSS Art jest Radius Nieruchomość, która zmienia krzywą rogów X lub Y pudełka i może być używany do tworzenia bardziej organicznych kształtów.

Korzystając z tej techniki z kombinezonem REM i procentowym, możesz robić kształty podobne do kropli, a nie tylko prostych elipsy, które skalują naturalnie z html. {rozmiar czcionki: ... px} :

 .Face {
Border-Top-Left Radius: 50% 4.5Rem;
granicy prawy-promień: 50% 4.5Rem;
Border-dno-left-promień: 50% 3Rem;
Radio-right-promień: 50% 3rem;
...
}

Po doskonaleniu głowy Radius , Umieść resztę funkcji twarzy jako elementy dziecka głowy, takie jak oczy, policzki, nos i uszy. Jak głowa, The Radius Trick pojawi się w poręce Radius Radio: 50% może nie wyglądać atrakcyjnie.

03. Przejdź do ciała

Ciało & lt; div & gt; można umieścić w kontenerze ciała za głową i ukształtowany z tym samym Radius Technika, a także ramiona, nogi i ogon. Aby umożliwić prawidłowe nakładanie się, rzeczywiste ciało powinno być jego własnym elementem, ponieważ niektóre elementy wewnętrzne, takie jak paski tylne, będą musiały zostać odcięte Przepełnienie: Ukryte . Dać ciało bardziej głębokość, Transform: Skew () Nieruchomość może nieznacznie odczuwać ciało.

Ogon błyskawicy można zbudować przy użyciu trzech oddzielnych prostokątów, zamiast próbować utworzyć ten kształt z jednego elementu. Prostokąty można obracać i umieścić na drugim, aby utworzyć śrubę. Ramiona i nogi mogą korzystać z ciemniejszego koloru podstawowego, które stworzyliśmy za pomocą Sass zaciemniać() więc wyróżniają się.

04. Dodaj balony.

Teraz, gdy myszą elektryczną jest zakończona, zawieśćmy balony do pleców. Dodaj trochę & lt; div & gt; s ze wspólnymi stylami z ciągiem dziecka & lt; div & gt; i umieść je spiętrzone nad głową. Ciąg jest niewidoczny z wyjątkiem border-lewy , Które pomaga sprawić, że wygląda na więcej łańcucha.

Związać ciąg wokół talii postaci, a & lt; div & gt; można umieścić w korpusie, aby umożliwić odpowiednie pozycjonowanie. Ciąg potrzebuje niewielkiej krzywej, która pojawi się tak, jakby jest związana wokół ciała, więc może mieć niewielką wysokość, dno graniczne i A. dno graniczne Lewy i prawy promień, który sprawia, że cienka zakrzywiona linia:

. String {
Wysokość: 1Rem;
Szerokość: 9Rem;
granicy prawy: solidny 1px $ biały;
Border-Left: Solid 1px $ White;
Border-Bottom: Solid 1px $ White;
Border-dno-lewy promień: 50% 1Rem;
Radio-Right-Promton: 50% 1Rem;
}

05. Animuj CSS

Możemy dać życie charakteru, dodając @keyframes. animacje. Ramiona, nogi, uszy i ogon można animować Transform: Obróć () . Zapewnić transformacja jest ustawiony na "złącze" (tj "TOP CENTER dla nogi) i wyreguluj obrót. Ten typ animacji może być używany kilka razy w MIXIN SASS:

 @mixin Animaterotate ($ Nazwa, $ Start, $ End) {
@keyframes # {$ Name} {
0%, 100% {transformacja: obróć (# {$ start}}}
50% {Transform: Obróć (# {$ END} DEG)}
}
}

Wreszcie dodanie powolnych 5s Transform: Translatey () Animacja klatek kluczowych będzie animacja postaci w górę iw dół tak, jakby się unosi. Za dotknięcie realizmu, mrugającą animację za pomocą Transform: Cromocey (0,1) Właściwość może być użyta do sprawiania, że pojawia się, jakby oczy się zamykają.

Ten artykuł został pierwotnie opublikowany w magazynie kreatywnego projektowania stron internetowych netto . Kup problem 283. lub Subskrybuj .

Czytaj więcej:

5 rzeczy, których nigdy nie wiedziałeś o CSS
Dodaj filtry SVG z CSS
Jak kodować efekty inteligentnego tekstu z CSS

Utwórz animowaną sztukę CSS

01. Zacznij od pojemników

02. Styl głowa

03. Przejdź do ciała

04. Dodaj balony.

05. Animuj CSS

Jak - Najpopularniejsze artykuły

44 najlepszych skrótów i gestów iPadów 2020

Utwórz starego efektu anaglifów

Jak zbudować blog z Jekyll

Zacznij od Adobe Dimension CC

Zachowaj doskonałą kontrolę wersji z abstrakcją

Jak utworzyć logo retro z projektantem powinowactwa

Narysuj portret ołówkiem psa

Jak uzyskać więcej z GIFS

Kategorie