38 Inspirerende CSS3 animationsdemonstrationer
Siden introduktionen af CSS3 er der virkelig en masse hot debates drejer sig om dets muligheder og anvendelighed. Men der er også mange interessante eksperimenter håndlavede til at udforske dets potentiale. Selvom eksperimenterne med ethvert middel ikke viser CSS3's brugervenlighed, viste de virkelig de sande muligheder CSS3, i en grad, at store udviklere mener, at CSS3 er fremtiden.
Er det sandt? Døm det med dine øjne. I dette udstillingsvindue vil vi ikke vise andet end bare 38 inspirerende CSS3-baserede animationsdemoer der udelukkende opdager CSS3's sande potentiale. Udover de rene eksperimenter vil du også se nogle praktiske eksempler på, hvordan CSS3 kan anvendes til webdesign for at gøre det sødere og mere sexet.
Nok sagt, lad os undersøge den fantastiske verden af CSS3!
Du kan også være interesseret i:
- Begyndervejledning til CSS3
- Oprettelse af en Rocking CSS3 Search Box
- Opbygning af HTML5 / CSS3 websider
- Graceful Breadcrumb Navigation Menu i CSS3
- Opret en Ajax-baseret HTML5 / CSS3-kontaktformular
- 35 Grafikker bygget rent med CSS3
- mere…
Du anbefales kraftigt at se disse demoer ved hjælp af den nyeste version af Safari eller Developer-versionen af Google Chrome. De fleste demoer understøtter dog den nyeste version af Firefox og Google Chrome.
Animeret 3D Helix
Den første i listen er en utrolig animation lavet af Marcofolio.net, ved hjælp af CSS3 3D transformer. Animationen ser ud som magi selv, men du kan faktisk lære at skabe den tilsvarende effekt med vejledningen i artiklen!
Animerede knapper
Et must-see for webdesigner, da demoen ikke kun viser mulighederne for CSS3-animation, men også giver meget cool og praktisk knappeeffekter til inspiration!
Animationsmenuer
Forsøger at krydre dine animationsmenuer for at få dem til at se rigtig cool og kreative ud? Denne demo er til dig.
AT-AT Walker
En inspirerende animationsdemo, der viser CSS3's potentiale ved at animere en enhed med kropsdele.
Battlefield CSS3
Battlefield CSS3 med masser af eksplosioner og skud!
Big deal
Det er den glatte og hyggelige animation, der gjorde denne demonstration til en big deal.
Kan Haz Ur Markør?
“Hej, jeg er markørens monster. Min far har en besked til dig: "Venligst, brug ikke cursor: none, undtagen hvis du opretter en markør, der spiser monster '.”
CSS Dock
Et sexet eksperiment efterligner Mac OS X's dock, og det er rigtig glat.
CSS3 Mand
Hold øje, her kommer CSS3 mand! Perfekt eksempel til at vise det sande potentiale i CSS3 animation.
Dribbble Ball Bouncing
Med den lille brug af grafiske tricks kommer en flot og underholdende CSS3 animation.
Dulla
Dulla viser stort set en af de mest almindelige teknikker til at oprette 2D platformer spil, som nu også er muligt med CSS3.
Ramme ved ramme animation
Ramme for ramme animation med CSS3? Intet problem!
Graf Animation
En simpel men kraftig animation til at vise / forklare grafen på dit websted, lær at gøre det!
Høj
En mystisk musikanimation, der viser billeder fra Google Search dynamisk i realtid, og de viste billeder er baseret på sangteksterne.
Hover Effects
Fremtiden for svæveffekten kommer med CSS3. Slank og lovende.
Jeg er Joseph Barrett
CSS3 integreret i de sociale medier ikoner på porteføljen websted. Det er ikke kun sjovt, men viser også kreativiteten hos designeren.
Uendelig Zoom
Glat animation, også en god måde at vise frem på din portefølje. Den samlede zoom for de 26 billeder er 67108864: 1.
Kinect og CSS3
“14 kropsledninger spores og konverteres til en kort CSS animation ved hjælp af Xbox Kinect. Kroppens data hentes i browseren, hvor der analyseres og konverteres til CSS animationer med animatable.com.”
Matrix
Vil du være lige så cool som Matrix? Med CSS3 kan du lave det.
Morphing Cubes
Eksperimentel demo, der udforsker CSS3 ved hjælp af 3D-transformationer, animationer og overgange. Den interessante del her er, at du stadig kan vælge teksten på elementerne, selv når de stadig roterer.
Vores solsystem
Du behøver ikke dyre selvstændig software til at hjælpe eleverne med at udforske solsystemet mere.
Duff Roll
“Mmmmmm ... .Homer ville elske den uendelige forsyning af øl.”
Plakat Circle
Et simpelt, men interessant eksempel på at vise dig, hvordan du bruger CSS transformation og animation for at opnå interessant effekt.
Reverend Fare
Hvem kan modstå en hjemmeside med rigtig søde figurer og sjove animationer?
Rofox
Problemfri og sjov animation, få kildekoden til at prøve på egen hånd!
Fåret Shaun
“Se Shaun og hans venners antics i klip fra 'An Ill Wind', 'Snowed In', 'The Big Chase' og 'Twos Company' gennem et interaktivt eksperiment oprettet med hardware-accelereret HTML5 video, 3D CSS Transforms og WebM.”
Plads
Måske er pladsen den endelige grænse for CSS3.
Space CaCSS
Opret magisk effekt som dette er ikke rigtig svært med CSS3, da der hovedsagelig er netop det gentage-radial-gradient og baggrund-størrelse involveret. Variationer er mulige med rimelig mængde tweaks.
Star Wars Crawl
Star Wars åbningens kravleffekt! Lige så episk som CSS3.
Det ekspressive web
Den ekspressive web introducerer ikke kun CSS3 og dens browser support, reference og dokumentation, men viser også en tankegangs-CSS3-animation på sin webside.
Brevhovederne
Brug af typer til at skabe en skygge, der ligner menneskets ansigt, hvem ville have troet, det ville være muligt med CSS3?
The Man From Hollywood
Har du nogensinde set disse attraktive animationer ved hjælp af bare ren typografi? Nå, det kan du også gøre med CSS3.
Planetariumet
Bare episk demo om at udforske planetariet med detaljer. SVG, JavaScript, HTML5, CSS3, skrifttyper og typer er involveret.
Type Rains
“Forventningen for i dag, forudsat at du bruger en moderne browser, er overskyet, med en 100% chance for Georgiens brusere.”
Typografi Effekter
Udover knapper, menu- og svæveffekter kan du også opnå kreative typografiske effekter med CSS3. jQuery er også involveret i denne demo for at style bogstaverne af ordene.
Går med Andrew Hoyer
Bedst af alt kan du også lære at gå med Andrew Hoyer i artiklen!
Wonder Webkit
En vidunderlig brug af CSS3 3D-transformationer med JavaScript Matrix-bibliotek. Lyder teknisk, men resultatet er rockingly cool.
Zoetrope
Hvad mere kan du ikke gøre med CSS3, når Zoetrope er muligt med det?
Afspejling
Inspirerende? Ja. Praktisk? Måske. Animationsteknik er altid et hovedskraberende emne for udvikler og animator, da det kræver en vis grad af viden til at producere rigtig glat, unik og stilfuld animation. Mens CSS3 har mulighed for at gøre animationen, betyder det ikke, at det er et egnet værktøj til animation. Jeg tror efterhånden, at det stadig handler om din præference, for mig er det okay med begge, så længe værktøjet passer til projektets behov.
Hvad er din tanke om disse CSS3 animationer? Er disse CSS3-animationer kun gode som eksperimenter, eller kan de også anvendes i det virkelige webdesign? Som sædvanlig glæder vi os over din dyrebare tanke om emnet, og lad os også vide dit yndlingsstykke CSS3 animation!
Mere
Bare fremvise, virkelig? Du fortjente at få mere! Nedenfor er tutorials og vejledninger af CSS3 fra Hongkiat til dig, har det godt at udforske dem!
