Idag kommer vi att ha lite bra rent roligt genom att återskapa den animerade Mario Bros. frågeteckenboxen med ren CSS3.
Längs vägen lär du dig att använda flera coola CSS3-tekniker som avrundade hörn, box- och textskuggor och keyframe-animeringar som fungerar både i Safari och Firefox. Låt oss hoppa in!
Sneak Peek
Här är en snabb titt på vad vi ska bygga idag. I verkligheten tycker jag att det är alltför upptagen att faktiskt använda på en webbplats (det kan bara göra dina ögon skadade) men det är definitivt roligt att bygga!
demo: Klicka här för att starta demo
Ladda ner: Klicka här för att ladda ner
Varför i hela världen?
Till att börja med skulle jag vilja klargöra att den här artikeln beskriver ett rent experimentellt projekt som endast är avsett för utbildningsändamål. Slutprodukten ska försämras något graciöst i andra webbläsare, men animationerna fungerar verkligen bara korrekt i Webkit-webbläsare och Firefox 5 (som nu stöder keyframe-animeringar).
Så, om det inte är klart för användning, varför störde jag med artikeln? Först och främst är körningsexperiment som detta ett fantastiskt sätt att bygga upp dina CSS-felsökningsförmåga: du löper alltid in i flera oväntade problem och måste lösa din väg ut ur dem. En dag i framtiden kommer CSS keyframe-animationer förhoppningsvis att vara något som stöds av alla större webbläsare, och det kommer definitivt att vara till hjälp att redan ha en känsla för några olika implementeringstekniker.
I slutändan är det dock bara mitt försök att rättfärdiga det faktum att jag är en Nintendo nörd som såg ett animerat Mario-block den andra dagen och genast ville bygga den i CSS. Som en sidoanteckning är ett enkelt sätt att göra denna teknik mer tillgänglig för alla webbläsare bara för att dölja CSS-animationen och använda jQuery istället.
Komma igång: HTML
Det första vi vill göra är att beskriva en del grundläggande HTML för ett block. Eftersom blocket är tänkbart något vi vill använda flera gånger, använder vi ett par klasser. På det sättet kan vi bara kopiera och klistra in block av kod och CSS kommer att ta hand om automatiskt.
Först, skapa en behållare, detta kommer att hålla alla block när vi så småningom skapar mer. Nästa droppe i en wrapper div som innehåller en stycke tagg. Denna struktur verkar vara lite överflödig just nu men när vi lägger till senare kommer det att vara meningsfullt.
Observera att jag paketerade hela styckets tagg i en länk, vilket är acceptabelt i HTML5. Jag gjorde det här eftersom själva texten kommer in och out of view och du vill att länken ska kunna klickas hela tiden, inte rent när texten är synlig. Återigen kommer det att bli mer meningsfullt senare.
Starta CSS
Därefter vill vi skapa den grundläggande stilen för vårt Mario-block. Det finns tre olika delar som vi behöver hantera, som beskrivs nedan.
Mått
Det första vi behöver göra är att helt enkelt ange en höjd och en bredd. Det här är ganska godtyckligt, så länge du skapar en torg är du bra. Jag satte min till 150px för bredd och höjd. Också vara säker på att ställa in ditt överskott till? Dolt? för animationen.
Box Styling
Därefter vill vi göra vår låda ser något som frågeteckenblocket från ett Mario-spel. Det finns flera versioner så för alla du ägnade fans där ute, vi baserar vårt ungefär på den från Super Mario Bros 3.
I koden nedan ställer jag in min färg, kant, kantradie och inre skugga för att ge blocket lite djup.
Text Styling
Det sista steget är att ställa in vårt frågetecken. Gör färgen vit, centrera inriktningen på texten, ge den en hård skugga och sätt in tecknet till något du vill. Jag hade svårt att hitta ett teckensnitt som såg lämpligt men Google Web Font Geostar Fill kommer nära.
Förhandsvisning
Vid denna tid ser vårt Mario-block ganska bra ut! Allt som är kvar nu är att få det till liv.
Animera blocket
Nu när vi har vårt block allt snyggt och stiligt, är det dags att animera det lilla frågetecken. Om vi nu ställer in animationen för att använda marginaler på vår paragraf kommer hela blocket att flytta, vilket inte är vad vi vill ha. Så istället använder vi? Text-streck? som grund för vår animation, som bara påverkar frågetecknet.
Eftersom vi vill att animationen ska slingras, kan vi inte använda en vanlig gammal CSS-övergång och istället behöva förlita sig på en keyframe-animation. Syntaxen för Webkit och Mozilla är identisk bortsett från prefixen. Först, namnge din animering (jag ringde min? Mariomation?). Därefter definierar du animationens tillstånd på olika punkter. Vi behöver bara två ramar, en för att starta och en till slut, webbläsaren fyller i luckorna.Genom att ge ett negativt inslag att starta och ett positivt inslag slutar gör vi effektivt frågeställningen från vänster till höger.
För att aktivera animeringen skapar vi först en väljare för att rikta in vad vi vill tillämpa på, i det här fallet? P.block? gör jobbet. Därefter återkallar vi animationsnamnet och definierar parametrarna: varaktighet, räkning och timingfunktion.
Med det ska ditt block vara animerade perfekt! Om det är allt du ville uppnå, var det gratis att stanna här. Jag ska gå vidare lite och lägga till i någon navigationsliknande funktionalitet.
Skapa navigationsmenyn: HTML
Eftersom vi använde klasser istället för ID-skivor, kan vi enkelt upprepa vårt block med bara en kopia och klistra in. Den här gången skapade jag fyra kvarter och lade till ett extra verktygstips som vi kommer att få fram på svävaren.
Navigationsmeny CSS
För att se till att allt ser ut som vi vill ha det, finns det flera steg, som alla visas i CSS nedan. Det första jag gjorde var att tillämpa bredd och marginaler i min behållare, det här var bara att centrera det på sidan och är ett valfritt steg.
Det viktigaste i nästa steg är att flyta? Blockwrapper? klass till vänster. Detta kommer att få dina Mario-block att visas bredvid varandra i motsats till staplade vertikalt.
Slutligen placerade jag varje verktygstips textbit över sitt respektive block och ställde opaciteten till noll. Då med en CSS-övergång gör jag texten som du svävar över blocket.
Med det är vi alla färdiga! Du borde nu ha fyra animerade block bredvid varandra.
Slutprodukt
demo: Klicka här för att starta demo
Ladda ner: Klicka här för att ladda ner
Slutsats
Det avslutar vår handledning om att skapa ett animerat Mario-block med ren CSS. Jag hoppas att du hade så mycket roligt att bygga det som jag gjorde!
Om du tycker om några förbättringar eller hitta dig själv med att använda detta är något sätt, lämna en kommentar nedan och jag ska kolla in det.