38 Inspirerande CSS3-animationsdemonstrationer
Sedan introduktionen av CSS3 finns det verkligen en hel del heta diskussioner kring sina möjligheter och användbarhet. Men det finns också många intressanta experiment handgjorda för att utforska sin potential. Även om experimenten med några medel inte visar CSS3s användbarhet visade de verkligen de sanna möjligheterna till CSS3, i en grad som stora utvecklare tror att CSS3 är framtiden.
Är det sant? Döm det med dina ögon. I den här utställningen kommer vi att visa ingenting annat än bara 38 inspirerande CSS3-baserade animationsdemoder som bara upptäcker CSS3: s sanna potential. Förutom de rena experimenten ser du också några praktiska exempel på hur CSS3 kan appliceras i webbdesign för att göra det sötare och sexigare.
Något sagt, låt oss utforska den fantastiska världen av CSS3!
Du kanske också är intresserad av:
- Nybörjarens guide till CSS3
- Skapa en Rocking CSS3 sökruta
- Bygga HTML5 / CSS3 webbsidor
- Graceful Breadcrumb Navigation Menu i CSS3
- Skapa en Ajax-baserad HTML5 / CSS3-kontaktformulär
- 35 Graphics byggd rent med CSS3
- Mer…
Du rekommenderas starkt att visa dessa demos med den senaste versionen av Safari eller utvecklarversionen av Google Chrome. De flesta demos stöder dock den senaste versionen av Firefox och Google Chrome.
Animerad 3D Helix
Första i listan är en otrolig animation gjord av Marcofolio.net, med CSS3 3D-transformer. Animationen ser ut som magi själv, men du kan faktiskt lära dig att skapa samma effekt med handledningen i artikeln!
Animerade knappar
En måste-se för webbdesigner, eftersom demo inte bara visar möjligheterna till CSS3-animering, men ger också väldigt coola och praktiska knappeffekter för inspiration!
Animeringsmenyer
Försöker krydda dina animeringsmenyer för att få dem att se riktigt coola och kreativa ut? Denna demo är för dig.
AT-AT Walker
En inspirerande animationsdemo som visar potentialen i CSS3 om att animera en enhet med kroppsdelar.
Battlefield CSS3
Battlefield CSS3 med massor av explosioner och skott!
Stor grej
Det är den smidiga och snygga animationen som gjorde denna demo till en stor sak.
Kan Haz Ur Markör?
“Hej, jag är markörsmonsteret. Min pappa har ett meddelande till dig: "Snälla, använd inte markör: none, förutom om du skapar en markör som äter monster ".”
CSS Dock
Ett sexigt experiment som liknar Mac OS Xs docka, och det är jättefritt.
CSS3 Man
Se upp, här kommer CSS3 mannen! Perfekt exempel för att visa upp den verkliga potentialen för CSS3-animering.
Dribbble Ball studsar
Med den lilla användningen av grafiska tricks kommer en fin och rolig CSS3-animering.
Dulla
Dulla visar ganska mycket en av de vanligaste teknikerna som används för att skapa 2D-plattformsspel, vilket nu också är möjligt med CSS3.
Frame by Frame Animation
Ram för bild animering med CSS3? Inga problem!
Graf Animation
En enkel men kraftfull animering för att visa / förklara grafen på din webbplats, lära dig att göra det!
Hög
En mystisk musikanimation som visar bilder från Google Search dynamiskt i realtid, och de visande bilderna är baserade på sångtexten.
Högereffekter
Framtidens svängareffekt kommer med CSS3. Elegant och lovande.
Jag är Joseph Barrett
CSS3 integrerad i sociala medierikonen på portföljplatsen. Det är inte bara kul men visar också kreativiteten hos designern.
Oändlig Zoom
Smidig animering, också ett bra sätt att visa upp din portfölj. Den totala zoomen för de 26 bilderna är 67108864: 1.
Kinect och CSS3
“14 kroppskarv spåras och konverteras till en kort CSS-animering med hjälp av Xbox Kinect. Kroppsdata tas in i webbläsaren där den analyseras och konverteras till CSS-animationer med animatable.com.”
Matris
Vill du vara så cool som Matrix? Med CSS3 kan du göra det.
Morphing Cubes
Experimentell demo utforska CSS3 med 3D-transformeringar, animationer och övergångar. Den intressanta delen här är att du fortfarande kan välja texten på elementen, även när de fortfarande roterar.
Vårt solsystem
Du behöver inte dyra fristående programvara för att hjälpa eleverna att utforska solsystemet längre.
Duff Roll
“Mmmmmm ... .Homer skulle älska det oändliga utbudet av öl.”
Affischcirkel
Ett enkelt men ändå intressant exempel på hur du använder CSS-omvandling och animering för att uppnå intressant effekt.
Reverend Risk
Vem kan motstå en webbplats med riktigt söta karaktärer och underhållande animationer?
Rofox
Sömlös och rolig animering, få källkoden att försöka på egen hand!
Shaun The Sheep
“Titta på Shaun och hans kompisar i klipp från "An Ill Wind", "Snowed In", "The Big Chase" och "Twos Company" genom ett interaktivt experiment skapat med hårdvaruaccelererad HTML5 video, 3D CSS Transforms och WebM.”
Rymden
Kanske är rymden den sista gränsen för CSS3.
Space CaCSS
Skapa en magisk effekt som detta är inte riktigt svårt med CSS3, eftersom det bara är huvudsakligen upprepa-radial-gradient och background-storlek inblandade. Variationer är möjliga med rimlig mängd tweaks.
Star Wars Crawl
Star Wars-öppningens krypaffekt! Precis lika episk som CSS3.
Den uttrycksfulla webben
Den uttrycksfulla webben presenterar inte bara CSS3 och dess webbläsarsupport, referens och dokumentation, utan visar också en CSS3-animering på sin hemsida..
Brevhuvudena
Använda typer för att skapa en skugga som ser ut som människans ansikte, vem skulle ha trott att det skulle vara möjligt med CSS3?
Mannen från Hollywood
Har du någonsin sett de attraktiva animationerna med bara ren typografi? Tja, det kan du också göra med CSS3.
Planetariumet
Helt enkelt episk demo om att utforska planetariet med detaljer. SVG, JavaScript, HTML5, CSS3, typsnitt och typer är inblandade.
Typ Rains
“Prognosen för idag, förutsatt att du använder en modern webbläsare, är grumlig, med 100% chans för Georgiens duschar.”
Typografi Effekter
Förutom knapp-, meny- och svepseffekter kan du också uppnå kreativa typografiska effekter med CSS3. jQuery är också inblandad i den här demoen för att ställa orden på orden.
Promenader med Andrew Hoyer
Bäst av allt kan du också lära dig att gå med Andrew Hoyer i artikeln!
Wonder Webkit
En underbar användning av CSS3 3D-transformationer med JavaScript Matrix-bibliotek. Låter tekniskt, men resultatet är rockingly coolt.
Zoetrope
Vad mer kan du inte göra med CSS3 när Zoetrope är möjligt med det?
Reflexion
Inspirerande? Ja. Praktisk? Kanske. Animeringsteknik är alltid ett huvudskrapa ämne för utvecklare och animatör eftersom det kräver viss kunskapsnivå för att producera en mjuk, unik och elegant animering. Medan CSS3 har möjlighet att göra animationen betyder det inte att det är ett lämpligt verktyg för animering. Jag tänker så småningom att det fortfarande handlar om din preferens, och jag är okej med båda, så länge som verktyget passar projektets behov.
Vad är din tanke om dessa CSS3-animationer? Är dessa CSS3-animationer bara bra som experiment, eller kan de också appliceras i den verkliga webbdesignen? Som vanligt välkomnar vi din värdefulla tanke på ämnet, och låt oss också få veta din favoritbit CSS3-animering också!
Mer
Bara showcase, verkligen? Du förtjänar att få mer! Nedan följer tutorials och guider för CSS3 från Hongkiat till dig, ha det trevligt att utforska dem!
