Hallo zusammen! CSS3 ist einfach genial. Die Entwicklung ist schnell und die Möglichkeiten sind endlos. Heute zeige ich euch, wie man eine fantastische Animation mit mehreren Hintergrundbildern und linearen Verläufen in CSS erstellt. Wir werden die Facebook-Ladeanimation mit nur einem einzigen HTML-Element erstellen.
Der Einfachheit halber werden Sie keine Vendor-Präfixe im CSS sehen. Bevor wir uns mit der Erstellung der Facebook-Ladeanimation beschäftigen, erkläre ich die grundlegenden Techniken.
background-image
Wir alle kennen die background-image-Eigenschaft. Sie geben ihr eine url(), die auf eine externe Bilddatei (oder eine Daten-URI) verweist, um dieses Bild als Hintergrund für jedes HTML-Element erscheinen zu lassen.
Jetzt ist es möglich, einen linear-gradient oder radial-gradient als Hintergrundbild zu verwenden. Dies eröffnet eine ganz neue Welt von Hintergründen, die nur mit Code generiert werden können. Ich werde die Syntax nicht erklären (die können Sie aus diesen beiden Links entnehmen), aber ich gebe Ihnen einige Tipps, die Ihnen helfen werden, fantastische Muster und fast jede Form zu erstellen.
Der Trick, der sich als nützlich erweist, ist die Möglichkeit, mehr als ein Hintergrundbild gleichzeitig hinzuzufügen.
div {
background-image:
background-image
[, background-image]* /* optional additional backgrounds */
}Siehe MDN: background-image für weitere Informationen. Um zu sehen, was andere mit diesen Eigenschaften erstellt haben, schauen Sie sich diese Galerie an.
Wie man mit linearen Verläufen zeichnet
Lassen Sie uns mit einigen grundlegenden linearen Verläufen beginnen, um deren Syntax kennenzulernen.
background-image: linear-gradient(90deg, blue, red);Um die Syntax und alle Möglichkeiten zu sehen, sollten Sie sich MDN ansehen: linear-gradient.
Dies führt zu diesem Ergebnis
Sie sehen einen schönen Verlauf zwischen Blau und Rot. Aber immer nur einen Verlauf zu zeichnen wäre ziemlich langweilig. Wäre es nicht fantastisch, Muster wie dieses zu generieren?
Also, lass es uns machen! Betrachten Sie das obige Muster. Sie sehen vier verschiedene Farben, jede Farbe benötigt 1/4 der Breite. Ausgedrückt in Prozent erhalten wir 25% (100%/4). Für solch einfache Muster empfehle ich die Verwendung von Prozentangaben, damit sich das Muster dynamisch an die Größe des Elements anpasst.
Um das Bildmuster in linear-gradient zu übersetzen, beginnen wir mit der äußersten linken Farbe. Blau in diesem Fall.
background-image: linear-gradient(90deg, blue 25%);Dies führt zu einem leeren Hintergrundbild. Damit linear-gradient funktioniert, müssen wir mindestens zwei Farben hinzufügen. Fügen wir die nächste Farbe hinzu, Grün
background-image: linear-gradient(90deg, blue 25%, green 25%);Dieser erste Farbwert ist besonders, denn "blau 25%" bedeutet nicht, dass die blaue Farbe bei 25% beginnt. In diesem Fall bedeutet "blau 25%", dass die Farbe Blau sich bis zu 25% erstreckt.
Was wir erhalten, ist das
Genau das, was wir wollen, eine scharfe Trennung zwischen Blau und Grün. Aber wie Sie vielleicht bemerken, müssen wir für die blaue und die grüne Farbe jeweils 25% schreiben. Bei der Entwicklung ist das ziemlich ärgerlich, da Sie beide Werte ändern müssen, um die scharfe Trennung beizubehalten.
Beim Spielen mit linearen Verläufen habe ich einen netten kleinen Weg gefunden, dies etwas einfacher zu machen
background-image: linear-gradient(90deg, blue 25%, green 0);Jetzt setzen wir einfach die Position der Farbe Grün auf "0". Was wir damit erreichen, ist, dass Grün immer an derselben Position beginnt wie die vorherige Farbe, in diesem Fall Blau. Das Ergebnis ist dasselbe wie zuvor, aber jetzt müssen Sie nur noch einen Wert ändern, um die Größe des blauen Rechtecks zu ändern. Das Hinzufügen der restlichen Farben wird ziemlich einfach, da wir jetzt wissen, wie man einen scharfen Farbschnitt erstellt.
background-image: linear-gradient(90deg, blue 25%, green 0, green 50%, red 0, red 75%, yellow 0);Sie sehen jetzt, warum der erste Farbwert besonders ist. Für jede andere Farbe müssen wir sie zweimal definieren. Einmal für die Startposition und das andere Mal, um anzugeben, wie weit sie sich erstrecken wird.
Ergebnis
Wie können wir Formen erstellen?
Um einige grundlegende Formen mit der background-image-Eigenschaft zu erstellen, beginnen wir mit diesem
.squareandcircle{
width: 40px;
height: 30px;
background-image: linear-gradient(90deg, blue, blue),
radial-gradient(center, circle, green 10px, transparent 0);
background-size: 15px 15px,
20px 20px;
background-position: 0 0,
20px 10px;
background-repeat:no-repeat;
}
Wir haben mehrere Hintergrundbilder in Kombination mit background-size und background-position verwendet, um ein Quadrat und einen Kreis zu erstellen.
Wie funktioniert das also?
Beginnen mit background-image
Zuerst müssen wir die Hintergrundbilder erstellen. Der Einfachheit halber verwenden wir den grundlegendsten linear-gradient und den grundlegendsten radial-gradient.
Nun weiter zur nächsten Eigenschaft: background-size
Die background-size-Eigenschaft legt die Größe für jedes zuvor erstellte Hintergrundbild in der gleichen Reihenfolge fest, in der sie erstellt wurden.
In unserem Fall ist die Größe des linearen Verlaufs 15x15px. Und für den radialen Verlauf ist es 20x20px.
Position jedes Hintergrunds: background-position
Jetzt haben wir zwei Bilder: eines von einem Quadrat mit einer Größe von 15x15px und eines von einem Kreis, das in ein 20x20px Quadrat passt. Aber diese Bilder liegen übereinander. Um sie zu verschieben, benötigen wir background-position.
Für background-position müssen wir für jedes Hintergrundbild einen Abstand relativ zur oberen linken Ecke des Elements definieren.
Hier befindet sich das erste Bild (das Quadrat) in der oberen linken Ecke, und der Kreis liegt 20 Pixel links und 20 Pixel unterhalb davon. Beachten Sie, dass wir jedes Bild vom oberen linken Eck des Elements aus bewegen.
background-repeat
Das letzte unerklärte Bit ist background-repeat, was ziemlich einfach ist. Wir möchten nicht, dass sich unsere generierten Bilder in irgendeine Richtung wiederholen, also setzen wir es einmal auf no-repeat. Wenn wir nur einen Wert hinzufügen, wird dieser Wert für alle von uns erstellten Hintergrundbilder verwendet.
Wie erstellen wir damit Animationen?
Es ist ganz einfach. Wir erstellen unsere Form mit Hintergrundbildern und verwenden dann die animation-Eigenschaft, um das Ganze zu animieren, indem wir die Hintergrundgröße und/oder -position ändern.
Nur ein einfaches Beispiel, bevor wir die Facebook-Ladeanimation machen. Wir beginnen mit etwas grundlegendem Markup wie diesem
.square {
width: 40px;
height: 30px;
background-color: gray;
background-image: linear-gradient(90deg, blue, blue);
background-size: 15px 15px;
background-position: 0 0;
background-repeat: no-repeat;
}Was aussieht wie
Lassen Sie uns dies in sechs Schritten animieren, indem wir das Quadrat von der oberen rechten Ecke nach unten zur unteren rechten Ecke und zurück zur unteren linken Ecke bewegen.
Grundrechenarten sagen uns, dass wir 16,6% Zeit für jeden Frame (100%/6 ~ 16,6%) in unserer Keyframe-Animation benötigen. In jedem Frame ändern wir die Hintergrundposition, um die Illusion zu erzeugen, dass sich unser Quadrat bewegen würde.
Wir werden am Ende eine ganze Menge CSS haben
@keyframes move {
16.6% {
background-position: 0 0;
}
33.2% {
background-position: 12.5px 0;
}
49.8% {
background-position: 25px 0;
}
66.4% {
background-position: 25px 15px;
}
83% {
background-position: 12.5px 15px;
}
99% {
background-position: 0 15px;
}
}Um die Animation zu sehen, müssen wir die Animation wie folgt zu unserem Quadrat-Element hinzufügen
.square{
width: 40px;
height: 30px;
background-color: gray;
background-image: linear-gradient(90deg, blue, blue);
background-size: 15px 15px;
background-position: 0 0;
background-repeat: no-repeat;
animation: move 1s steps(1, start) infinite;
}Die Funktion `steps` ist fantastisch. Sie können mehr darüber hier lesen.
Sehen Sie es in Aktion
Die hier eingebettete Animation ist möglicherweise gestoppt. Um sie in Aktion zu sehen, besuchen Sie den Pen.
Versuchen Sie, damit zu spielen, um alle Möglichkeiten zu verstehen, die Sie haben. Tatsächlich erhalten wir hier eine offene Leinwand, auf der wir fast jede Form zeichnen und sie auf jede erdenkliche Weise animieren können.
Die Facebook-Ladeanimation.
Jetzt ist es an der Zeit, mit diesen Techniken eine kompliziertere Animation zu erstellen.
Schauen Sie sich das Original-GIF der Facebook-Ladeanimation an.
Im GIF sehen wir vertikale Streifen, die von links nach rechts verlaufen, während sie schrumpfen und an Farbe verlieren.
Wie können wir das in CSS erreichen? Lassen Sie mich zuerst sagen: Ich werde nicht erklären, wie jeder einzelne dieser Streifen erstellt wird. Ich werde nur erklären, wie man den ersten erstellt, von dort aus sollte es nicht allzu schwer sein, den Rest zu verstehen.
Lassen Sie uns ein wenig auf den ersten Streifen zoomen
Die erste Form ist 4 Pixel breit und 16 Pixel lang. Um ein 3x16 Pixel großes Vollfarbrechteck herum befindet sich ein 1 Pixel breiter Rahmen. Der Einfachheit halber wird der Rahmen, den wir erstellen, ebenfalls eine Vollfarbe haben. Um eine solche Form zu erstellen, müssen wir zwei Hintergrundbilder mit linear-gradient generieren. Eines für den linken Rand, das innere Vollfarbrechteck und den rechten Rand und eines für den oberen und unteren Rand. Wir beginnen mit dem linear-gradient für den linken Rand, das innere Vollfarbrechteck und den rechten Rand.
#facebook {
width: 16px;
height: 16px;
background-image: linear-gradient(90deg, #8490c6 1px, #aeb5da 0, #aeb5da 3px, #8490c6 3px);
background-size: 4px 16px;
background-position: 0 0;
/* Just to make it a little bigger*/
zoom: 5;
}Das Ergebnis
Um diese Form zu vervollständigen, müssen wir dann ein weiteres Hintergrundbild hinzufügen, um den oberen und unteren Rand zu erstellen
#facebook {
width: 16px;
height: 16px;
background-image:
linear-gradient(0deg, #8490c6 1px, transparent 0, transparent 15px, #8490c6 15px),
linear-gradient(90deg, #8490c6 1px, #aeb5da 0, #aeb5da 3px, #8490c6 3px);
background-size: 4px 16px,
4px 16px;
background-position: 0 0,
0 0;
background-repeat: no-repeat;
/* Just to make it a little bigger*/
zoom:5;
}Es ist nicht notwendig, die Werte von background-size und background-position zu wiederholen, da sie gleich sind, aber für die weitere Entwicklung ist es besser, sie zu schreiben.
Und jetzt haben wir das
Wir müssen sechs dieser Streifen in etwas weniger Farbe und Größe erstellen. Wie man diese erstellt, sollte inzwischen klar sein.
#loader {
zoom: 1; /* Increase this for a bigger symbol*/
width: 16px;
height: 16px;
background: linear-gradient(0deg, #f4f5fa 1px, transparent 0, transparent 8px, #f4f5fa 8px), /* 6 */
linear-gradient(90deg, #f4f5fa 1px, #f6f9fb 0, #f6f9fb 3px, #f4f5fa 3px),
linear-gradient(0deg, #ececf5 1px, transparent 0, transparent 8px, #ececf5 8px), /* 5 */
linear-gradient(90deg, #ececf5 1px, #f2f3f9 0, #f2f3f9 3px, #ececf5 3px),
linear-gradient(0deg, #e7eaf4 1px, transparent 0, transparent 8px, #e7eaf4 8px), /* 4 */
linear-gradient(90deg, #e7eaf4 1px, #eef1f8 0, #eef1f8 3px, #e7eaf4 3px),
linear-gradient(0deg, #b9bedd 1px, transparent 0, transparent 10px, #b9bedd 10px), /* 3 */
linear-gradient(90deg, #b9bedd 1px, #d0d5e8 0, #d0d5e8 3px, #b9bedd 3px),
linear-gradient(0deg, #9fa6d2 1px, transparent 0, transparent 15px, #9fa6d2 15px), /* 2 */
linear-gradient(90deg, #9fa6d2 1px, #c0c5e1 0, #c0c5e1 3px, #9fa6d2 3px),
linear-gradient(0deg, #8490c6 1px, transparent 0, transparent 15px, #8490c6 15px), /* 1 */
linear-gradient(90deg, #8490c6 1px, #aeb5da 0, #aeb5da 3px, #8490c6 3px);
background-repeat: no-repeat;
background-size:
4px 9px, /* 6 */
4px 9px,
4px 9px, /* 5 */
4px 9px,
4px 9px, /* 4 */
4px 9px,
4px 11px, /* 3 */
4px 11px,
4px 16px, /* 2 */
4px 16px,
4px 16px, /* 1 */
4px 16px;
background-position-x: -4px; /* Hide All */
background-position-y: 3px, 3px, 3px, 3px, 3px, 3px, 2px, 2px, 0, 0, 0, 0;
}Alle sechs Streifen sind versteckt, da sie um -4 Pixel auf der x-Achse verschoben sind.
Denken wir noch einmal an das Original-GIF. Es enthält acht Schritte, bei denen jeder Streifen immer weiter nach links bewegt wird. Was wir also erstellen müssen, ist eine Animation mit acht Schritten, wobei jeder Schritt 12,5% der Zeit benötigt (100%/8). Bei jedem Schritt bewegt sich jeder Streifen 6 Pixel nach rechts. Wenn die Position des Streifens auf der x-Achse größer als 16 Pixel ist, ist er außerhalb der Leinwand und wir können ihn bei -4 Pixel platzieren, um ihn zu verstecken.
Sie haben vielleicht die Verwendung von background-position-y bemerkt. Das spart uns eine Menge Code, da wir die Streifen nur auf der x-Achse bewegen müssen, wir müssen nie die y-Koordinaten ändern, daher müssen wir in unserer Keyframe-Animation nur die Koordinaten für die Position auf der x-Achse schreiben.
@keyframes wait {
12.5% {
background-position-x: -4px,-4px, -4px, -4px, -4px,-4px,
-4px,-4px, -4px, -4px, 0, 0;
}
25% {
background-position-x: -4px, -4px, -4px, -4px, -4px,-4px,
-4px, -4px, 0, 0, 6px, 6px;
}
37.5% {
background-position-x: -4px, -4px, -4px, -4px, -4px, -4px,
0, 0, 6px, 6px, 12px, 12px;
}
50%{
background-position-x: -4px, -4px, -4px, -4px, 0, 0,
6px, 6px, 12px, 12px, -4px, -4px;
}
62.5% {
background-position-x: -4px, -4px, 0, 0, 6px, 6px,
12px, 12px, -4px, -4px, -4px, -4px;
}
75% {
background-position-x: 0, 0, 6px, 6px, 12px, 12px,
-4px, -4px, -4px, -4px, -4px, -4px;
}
87.5%{
background-position-x: 6px, 6px, 12px, 12px, -4px, -4px,
-4px, -4px, -4px, -4px, -4px, -4px;
}
100% {
background-position-x: 12px, 12px, -4px, -4px, -4px, -4px,
-4px, -4px, -4px, -4px, -4px, -4px;
}
}Da jeder Streifen aus zwei Hintergrundbildern besteht, müssen wir bei jedem Schritt zwölf Hintergrundpositionen ändern (zwei für jeden Streifen).
Und schließlich können wir die animation-Eigenschaft zu unserem Element hinzufügen
animation: wait .80s steps(1, start) infinite;Hier ist eine Live-Demo auf Codepen
Auch hier kann die hier eingebettete Animation gestoppt sein. Um sie in Aktion zu sehen, besuchen Sie den Pen.
Danke fürs Lesen. Ich hoffe, es hat Ihnen gefallen. Danke!
Vor genau einer Stunde habe ich Ihr ios6gallery-Beispiel getwittert http://labs.weinberg.me/ios6gallery/ und jetzt lese ich das.
Ich liebe den Artikel, mach weiter so...
Wow, ich finde die CSS-Version flüssiger als das GIF.
Toller Artikel! Ich liebte den Schritt-für-Schritt-Prozess, den Sie unternommen haben, um ihn uns allen zu erklären. Ich muss jedoch fragen: Bei all dem CSS, das auf einer typischen Website verwendet wird. Glauben Sie, dass die Verwendung eines JS-Skripts besser wäre als die Umsetzung in CSS?
Nein, einige könnten argumentieren, dass das GIF der bessere Weg wäre. Keine Programmierung und keine mathematischen Berechnungen durch den Browser. Es scheint, dass es alles eine Frage der Perspektive ist.
Schön und spaßig, weil man es kann, aber nichts, was ich in einem Projekt machen würde.
Gibt es Vorteile gegenüber einem animierten GIF, die ich übersehe?
Ein Grund, dies mit CSS anstelle eines animierten GIF zu tun, könnte darin bestehen, dass die Farbe dynamisch eingestellt werden kann, z. B. basierend auf dem vom Benutzer ausgewählten Thema. Bei GIFs müssten Sie das GIF für jede mögliche Farbe erstellen.
GIF war ein schlechtes Beispiel. Wie wäre es mit einem animierten SVG? Es kann auch gestylt werden.
Wow. Die Facebook-Animation ist großartig, aber wie Sie die Verwendung von Verläufen erklären, hat meinen Tag gemacht!
Ich vermute, die Verwendung des animierten GIFs wird immer die beste Option für die Abwärtskompatibilität sein, aber das CSS ist großartig für die Anpassbarkeit. Ich frage mich, was sich zu einer kleineren Größe kompilieren lässt? Das CSS oder das animierte GIF?
Wow! Fantastisch!!!
Schöne Ausarbeitung, es sieht großartig aus!
Zuerst einmal ist das erstaunlich!
Zweitens, wie frühere Kommentatoren, habe ich eine Bitte – vielleicht können Sie einen Beitrag darüber schreiben, was effizienter ist (Größenmäßig, Verarbeitungsgeschwindigkeit, Browserressourcen, was auch immer) – animierte GIFs, JavaScript oder reines CSS. Ich liebe diese CSS-Gehirn-Übungen, aber manchmal muss man die richtige Entscheidung treffen, wenn man eine echte Website erstellt! (nicht über Browserkompatibilität gesprochen, lass das mal beiseite...)
Danke!
Ich habe darüber nachgedacht, darüber zu schreiben, was effizienter ist. Ich werde versuchen, in Zukunft einen guten Vergleich zu erstellen.
Das ist eine Animation für Kinder
Das ist nett, aber sinnlose Arbeit. Bleiben Sie in solchen Fällen bei Bildern.
Haben Sie reale Daten, um eine solche Behauptung zu stützen?
Denken Sie daran
Wie ist das überhaupt nutzlos? Dies ist bahnbrechende Technologie, und diese Art von progressivem Denken ebnet den Weg und inspiriert Entwickler auf der ganzen Welt, kreativer zu sein, über den Tellerrand hinauszuschauen und die Flexibilität, Skalierbarkeit und die Art und Weise, wie wir einfache Aufgaben wie diese erledigen, zu verbessern. Nur weil ein Werkzeug wie animierte GIFs seit Jahrzehnten existiert, heißt das nicht, dass man sich "daran halten" sollte, wenn eine alternative Methode verfügbar ist. Beide Methoden haben ihre eigenen Vor- und Nachteile, und beide Methoden sollten definitiv berücksichtigt werden, wenn diese Entwicklungsentscheidungen bei der Erstellung unserer Apps getroffen werden. Die wichtige Erkenntnis hier ist, die Einschränkungen und die Geräte-/Browserunterstützung dieser neu eingeführten Methode vollständig zu verstehen.
@Chris Coyier, ich will nicht so klingen, als würde ich Partei ergreifen, aber ein GIF kann als Daten-URI kodiert und in das CSS eingefügt werden. Es wäre ungefähr so groß wie ein normales GIF und würde eine zusätzliche HTTP-Anfrage eliminieren. Meiner Meinung nach haben beide Methoden ihre Vorzüge, eine für die Anpassbarkeit und die andere für die Abwärtskompatibilität.
Sehr guter und informativer Artikel!
Fantastischer Artikel Fabrice!
Das ist ein verdammt gutes Tutorial, Fabrice. Wie immer großartige Arbeit. :)
Fabelhaftes Tutorial. Das Codepen-Beispiel nur mit CSS funktioniert in der neuesten Firefox-Version (16.0.2) unter Windows 7 nicht. Haben andere Benutzer das gleiche Problem?
Ja, hier dasselbe. Ich benutze Firefox 17 Beta. Keine Animation, selbst das nicht animierte Element sieht seltsam aus.
Ja. Dasselbe Problem hier. FF 16.0.2 auf Ubuntu.
Ich kann es nur in Webkit-Browsern zum Laufen bringen.
Seltsam. Ich werde es mir ansehen. Danke!
Es funktioniert nicht, weil die Eigenschaften nicht mit Präfixen versehen sind.
@Jonathan Cardoso [JCM]: CodePen funktioniert mit un-präfixierten Eigenschaften. Es könnte einfach sein, dass Animationen in einer CodePen-Einbettung nicht funktionieren.
Firefox scheint background-position-(x|y) nicht zu verstehen. Ich habe es auf Codepen behoben. Ich hoffe, es wird auch im Artikel erwähnt.
Vielen Dank.
Sind die oben genannten Elemente außerhalb des CSS3-Standards? Oder ist es nur FF?
Das funktioniert nicht...
Entschuldigung
Gibt es einen Grund, warum Sie nicht einfach einen Rahmen um die Boxen gesetzt haben, anstatt lineare Verläufe? Wäre es nicht schneller beim Ausführen oder hat es ein Problem mit der Animation?
Ich habe lineare Verläufe verwendet, um nur ein einziges HTML-Element zu verwenden.
@Fabrice: ah ja, das hatte ich nicht bemerkt. Aber ist es im Browser mit Verläufen immer noch schneller als mit mehreren Elementen mit Rahmen? (Ich denke, das kann nur ein Experte beantworten.)
Arbeiten in reinem CSS, anstatt Elemente zum ursprünglichen Markup hinzuzufügen, ist der Standard, den wir meiner Meinung nach anstreben wollen: ein semantischeres Web.
Natürlich kann das Hinzufügen eines "Seitenlade"-Elements aus dieser Perspektive wahrscheinlich als überflüssig betrachtet werden.
Vielleicht haben Sie Recht, dass es einfacher wäre, mehrere Elemente hinzuzufügen, wenn wir ohnehin ein nicht-semantisches (für den Inhalt irrelevantes) Element hinzufügen wollen.
Bei der CSS-Version blenden sich die Rechtecke vollständig aus, während sie im GIF-Bild ausblenden, aber nicht verschwinden. Schauen Sie sich die Rechtecke beim Ausblenden genauer an und vergleichen Sie sie mit dem GIF, dann verstehen Sie, was ich meine.
cooler Effekt, Kumpel!!
Ich kann die Facebook-Animation auf meinem Mac in keinem meiner Browser sehen. Das sind Safari, Firefox, Chrome und Opera, alle aktuellen Versionen
Der einzige Unterschied zwischen dem, was Sie hier haben, und dem, was Mozilla für
CSS-Animation lehrt, ist, dass sie zuerst die Animationszeit im relevanten HTML-Element definieren. Definieren Sie dann die Animationsschritte im @keyframes-Codeblock. Hier ist diese Reihenfolge umgekehrt.
Die Demo hier funktioniert nicht in Firefox (neueste Nightly) und stoppt nach ein paar Sekunden in Webkit (Chrome-aktuell). Anscheinend wird die Anweisung für die "unendliche" Schleife ebenfalls ignoriert. Das könnte aber auch an der Reihenfolge liegen.
Das Codepen funktioniert auch nicht in Firefox, aber in Chrome ohne Stoppen. Das könnte an anderem Code als HTML oder CSS liegen, der Teil der Codepen-App ist.
Immer erstaunlich zu sehen, was Sie produzieren, @Chris Coyier… Wie zum Teufel haben Sie Zeit, das alles aufzuschreiben lol… Sie sind einfach so gut!
Dieser spezielle Artikel war ein Gastbeitrag von Fabrice Weinberg. Ich habe zwar bei der Bearbeitung geholfen!
Super Lob an Fabrice Weinberg und Chris Coyier für diesen prächtigen Beitrag!
In der Vergangenheit gab es ein paar Möglichkeiten, wie ich das tun würde. Eine wäre die Verwendung von JQuery, einfach weil das schnell zu installieren ist, aber ich schätze, es ist tatsächlich ziemlich schwergewichtig. Zwei wäre die Verwendung eines animierten GIFs, und das größte Problem, das ich bei der Verwendung eines GIFs finde, ist seine Unflexibilität. Was ich jetzt benutze, ist ein animiertes SVG, das einzige Problem dabei ist die Unterstützung für ältere Browser und einige mobile Geräte. Ich denke, diese CSS-Methode erfüllt ihren Zweck, also werde ich sie auf ein paar Websites wie http://www.reynoldsdigital.com ausprobieren und sehen, wie es läuft. Liebe, wie leicht diese Methode ist. Tolle Tut.