Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Animation
Webdesign

Inspiráció: 10 Pure CSS animáció példa a CodePen-en

by
Length:ShortLanguages:

Hungarian (Magyar) translation by Szabó Péter (you can also view the original English article)

A mobilos böngészőink egyre erőteljesebbé válnak és jobban képesek csodálatos, gyönyörű animációkat megjeleníteni számunkra. Amikor a CSS-elrendezéssel kombináljuk, lehetséges gyönyörű munkákat létrehozni mindenféle kép használata nélkül. Az eredmény skálázható, gyorsan betölt, és lenyűgözően néz ki.

Vessünk egy pillantást arra, hogy milyen csodálatos dolgokat készítenek és animálnak mások, mindössze HTML és CSS használatával.

1. Pure CSS Biciklis

Annyi minden van itt, hogy nehéz elhinni, hogy ez csak egyszerű HTML és CSS! Forgó animációk és többszörös, réteges mozgások vannak kombinálva, hogy a biciklist és a biciklijét mozgás közben ábrázolja. Szép felhasználása a BEM-nek is az osztálynevekben!

2. Pure CSS Szaturnusz hulahoppozás

Sok mozgó elem kombinálásával egy egyszerű HTML elemkészlet sokkal összetettebb animációvá alakítható, és ez a demó ezt nagyon jól csinálja. Látjuk, hogy hogyan kapcsolódik két bolygó egymáshoz, miközben a köröző "részecskék" épp csak annyira szóródnak szét, hogy véletlenszerűnek hasson.

3. Színrétegek CSS animációja

Az egyszerű, színes rétegek talán nem tűnnek nagy valaminek, de mozgás közben elég karakteressé válhatnak. Ebben a példában egy sor félig átlátszó HTML bekezdés tag lett animálva, és az eredményképp kapott halmozott animáció hipnotikus hatású.

4. Jégkrémes betöltő

Nem mindig van szükségünk JPG-re vagy PNG-re csodálatos képek létrehozására, ez is egy példa rá. Egy div konténer és négy másik kell mindössze ehhez az ízletesen falnivaló kis jégkrém-témájú betöltőképez. Az eredmény kód sokkal kisebb, mintha egy animált GIF lenne.

5. Pure CSS galambok

Amikor kombináljuk a HTML elemek művészi használatát némi karakteres animációval, ez a végeredmény. Egy csodálatosan folyamatos, mégis szemet gyönyörködtető látvány. Hatalmas elismerés Julia Muzafarovának ezért a hihetetlenül aprólékos munka elkészítéséért azzal a rengeteg kulcs kerettel. Ez sok kávét igényelhetett!

6. Alvó macska

Sok egyszerű HTML elem összerakva egy rakat finom, szórakoztató animációval ezt az alvó macskát eredményezi. Ez a példa Sass-t használ, és változókat az animáció irányítására. Próbálj megváltoztatni párat és nézd meg, mi fog történni!

7. Fekete medve

Folyamatos animációk is elérhetővé válhatnak HTML és CSS használatával, különösen, ha követünk pár alapelvet. Ez az animáció az elemek számát a minimumon tartja és sokat használja a transzformációkat.

8. CSS szivacs

A gyors animációkkal sok karakter összeadódhat, ha kombináljuk őket. Ebben a demóban azt látjuk, hogy buborékok és fröccsenések vannak összekombinálva egy aranyos animációban egy boldog szivaccsal, mindez képek nélkül.

9. Pure CSS Postai levél

Egy sor kulcs keretanimáció elmesélhet egy történetet vagy segíthet az embereknek megérteni, hogy mit is látnak. Itt most kinyitunk egy borítékot és megkapunk egy levelet.

10. Autós előtöltő

Finom kis mozgás létrehozásával nagyszerű intenzitásérzetet hozhatunk létre! Ebben a betöltőben van egy kocsi, ami úgy néz ki, mintha gyorsítana, és mindez csak pár elemből és CSS animációkból áll. Mivel nincsenek benne képek, ezért gyorsan betöltődik.

Légy inspirált!

Ahogy mindig, most is köszönet a CodePennek és az ezen demók mögött álló kreatív elméknek; rengeteg inspirációt nyújtanak nekünk ezekkel a példa animációkkal. Nézd meg a következő bejegyzéseket hasonlókért, és hogy megtanuld elkészíteni a saját CSS animációidat!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.