38 Inspirarea demonstrațiilor de animație CSS3
De la introducerea CSS3, există într-adevăr o mulțime de dezbateri fierbinți care se învârt în jurul posibilităților și utilizabilității sale. Cu toate acestea, există, de asemenea, o mulțime de experimente interesante artizanale pentru a-și explora potențialul. Deși experimentele prin orice mijloace nu demonstrează utilitatea CSS3, au arătat într-adevăr adevăratele posibilități ale CSS3, într-o măsură în care dezvoltatorii majori cred că CSS3 este viitorul.
E adevarat? Judecă-l cu ochii tăi. În această prezentare nu vom arăta decât nimic 38 de demo-uri de animație bazate pe CSS3 care descoperă pur și simplu adevăratul potențial al CSS3. Pe lângă experimentele pure, veți vedea, de asemenea, câteva exemple practice despre modul în care CSS3 poate fi aplicat în designul web pentru a face mai dulce și mai sexy.
A spus destul, să explorăm lumea fantastică a CSS3!
Ați putea fi, de asemenea, interesat de:
- Ghidul începătorului pentru CSS3
- Crearea unei casete de căutare Rocking CSS3
- Construirea de pagini Web HTML5 / CSS3
- Graceful Navigare Meniul Breadcrumb în CSS3
- Creați un formular de contact HTML5 / CSS3 bazat pe Ajax
- 35 Grafică construită pur cu CSS3
- Mai Mult…
Vă recomandăm cu tărie să vizualizați aceste demo-uri folosind cea mai recentă versiune a versiunii Safari sau a dezvoltatorului Google Chrome. Majoritatea demo-urilor suportă cea mai recentă versiune de Firefox și Google Chrome.
Animat 3D Helix
Prima dintre ele este o animație incredibilă realizată de Marcofolio.net, folosind transformări 3D CSS3. Animația arată ca magia însăși, dar de fapt, puteți învăța să creați un efect similar cu tutorialul din articol!
Butoane animate
Un must-see pentru web designer, deoarece demo-ul nu numai că prezintă posibilitățile animației CSS3, dar oferă și efecte de buton foarte cool și practice pentru inspirație!
Meniuri de animație
Încercați să vă îmbinați meniurile de animație pentru a le face să arate foarte reci și creativi? Acest demo este pentru tine.
AT-AT Walker
Un demo de animație inspirat care arată potențialul CSS3 în animarea unei unități cu părți ale corpului.
Câmpul de luptă CSS3
Battlefield CSS3 cu o mulțime de explozii și focuri de artificii!
Mare lucru
Este animația buna și plăcută care a făcut acest demo o afacere mare.
Poate Haz Ur Cursor?
“Bună, eu sunt Cursorul Monster. Papa meu are un mesaj pentru tine: "Te rog, nu folosi cursor: nici unul, cu excepția cazului în care creați un cursor mănâncă monstru ".”
Cock Dock
Un experiment sexy care imită docul Mac OS X și este foarte neted.
CSS3 Omul
Priviți, vine omul CSS3! Un exemplu perfect pentru a arăta adevăratul potențial al animației CSS3.
Dribbling Ball Bouncing
Cu puțină utilizare de trucuri grafice vine o animație frumoasă și amuzantă CSS3.
Dulla
Dulla arată destul de mult una dintre cele mai comune tehnici folosite pentru a crea jocul platformer 2D, care este acum posibil și cu CSS3.
Frame by Frame Animation
Frame-by-frame animație cu CSS3? Nici o problema!
Grafică animație
O animație simplă, dar puternică pentru a arăta / explica graficul în site-ul dvs., să învețe să facă acest lucru!
Înalt
O animație muzicală misterioasă care afișează imaginile din Căutarea Google dinamic în timp real, iar imaginile afișate se bazează pe versurile melodiilor.
Hover Effects
Viitorul efectului de hover vine cu CSS3. Elegant și promițător.
Eu sunt Joseph Barrett
CSS3 integrat în icoanele sociale ale site-ului portofoliului. Nu numai distracție, ci și arătarea creativității designerului.
Zoom infinit
Animație netedă, de asemenea, o modalitate frumoasă de a vă arăta portofoliul. Zoom-ul total pentru cele 26 de imagini este 67108864: 1.
Kinect și CSS3
“14 îmbinări corporale sunt urmărite și transformate într-o animație CSS scurtă folosind Xbox Kinect. Datele corpului sunt aduse în browser unde sunt analizate și transformate în animații CSS cu animatable.com.”
Matrice
Vrei să fii la fel de răcoros ca Matrix? Cu CSS3 puteți reuși.
Cuburi Morphing
Experimental demo explorarea CSS3 folosind transformări 3D, animații și tranziții. Partea interesantă aici este că puteți selecta încă textul pe elemente, chiar și atunci când acestea încă se rotesc.
Sistemul nostru solar
Nu aveți nevoie de software scump independent pentru a ajuta studenții să exploreze sistemul solar mai.
Duff Roll
“Mmmmmm ... Homer ar iubi oferta de bere care nu se încheie niciodată.”
Poster Cerc
Un exemplu simplu, dar interesant, care vă arată cum să utilizați transformarea și animația CSS pentru a obține un efect interesant.
Reverendul Periculos
Cine poate rezista unui site cu personaje cu adevărat drăguț și animații amuzante?
Rofox
Animație simplă și distractivă, obțineți codul sursă pentru a încerca singur!
Shaun Oile
“Urmăriți Shaun și anticile prietenilor lui în clipuri de la "An Ill Wind", "Snowed In", "Big Chase" și "Twos Company" printr-un experiment interactiv creat cu video HTML5 accelerat hardware, transformări 3D CSS și WebM.”
Spaţiu
Poate că spațiul este limita finală pentru CSS3.
Spațiu CaCSS
Creați un efect magic ca acesta nu este foarte greu cu CSS3, deoarece există în principal doar repetarea-radial gradient și background-size implicat. Variațiile sunt posibile cu o sumă rezonabilă de defecțiuni.
Star Wars Crawl
Războiul de deschidere Star Wars efectul crawl! La fel de epic ca și CSS3.
Webul expresiv
Webul expresiv nu numai că vă prezintă despre CSS3 și suportul pentru browser, referință și documentație, dar și prezentarea unei animații CSS3 minunate pe pagina sa web.
Letter-Heads
Folosind tipuri pentru a crea o umbră care arată ca fața omului, cine ar fi crezut că ar fi posibil cu CSS3?
Omul de la Hollywood
V-ați văzut vreodată acele animații atractive utilizând doar tipografie pură? Poți să o faci și cu CSS3.
Planetariul
Pur și simplu demonstrație epică privind explorarea planetariului cu detalii. SVG, JavaScript, HTML5, CSS3, fonturi și tipuri sunt implicate.
Tipul ploilor
“Previziunea pentru ziua de azi, presupunând că utilizați un browser modern, este tulbure, cu o șansă de 100% pentru dusurile din Georgia.”
Efecte tipografice
Pe lângă butonul, meniurile și efectele hover, puteți realiza, de asemenea, efecte tipografice creative cu CSS3. jQuery este, de asemenea, implicat în acest demo pentru stilul literelor cuvintelor.
Mersul cu Andrew Hoyer
Mai presus de toate, puteți învăța să mergeți cu Andrew Hoyer în articol!
Wonder Webkit
O utilizare minunată a transformărilor 3D CSS3 cu biblioteca Matrix JavaScript. Sună tehnic, dar rezultatul este răcoros.
Zoetrope
Ce altceva nu se poate face cu CSS3 când Zoetrope este posibil cu el?
Reflecţie
Inspirator? da. Practic? Poate. Tehnica de animație este întotdeauna un subiect de zgârieturi pentru dezvoltator și animator, deoarece necesită un anumit nivel de cunoaștere pentru a produce o animație cu adevărat netedă, unică și elegantă. În timp ce CSS3 are posibilitatea de a face animația, aceasta nu înseamnă că este un instrument potrivit pentru animație. Cred că în cele din urmă este vorba despre preferința dvs., ca și pentru mine, sunt bine în ambele situații, atâta timp cât instrumentul se potrivește nevoilor proiectului.
Care este părerea dvs. despre aceste animații CSS3? Sunt aceste animații CSS3 bune doar ca experimente sau pot fi aplicate și în designul web real? Ca de obicei, salutăm gândul tău prețios pe această temă și ne informează și despre animația preferată a animației CSS3!
Mai Mult
Doar arată, într-adevăr? Ați meritat să obțineți mai mult! Mai jos sunt tutorialele și ghidurile CSS3 de la Hongkiat pentru tine, au un timp frumos explorându-le!
