Úryvky 8 CSS pro milovníky zvířat

Jedním z nejzábavnějších (a nejméně praktických, pokud vám záleží na neztrácení času) způsoby použití CSS je vytvořit tvary a barvy z běžných prvků HTML, aby vypadaly jako skutečné věci - jako jsou potraviny, objekty nebo zvířata. Dnes se podíváme na některé z nejlepších útržků CSS, které lze použít k přeměně nudných starých divů na výtvory, které se podobají skutečným živým zvířatům. Některé z nich jsou dokonce animované! Pokud máte rádi kočky a CSS, pak čtěte dál, tohle je pro vás.

  1. Pure CSS Black Cat

Shot obrazovka na 2017 03-07 4.24.41-PM

Začněme s černou kočkou, protože je to klasika. Tato černá kočka je vytvořena čistě s CSS, a dokonce obsahuje CSS animace, takže její oči a uši se pohybují v synchronizaci (uši se pohybují nahoru a dolů, oči se pohybují zleva doprava).

2. CSS Pes

Shot obrazovka na 2017 03-07 4.28.04-PM

Pokud nejsi kočka, možná vás tento pes osloví. Tato čistá silueta CSS psa je sofistikovaná reprezentace nejlepšího člověka. Dokonce je dodáván včetně kosti a límce.

3. Medvídek

Shot obrazovka na 2017 03-07 4.32.54-PM

Tento úryvek nevytváří realisticky vyhlížejícího medvěda, medvěda se podobá medvídkovi, ale je to pořád opravdu roztomilé a má pěknou malou animaci (malá ruka na vás vlní). Kromě toho jsou realističtí medvědi stejně tak děsiví. Úryvek je čistý CSS - nevyžaduje JavaScript nebo jQuery.

4. Pes a ples

Shot obrazovka na 2017 03-07 4.38.04-PM

Tento úžasný animovaný CSS úryvek má velmi nadšeného psa a jeho velmi nadšený ocas. Před psem je pestrobarevný míč, který se odrazí, když na něj kliknete. Tento úryvek je opravdu dobře provedený. Nejenže je kvalita animace skvělá, ale celkový CSS je esteticky příjemný a realistický.

5. Loading Kat

Shot obrazovka na 2017 03-07 4.45.13-PM

Tento úryvek je pravděpodobně o něco užitečnější než ostatní úryvky na tomto seznamu. Animovaná kočka v tomto úryvku také slouží jako efekt načítání. Kočka se pohybuje v kruhu proti směru hodinových ručiček, který by mohl být snadno použit místo jiných kruhových animací, které by mohly být použity v projektu.

6. Králík

Shot obrazovka na 2017 03-07 4.47.37-PM

Tento rozkošný zajíček je vytvořen čistě pomocí CSS a dokonce obsahuje opravdu cool animovaný vznášející se efekt (když se vznášíte nad zajíčkem, balóny začnou stoupat na pozadí).

7. SVG Bird

Shot obrazovka na 2017 03-07 4.49.50-PM

SVG animace jsou velmi užitečné a univerzální při vytváření jakéhokoliv tvaru a možnosti animace. V tomto případě je tvar, který byl vytvořen, pták a animace, kterou dosahuje, je mírné mávání křídel (oči se také pohybují zleva doprava).

8. CSS Fat Cat

Shot obrazovka na 2017 03-07 4.54.02-PM

Ještě jedna kočka pro dobrou míru. Tato čistá kočka CSS je, jak byste mohli říct z názvu, trochu tuku. On také nosí oblek, protože proč ne? Kočka má trochu animace - ocas se vrtí, ale na základě vážného rozzlobeného obočí je tato kočka sportovní, nejspíš to není šťastným způsobem.

Zdroj

Napsat komentář

Tyto stránky používají Akismet k omezení spamu. Zjistěte, jak jsou vaše údaje komentářů zpracovávány.