CSS är ett av de mest mångsidiga programmeringsspråken i populär användning. Möjligheterna är oändliga, från layouter och texteffekter till färgen och storleken på ditt innehåll. En av de mest intressanta användningsområdena för CSS är att skapa animationer. Och det är vad det här inlägget handlar om.
Det här inlägget listar några av de mest kreativa CSS-animationerna du hittar på webben. Från övergångseffekter till karaktärsanimationer, här hittar du några riktigt intressanta exempel som du kan använda direkt i ditt projekt eller hämta inspiration från. Så ta en titt och välj din favorit.
CSS laddar animation
Skapare: patrikhjelm
Sju animerade punkter rör sig åt vänster och höger för att indikera en laddningsåtgärd.
Animerad kundvagn ikon
Skapare: jonitrythall
Söta animerade effekter för när du lägger till mat i kundvagnen. Scrolla ner för mer information.
Hamburger CSS3-animation
Skapare: David Krajewski
Byggd med ren CSS, utan JS eller något annat.
404 animerad karaktär
Skapare: med en är
Åtminstone med den här felsidan arbetar en utvecklare på den. Även om det är en 404.
CSS landar på Mars
Skapare: mgitch
Vi har landat på Mars! Tillverkad med CSS.
Hämnaren
Skapare: mariosmaselli
Kan du höra Hulks ilska darra genom skärmen? Coolt, eller hur?
Växla dag/natt
Skapare: jsndks
Nu kan du växla dag och natt med CSS. Bra ide!
Tredjepartsapplikation Google Now
Skapare: codecalm
Google Now-appar från tredje part, animerade.
clo clo
Skapare: judag
Rör sig en tupp så? Du slår vad om att det gör det, komplett med jiggy neck. Bra CSS3-övning.
Ytterligare en CSS-förladdare
Skapare: murare
En fantastisk CSS rytmisk laddningsanimation. Hypnotisk, eller hur?
skickaknapp
Skapare: Auginator
Klicka för att skicka och knappen animerar uppladdningsprocessen tills inlämningen är klar.
Elastisk SVG Sidebar Material Design
Skapare: suez
Dra den vita stapeln till höger för att se en fjädrande sidofältseffekt.
partikelknapp
Skapare: igcorreia
Gör som knappen säger: håll muspekaren över det underbara.
klibbig knapp
Skapare: Lucas Bebber
Klicka för klibbig effekt. Du kommer att få den när du ser den och klicka på den några gånger till. Amirite?
bakåtknapp
Skapare: hakimel
Klicka på vardera sidan av knappen Ta bort och knappen vänds beroende på var du klickar.
Riktig hamburgermeny!
Skapare: charlesintelligent
En riktigt läcker hamburgermeny. Klicka på hamburgaren för att se effekterna.
Kryssning
Skapare: åå
Se motorcykel igång.
3D-kubvåg
Skapare: waddington
Signatur animation
Skapare: Secogiel
Här är en signatur som faktiskt inte är en GIF-animation, utan en PNG-sekvens animerad med CSS3.
Bakgrundsgradientanimering
Skapare: quasimondo
Detta trick ändrar bakgrundsgradienten från en färg till en annan smidigt och kontinuerligt.
Star Wars växlingsikon
Skapare: rss
En meny med hamburgare förvandlas till ljussabel i strid (ett kors).
GIF stil animation
Skapare: jasha
Se hur ett fotografi materialiseras mitt i pixelkonsten.
Fokusera in/ut animation
Skapare: flöde
En liten animerad penna skriver ovanpå formuläret du fyller i.
kromatisk triangel
Skapare: felipedefarias
En imponerande optisk illusion, ja, gjord med CSS3.
Kaffebryggare
Skapare: esteesroger
Här är en påminnelse om att ta din dagliga dos kaffe. Som om du behövde en.
Dinosaurie i krom
Skapare: smekspel
Kan du inte komma åt sidan du vill ha på grund av att anslutningen bröts? Här är dinosaurien du alltid ser när det händer, men den här gången flyr den från en meteorit!
CSS skaka
Skapare: therumordelaluz
Håll muspekaren över varje effekt för att se den lilla skaka.
Newtons vagga laddare
Skapare: Allt som är Smitty
Om du kan fysik så vet du det säkert Newtons vaggamen förmodligen inte så.
Starta modalen
Skapare: koolhaus
Klicka för att se den trevliga, flytande animeringen av modalfönstret.
gående robot
Skapare: P233
Denna robot fortsätter att gå, gå, gå runt Y-axeln.
Flex pagineringspilar
Skapare: hakim
Från första sidan till den sista visar den här sideringsanimeringen tydligt hur du gör, sida för sida.
Det finns mer här:
Animerad 3D-propeller
Den första på listan är en otrolig animation gjord av Marcofolio.net, med hjälp av 3D CSS3-transformationer. Animationen ser magisk ut i sig, men du kan lära dig hur du skapar en liknande effekt med handledningen i artikeln!
Animerade knappar
Ett måste för webbdesigners, eftersom demon inte bara visar möjligheterna med CSS3-animering utan också ger mycket intressanta och praktiska knappeffekter för inspiration.
Animationsmenyer
Försöker du piffa upp dina animationsmenyer för att få dem att se riktigt coola och kreativa ut? Den här demon är för dig.
vilken grej
Det är den smidiga och tilltalande animationen som gjorde den här demon så viktig.
CSS3 Man
Se upp, här kommer CSS3-mannen! Ett perfekt exempel för att visa den verkliga potentialen i CSS3-animation.
Studsa den studsande bollen
Med den lilla användningen av grafiska trick får du en snygg och rolig CSS3-animation.
Bildruta för bildruta animering
Bildruta för bildruta-animering med CSS3? Inga problem!
Grafisk animation
En enkel men kraftfull animation för dig att visa/förklara diagrammet på din webbplats, lär dig hur du gör det!
Hover-effekter
Hover-effektens framtid kommer med CSS3. Elegant och lovande.
Oändlig zoom
Smidig animering; Det är också ett bra sätt att visa upp din portfölj. Den totala zoomen av de 26 bilderna är 67108864:1.
Kinect och CSS3
“14 kroppsleder spåras och omvandlas till en kort CSS-animation med Xbox Kinect. Kroppsdata förs till webbläsaren där den tolkas och konverteras till CSS-animationer med animatable.com.”
Matris
Vill du vara lika cool som The Matrix? Med CSS3 kan du göra det.
Transformatorkuber
Experimentell demo som utforskar CSS3 med 3D-transformationer, animationer och övergångar. Det intressanta här är att du fortfarande kan välja text från element även när de fortfarande roterar.
Vårt solsystem
Du behöver inte längre dyr fristående programvara för att hjälpa eleverna att utforska solsystem.
nonsens rulle
“Mmmmmm… Homer skulle älska att ha ett oändligt utbud av öl.”
Affisch cirkel
Ett enkelt men intressant exempel som visar hur du använder CSS-transformation och animering för att uppnå en intressant effekt.
Star Wars-spårning
Star Wars öppningscrawl-effekt! Lika episk som CSS3.
Typografieffekter
Förutom knapp-, meny- och hovringseffekter kan du också uppnå kreativa typografieffekter med CSS3. jQuery deltar också i denna demo för att utforma bokstäverna i orden.
Promenad med Andrew Hoyer
Det bästa av allt är att du också kan lära dig att gå med Andrew Hoyer i artikeln!
Wonder web kit
En underbar användning av CSS3 3D-transformationer med JavaScript Matrix-biblioteket. Det låter tekniskt, men resultatet är fantastiskt bra.
Zoetrope
Vad mer kan du inte göra med CSS3 när Zoetrope är möjligt med det?
Ytterligare:
Här är fler relaterade artiklar som kan intressera dig:
