Ksenia Kondrashova hat eine Demo mit einem wunderschönen Shader mit Wassereffekt erstellt. Es sieht realistisch aus, wie Wasser, das sich in einem Schwimmbad bewegt. Es fühlt sich beruhigend und hypnotisch an.
Temani Afif erzeugt erstaunliche Effekte mit einem einzigen Bild-Tag. Das ist ein tolles Beispiel: Ein HTML-Tag erzeugt einen verblüffenden 3D-Effekt … und der Code ist so einfach! Die Demo benötigt kaum 18 Zeilen CSS!
Eine weitere coole Demo mit einem einzelnen Bildelement. Ana Tudor verwendete SVG-Filter, um eine Farbinterpolationsmaske anzuwenden und Bildelemente basierend auf der Farbe hervorzuheben.
Für diese unterhaltsame Demo von Sophia Wood (auch bekannt als Fractal Kitty) benötigen Sie die Lautsprecher. Klicken Sie auf die Tontasten oder drücken Sie die Tasten 1–8, um die Kartoffel zum Sprechen zu bringen ... aber seien Sie vorsichtig, es kann gleichermaßen unterhaltsam und nervig sein.
Eine animierte kreisförmige Galerie, erstellt von Chris Bolson. Fahren Sie mit der Maus über die Bilder und sehen Sie, wie sie animiert werden. Mir gefällt, wie der Titel neben der Fotobewegung angezeigt wird. Glatt.
Eine weitere Demo von Sophia Wood. Sie nutzte P5, um Punkte zu generieren, die unendlich generiert werden. Mit jedem Zyklus werden sie kleiner und geben ein Raumbild frei. Wie immer eine kreative Kombination aus Kunst und Code.
Dies ist eher eine „nerdige“ Barrierefreiheitsdemo: ein Raster mit allen CSS-Farbnamen und ihrer Farbkontrastkombination. Dave Rupert verwendete die WCAG 2.1-Spezifikation, um die Ergebnisse zu ermitteln.
Chris Coyier repliziert dieses ikonische Zeichen und wendet scrollgesteuerte Animationen an, um alle Zeilen dazu zu bringen, ihre Schriftart dynamisch anzupassen (der Text ist bearbeitbar), sodass alle Zeilen die gleiche Breite einnehmen. Da die Eigenschaft „animation-range“ verwendet wird, funktioniert diese Demo nur auf Chrome.
Paul Noble erstellt einen atemberaubenden Kartenstapel, der scrollgesteuerte Animationen mit Scroll-Snap-Ereignissen kombiniert. Sie müssen ein Trackpad verwenden (diese Demo funktioniert nicht mit einer Maus), um die schönen Übergänge genießen zu können.
Eine weitere Demo von Ana Tudor. Der Code ist sauber, kurz und semantisch. Mir gefiel das Design dieser Komponente (aus einer Reddit-Frage?) und ich könnte mir vorstellen, in einigen Projekten etwas Ähnliches zu verwenden.
Wenn Ihnen diese Liste gefallen hat, schauen Sie sich die Demos des letzten Monats an!
Das obige ist der detaillierte Inhalt vonCoole CodePen-Demos (4. Oktober). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
