Was ist ein Border-Beam-Effekt?

Beim Border-Beam-Effekt wandert ein farbiger Lichtschweif entlang des Rahmens eines Elements. Der Inhalt im Container bleibt dabei ruhig, während sich nur der Verlauf am Rand bewegt. Das lässt sich mit GenerateBlocks und wenigen CSS-Regeln umsetzen – ohne zusätzliches Animations-Plugin.

Gib dem betreffenden Container die Klasse border-beam. Stelle im Block-Editor Innenabstand, Rahmenbreite und abgerundete Ecken ein. Eine transparente Rahmenfarbe lässt den animierten Verlauf sichtbar werden. Passe die CSS-Farbwerte an die globalen Farben deines Designs an.

CSS einfügen und anpassen

Examples by Greenshift: https://greenlightdemo.instawp.xyz/ & https://greenshift.wpsoul.net/who-we-are-section-greenlight/. Alternative tutorial: https://ibelick.com/blog/create-animated-gradient-borders-with-css

Implementation: A (multi-)colored element rotating conically via CSS is added inside a container, which is visible only along the container’s border.

Container

BLOCK EDITOR:

Define padding, border & border-radius of container.
Set border colour to transparent or semi transparent.
Add any content inside the container.

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

/* The beam-bg value = container-background-colour */

.border-beam {
  --border-angle: 0turn;
  --beam-bg: var(--accent-yellow);

/* The following variable values represent the fixed colors, while the values at 40% and 60% respectively correspond to the color values of the tail. */

  background:
    linear-gradient(var(--beam-bg), var(--beam-bg)) padding-box,
    conic-gradient(
      from var(--border-angle),
      var(--accent-green) 0%,
      var(--accent-green) 20%,
      #ff0000 40%,
      #ffcc00 60%,
      var(--accent-green) 80%,
      var(--accent-green) 100%
    ) border-box;

  animation: border-beam-spin 3s linear infinite;
}

/* This is to stop the animation on hover */

.border-beam:hover {
  animation-play-state: paused;
}

@keyframes border-beam-spin {
  to {
    --border-angle: 1turn;
  }
}