CSS 3D-Effekt: Balken, die sich um Logo drehen

[Helmut]

Hallo,

ich würde gerne einen Effekt bauen, wo sich farbige Balken um ein Logo herum bewegen, d.h. der Balken laufen vor dem Logo nach oben und hinter dem Logo nach unten. Damit der Effekt wirkt, soll das Laufen am oberen und unteren Ende verzögert sein und bei mehreren Balken ein "Nachzieheffekt" entstehen.

Ich hab dafür mal ein Fiddle erstellt: Beispiel

An und für sich funktioniert es schon ganz ok, aber der Effekt is noch nicht so schön, weil sich auch der z-index der einzelnen Balken untereinander verändern müsste. Ich weiß aber nicht, wie ich das noch steuern könnte.

Oder gehe ich das komplett falsch an? Vielleicht habt ihr noch eine Idee?

Euer Helmut

[Felix Riesterer]

Lieber Helmut,

Ich hab dafür mal ein Fiddle erstellt: Beispiel

die Intros vor den gecrackten C64-Spielen... ah, gute alte Zeiten! [EDIT]Beispiel[/EDIT]

Liebe Grüße

Felix Riesterer

[Matthias Scharwies]

Servus!

Ich hab dafür mal ein Fiddle erstellt: Beispiel

An und für sich funktioniert es schon ganz ok,

finde ich auch!

Du könntest background: linear-gradient(180deg, rgba(8,8,8,1) 0%, var(--color) 50%, rgba(11,11,11,1) 100%); vereinfachen, indem du analog zu --i den Farbwert als custom property einsetzt. Dann wären die Klassen überfüssig.

Evtl. könntest du anstelle der z-index eine 3d-Transformation um das Logo herumführen und hättest da einen besseren optischen Effekt.

• CSS/Tutorials/Transform/3D-Transforms

Grad geschaut: mix-blend-mode ist leider nicht animierbar

• CSS/Tutorials/Vermischen_mit_Blend-Modes

Herzliche Grüße

Matthias Scharwies

[Der Martin]

Hallo,

Ich hab dafür mal ein Fiddle erstellt: Beispiel

das sieht schon cool aus. 😀
Um es perfekt zu machen, müsste man (außer dem fehlenden Überdecken) auch noch die Größe des Balkens animieren. Denn wenn der Effekt entstehen soll, dass er um das Logo herumkreist, ändert sich ja auch die Entfernung zum Beobachter andauernd.

May the Schwartz be with you
 Martin