Wie bindet man solche bunten Hinterlegungen ein?

1 Antwort

Vom Beitragsersteller als hilfreich ausgezeichnet

Die Website nutzt dafür folgendes CSS (Redundanzen entfernt)

a:hover, a:active {
    background: linear-gradient(to right, rgba(38, 56, 255, 1) 0%, rgba(94, 37, 168, 1) 11%, rgba(142, 42, 214, 1) 21%, rgba(171, 206, 191, 1) 35%, rgba(203, 250, 190, 1) 44%, rgba(172, 252, 153, 1) 54%, rgba(125, 242, 127, 1) 63%, rgba(114, 224, 173, 1) 70%, rgba(111, 201, 217, 1) 82%, rgba(38, 56, 255, 1) 100%);
    background-attachment: fixed;
    background-position: 0 0;
    background-size: 1000px 1px;
    animation-name: link-bg-anim;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes link-bg-anim {
  from {
    background-position-x: 0px;
  }
  to {
    background-position-x: 1000px;
  }
}

Siehe:

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient

https://developer.mozilla.org/en-US/docs/Web/CSS/animation

Woher ich das weiß:eigene Erfahrung – Langjähriger Poweruser & praktische Programmiererfahrung