Wix CSS – Holografischer Schimmereffekt

.css-tutorial {

Hintergrund: linearer Farbverlauf (45 Grad, #ff6ec7, #ff9a56, #ffcd3c, #a8e6cf, #88d8c0, #c7ceea, #ff6ec7);

Hintergrundgröße: 400 % 400 %;

Hintergrundclip: Text;

-webkit-background-clip: Text;

-webkit-text-fill-color: transparent;

Farbe: transparent;

Animation: holographicShimmer 3s, unendliches Ein- und Ausblenden;

Position: relativ;

}

.css-tutorial::before {

Inhalt: attr(Datentext);

Position: absolut;

oben: 0;

links: 0;

Hintergrund: linearer Farbverlauf (45 Grad, #ff6ec7, #ff9a56, #ffcd3c, #a8e6cf, #88d8c0, #c7ceea, #ff6ec7);

Hintergrundgröße: 400 % 400 %;

Hintergrundclip: Text;

-webkit-background-clip: Text;

-webkit-text-fill-color: transparent;

Farbe: transparent;

Animation: holographicShimmer 3s, unendlicher Rückwärtsgang;

Filter: Unschärfe (1px);

Deckkraft: 0,7;

}

@keyframes holographicShimmer {

0%, 100% {

Hintergrundposition: 0 % 50 %;

Filter: Farbton-Drehung (0 Grad);

}

25 % {

Hintergrundposition: 50 % 100 %;

Filter: Farbton-Drehung (90 Grad);

}

50 % {

Hintergrundposition: 100 % 50 %;

Filter: Farbton-Drehung (180 Grad);

}

75 % {

Hintergrundposition: 50 % 0 %;

Filter: Farbton-Drehung (270 Grad);

}

}