Beispielcode zur Implementierung eines gepunkteten Rahmen-Scrolleffekts mit CSS

<div Klasse="Box">
  <p>Testtest</p>
</div>

.Kasten {
  Breite: 100px;
  Höhe: 100px;
  Position: relativ;
  Hintergrund: URL (upload/2022/web/selection.gif);
  P {
    Position: absolut;
    links: 0;
    oben: 0;
    rechts: 0;
    unten: 0;
    Rand: automatisch;
    Höhe: berechnet (100 % – 2 Pixel);
    Breite: berechnet (100 % – 2 Pixel);
    Hintergrundfarbe: #fff;
  }
}

.Kasten {
  Breite: 100px;
  Höhe: 100px;
  Hintergrund: sich wiederholender linearer Farbverlauf (
    135 Grad,
    transparent,
    transparent 4px,
    #000 4px,
    #000 8px
  );
  Überlauf: versteckt; // Einen neuen BFC erstellen, um das Problem des Randzusammenbruchs in der vertikalen Richtung zu lösen. Animation: 1 Sekunde unendlich linear bewegen.
  P {
    Höhe: berechnet (100 % – 2 Pixel);
    Rand: 1px;
    Hintergrundfarbe: #fff;
  }
}
@keyframes verschieben {
  aus {
    Hintergrundposition: -1px;
  }
  Zu {
    Hintergrundposition: -12px;
  }
}

.Kasten {
  Breite: 100px;
  Höhe: 100px;
  Hintergrund: linearer Farbverlauf (0 Grad, transparent 6px, #e60a0a 6px) Wiederholung-y,
    linearer Farbverlauf (0 Grad, transparent 50 %, #0f0ae8 0) Wiederholung-y,
    linearer Farbverlauf (90 Grad, transparent 50 %, #09f32f 0) repeat-x,
    linearer Farbverlauf (90 Grad, transparent 50 %, #fad648 0) repeat-x;
  Hintergrundgröße: 1px 12px, 1px 12px, 12px 1px, 12px 1px;
  Hintergrundposition: 0 0, 100 % 0, 0 0, 0 100 %;
  Animation: Bewegung2 1s unendlich linear;
  P {
    Rand: 1px;
  }
}
@keyframes verschieben2 {
  aus {
  }
  Zu {
    Hintergrundposition: 0 -12px, 100 % 12px, 12px 0, -12px 100 %;
  }
}

.Kasten {
  Breite: 100px;
  Höhe: 100px;
  Hintergrund: linearer Farbverlauf (0 Grad, #f0e, #fe0);
  -webkit-mask: linearer Farbverlauf (0 Grad, transparent 6px, #e60a0a 6px) Wiederholung-y,
    linearer Farbverlauf (0 Grad, transparent 50 %, #0f0ae8 0) Wiederholung-y,
    linearer Farbverlauf (90 Grad, transparent 50 %, #09f32f 0) repeat-x,
    linearer Farbverlauf (90 Grad, transparent 50 %, #fad648 0) repeat-x,
    linear-gradient(0deg, #fff, #fff) no-repeat; // Sie können hier jede undurchsichtige Farbe verwenden -webkit-mask-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px, 98px 98px;
  -webkit-mask-position: 0 0, 100 % 0, 0 0, 0 100 %, 1px 1px;
  Überlauf: versteckt;
  Animation: Bewegung3 1s unendlich linear;
  P {
    Höhe: berechnet (100 % – 2 Pixel);
    Rand: 1px;
    Hintergrundfarbe: #fff;
  }
}
@keyframes move3 {
  aus {
  }
  Zu {
    -webkit-mask-position: 0 -12px, 100 % 12px, 12px 0, -12px 100 %, 1px 1px;
  }
}