Heute werden wir ein bisschen Spaß beim Reinigen haben, indem wir das animierte Mario Bros.-Fragezeichen mit reinem CSS3 neu erstellen.
Auf dem Weg erfahren Sie, wie Sie verschiedene coole CSS3-Technologien wie abgerundete Ecken, Box- und Text-Schatten sowie Keyframe-Animationen verwenden, die sowohl in Safari als auch in Firefox funktionieren. Lass uns rein springen!
Vorgeschmack
Hier ein kurzer Blick auf das, was wir heute bauen werden. In Wirklichkeit denke ich, dass es viel zu beschäftigt ist, um auf einer Website verwendet zu werden (es könnte nur Ihre Augen schaden), aber es macht auf jeden Fall Spaß zu bauen!
Demo: Klicken Sie hier, um die Demo zu starten
Herunterladen: Klicke hier zum herunterladen
Warum auf der Erde?
Zu Beginn möchte ich klarstellen, dass dieser Artikel ein rein experimentelles Projekt darstellt, das nur für Bildungszwecke gedacht ist. Das Endprodukt sollte in anderen Browsern etwas elegant heruntergefahren werden. Die Animationen funktionieren jedoch nur in Webkit-Browsern sowie in Firefox 5 (das jetzt Keyframe-Animationen unterstützt) richtig.
Wenn es nicht einsatzbereit ist, warum habe ich mich dann mit dem Artikel beschäftigt? Zunächst einmal ist das Ausführen von Experimenten eine hervorragende Methode, um Ihre CSS-Fehlerbehebungsfähigkeiten aufzubauen: Sie stoßen immer auf einige unerwartete Probleme und müssen Ihren Weg aus ihnen lösen. Eines Tages in der Zukunft werden CSS-Keyframe-Animationen hoffentlich etwas sein, das von allen gängigen Browsern unterstützt wird, und es wird auf jeden Fall hilfreich sein, bereits ein Gefühl für verschiedene Implementierungstechniken zu haben.
Letztendlich ist dies alles nur mein Versuch, die Tatsache zu rechtfertigen, dass ich ein Nintendo-Nerd bin, der neulich einen animierten Mario-Block gesehen hat und ihn sofort in CSS bauen wollte. Nebenbei bemerkt, eine einfache Möglichkeit, diese Technik für alle Browser zugänglicher zu machen, besteht darin, die CSS-Animation einfach aufzuheben und stattdessen jQuery zu verwenden.
Erste Schritte: Das HTML
Das erste, was wir tun wollen, ist ein einfaches HTML für einen Block. Da der Block möglicherweise etwas ist, das wir wiederholt verwenden möchten, verwenden wir einige Klassen. Auf diese Weise können wir einfach Codeblöcke kopieren und einfügen. CSS wird automatisch erledigt.
Erstellen Sie zunächst einen Container, der alle Blöcke enthält, wenn Sie schließlich weitere erstellen. Nächstes Drop in einem Wrapper-Div, das ein Absatz-Tag enthält. Diese Struktur erscheint im Moment etwas überflüssig, aber wenn wir später mehr hinzufügen, wird es sinnvoll sein.
Beachten Sie, dass ich mein gesamtes Absatz-Tag in einen Link eingepackt habe, was in HTML5 akzeptabel ist. Ich habe dies getan, weil der Text selbst ein- und ausgeblendet wird und Sie möchten, dass der Link immer anklickbar ist, nicht nur, wenn der Text sichtbar ist. Auch dies wird später mehr Sinn ergeben.
CSS starten
Als nächstes wollen wir den Grundstil für unseren Mario-Block erstellen. Es gibt drei verschiedene Abschnitte, die wir behandeln müssen.
Maße
Als erstes müssen wir einfach Höhe und Breite einstellen. Dies ist ziemlich willkürlich, solange Sie ein Quadrat erstellen, sind Sie gut. Ich setze meinen auf 150px für die Breite und Höhe. Stellen Sie außerdem sicher, dass Ihr Überlauf auf "ausgeblendet" eingestellt ist. für die Animation.
Box-Styling
Als Nächstes möchten wir, dass unsere Box in etwa wie der Fragezeichenblock eines Mario-Spiels aussieht. Es gibt verschiedene Versionen, also für alle Fans, die wir da draußen haben, werden wir unsere Basis bauen grob auf der einen von Super Mario Bros 3.
Im folgenden Code stelle ich Farbe, Rand, Randradius und inneren Schatten ein, um dem Block Tiefe zu verleihen.
Text-Styling
Der letzte Schritt besteht darin, unser Fragezeichen zu gestalten. Stellen Sie die Farbe weiß ein, zentrieren Sie den Text in der Mitte, geben Sie ihm einen harten Schatten und stellen Sie die Schriftart nach Wunsch ein. Es fiel mir schwer, eine Schrift zu finden, die angemessen aussah, aber die Geostar-Füllung von Google Web Font kommt nahe.
Vorschau
An diesem Punkt sieht unser Mario-Block ziemlich gut aus! Jetzt bleibt nur noch, es zum Leben zu erwecken.
Animieren des Blocks
Jetzt, da wir unseren Block ganz nett und gestylt haben, wird es Zeit, dieses kleine Fragezeichen zu animieren. Wenn wir nun die Animation so einrichten, dass Ränder für unseren Absatz verwendet werden, wird der gesamte Block verschoben. Dies ist nicht das, was wir wollen. Stattdessen verwenden wir? Text-indent? als Basis für unsere Animation, die nur das Fragezeichen betrifft.
Da die Animation in einer Schleife dargestellt werden soll, können wir keinen einfachen alten CSS-Übergang verwenden und müssen stattdessen auf eine Keyframe-Animation zurückgreifen. Die Syntax für Webkit und Mozilla ist abgesehen von den Präfixen identisch. Benennen Sie zuerst Ihre Animation (ich habe meine? Mariomation? Genannt). Als Nächstes definieren Sie den Status der Animation an den verschiedenen Punkten. Wir brauchen nur zwei Frames, einen zum Starten und einen zum Ende, der Browser füllt die Lücken.Wenn Sie einen negativen Einzug beim Start und einen positiven Einzug beim Beenden angeben, wird das Fragezeichen effektiv von links nach rechts bewegt.
Um die Animation zu aktivieren, erstellen wir zunächst einen Selektor, um das Ziel festzulegen, auf das wir es anwenden möchten, in diesem Fall "p.block". macht den Job. Dann rufen wir den Animationsnamen ab und definieren die Parameter: Dauer, Anzahl und Timing-Funktion.
Damit sollte Ihr Block perfekt animiert sein! Wenn Sie das alles wollen, können Sie hier aufhören. Ich gehe ein wenig weiter und füge einige Navigationsfunktionen hinzu.
Navigationsmenü erstellen: HTML
Da wir Klassen anstelle von IDs verwendet haben, können wir unseren Block einfach durch Kopieren und Einfügen wiederholen. Dieses Mal habe ich vier Blöcke erstellt und einen zusätzlichen Tool-Tipp hinzugefügt, den wir im Schwebeflug erscheinen lassen.
Navigationsmenü CSS
Damit alles so aussieht, wie wir es wollen, gibt es mehrere Schritte, die unten im CSS gezeigt werden. Das erste, was ich gemacht habe, war das Anbringen von Breite und Rändern an meinem Container, dies dient lediglich der Zentrierung auf der Seite und ist ein optionaler Schritt.
Das Wichtigste im nächsten Schritt ist, den "BlockWrapper" zu schweben. Klasse nach links. Dadurch erscheinen Ihre Mario-Blöcke direkt nebeneinander und nicht vertikal gestapelt.
Zum Schluss habe ich jedes Tooltip-Text-Snippet über seinem jeweiligen Block positioniert und die Deckkraft auf Null gesetzt. Dann mache ich mit einem CSS-Übergang den Text, wenn Sie über den Block fahren.
Damit sind wir alle fertig! Sie sollten jetzt vier animierte Blöcke nebeneinander haben.
Endprodukt
Demo: Klicken Sie hier, um die Demo zu starten
Herunterladen: Klicke hier zum herunterladen
Fazit
Damit ist unser Tutorial zum Erstellen eines animierten Mario-Blocks mit reinem CSS abgeschlossen. Ich hoffe, du hattest genauso viel Spaß daran wie ich!
Wenn Sie an irgendwelche Verbesserungen denken oder sich davon in irgendeiner Weise bedienen, lassen Sie unten einen Kommentar und ich schaue es mir an.