30 animații Cool CSS pe care trebuie să le vezi
Am publicat anterior efectele de text creativ pe care le puteți face cu CSS și multe alte lucruri interesante pe care nu le-ați crezut că ați putea să le faceți cu CSS. Această compilație se concentrează însă pe multe lucruri pe care le puteți anima cu CSS și multe dintre aceste creații vă vor face să ridicați o sprânceană sau două.
De la încărcarea animațiilor la comutatoarele și ferestrele modale până la agitarea elementelor, această grămadă de 30 utilizări neobișnuite și creative ale animației CSS vă poate deschide mintea la mai multe moduri în care puteți juca cu animații CSS pe care probabil nu v-ați gândit niciodată înainte.
CSS Loading Animation De patrikhjelm
Șapte puncte animate care se deplasează la stânga și la dreapta pentru a indica o acțiune de încărcare.
Animat de cumparaturi Icon de jonitrythall
Efecte animate drăguțe când se adaugă alimente la coșul de cumpărături. Derulați în jos pentru mai multe.
Hamburger CSS3 numai animație de Dawid Krajewski
Construit cu CSS pur, fără JS sau altceva.
404 animat de caractere cu un es
Cel puțin cu această pagină de eroare, un dezvoltator lucrează la aceasta. Chiar dacă este un 404.
CSS Mars Landing de către mgitch
Am aterizat pe Marte! Realizat cu CSS.
Răzbunătorul Prin mariosmaselli
Puteți auzi furia lui Hulk prin ecran? Răcoros, bine?
Comutare zi / noapte Prin jsndks
Acum puteți trece zi și noapte cu CSS. Ideea geniului!
Aplicația Google Now 3rd party de codecalm
Aplicații terțe Google Now, animate.
Clo clo De judag
O cocoșă se mișcă așa? Pariezi că se întâmplă, complet cu gâtul jiggy. Excelentă practică CSS3.
Meniu icon animație de mariusbalaj
O idee simplă pusă la acțiune; vizionați butonul meniului materializați atunci când derulați în jos.
Un alt pre-încărcător CSS de către Maseone
O minunată animație de încărcare ritmică CSS. Hipnotic, nu-i așa??
Trimiteți butonul de auginator
Faceți clic pentru trimitere, iar butonul animă procesul de încărcare până la finalizarea transmiterii!
Elastic SVG Material lateral Material Design de suez
Trageți bara albă spre dreapta pentru a vedea un efect elastic al barei laterale.
Buton pentru particule Prin igcorreia
Fă ce spune butonul: hover for awesomeness.
Butonul Gooey De Lucas Bebber
Faceți clic pentru efectul Gooey. O veți obține odată ce o veți vedea și veți da clic pe ea de câteva ori mai mult. Amirite?
Flipside buton De hakimel
Faceți clic pe orice parte a butonului Ștergeți, iar butonul se va răsturna în funcție de locul în care faceți clic.
Meniul adevărat de hamburger! Prin CharlesSmart
Un meniu cu adevărat delicios de hamburger. Faceți clic pe hamburger pentru efecte
Răspundeți de ya
Vezi motocicleta.
Cub de undă 3D Prin waddington
Cercuri 3D de tip Cube!
Semnătură animație Prin drygiel
Iată o semnătură care nu este de fapt o animație GIF, ci o secvență PNG animată cu CSS3.
Fundal animație gradient De quasimondo
Acest truc modifică gradientul de fundal de la o culoare la alta într-o formă netedă și continuă.
Războiul de războaie de la războaie de vârstă prin rss
Un meniu de hamburger devine transformat în flash-uri în luptă (o cruce).
GIF Stil de animație De jascha
Vizionați ca o fotografie materializează din mijlocul artei pixelilor.
Focalizați-vă în animația de intrare / ieșire Prin fluxus
Un pic animat stilou animat scrie pe partea de sus a foromului pe care îl completezi.
Cromatic triunghiUn felipedefarias
O minunată iluzie optică, da, făcută cu CSS3.
Aparat de cafea Prin acest lucru
Iată un memento pentru a lua doza zilnică de cafea. Cum ai nevoie de unul.
Chrome Dinosaur Prin nickspiel
Nu puteți ajunge la pagina pe care doriți să o utilizați pentru o conexiune abandonată? Iată dinozaurul pe care îl vedeți întotdeauna când se întâmplă acest lucru, dar de data aceasta el rulează de la un meteorit!
CSS se agită Prin elrumordelaluz
Treceți deasupra fiecărui efect pentru a urmări mișcarea micului tip.
Încărcătorul de la Newton, prin toate lucrurile, Smitty
Dacă știți fizica, știți cu siguranță leagănul lui Newton, dar probabil nu așa.
Lansați modulul By koolhaus
Faceți clic pentru a vedea animația ferestrei modale și frumoase.
Robot de mers pe jos de P233
Acest robot continuă să meargă, să meargă și să meargă, în jurul axei Y.
Flexibilizarea săgeților de însemnare de Hakim
De la prima pagină la ultima, această animație de paginare arată în mod clar modul în care vă îndreptați, pe pagini.
Acum citiți: 15 Efecte de text frumoase create cu CSS
