Erstellen Sie eine ausgefallene Karte mit animiertem Verlaufsrand

In diesem Tutorial führe ich Sie durch die Erstellung eines animierten Verlaufsrahmeneffekts mithilfe benutzerdefinierter CSS-Eigenschaften, der Ihren UI-Komponenten ein dynamisches und auffälliges Aussehen verleihen kann. Am Ende haben Sie eine einfache Karte mit einem animierten Verlaufsrand und verwenden dazu die benutzerdefinierte CSS-@Property.

Wenn Sie mit CSS Custom @property nicht vertraut sind, lesen Sie zuerst diesen Blog.

Grundlegende Kartenstruktur

Wir werden React für dieses Tutorial verwenden, die Basiskarte wird so aussehen

import "./styles.css";

const CardAnimatedBorder = () => {
  return (
    <div className="container">
      <div className="card">This is a card with animated gradient border</div>
    </div>
  );
};

export default CardAnimatedBorder;

Der Karte grundlegende Stile hinzufügen

.container {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  margin: 0 auto;
  padding: 2em;
  width: 300px;
  background: #1c1f2b;
  text-align: center;
  border-radius: 10px;
  color: #ffffff;
  position: relative;
}

Einen einfachen Rahmen erstellen

Bevor wir einen animierten Rahmen mit Farbverlauf erstellen, sehen wir uns an, wie man einen einfachen Rahmen erstellt. Wir werden nicht die CSS-Border-Eigenschaft verwenden, sondern stattdessen die Pseudoelemente ::before und ::after für die Karte verwenden. Eine weitere wichtige Eigenschaft ist hier „inset“, die es uns ermöglicht, die Pseudoelemente innerhalb der Karte zu platzieren. Der Z-Index ist -1, da der Rand unterhalb des Karteninhalts liegen soll.

.card::after,
.card::before {
  content: "";
  position: absolute;
  background: red;
  inset: -4px;
  z-index: -1;
  border-radius: 10px;
}

Unsere Karte sieht jetzt so aus

Hinzufügen der benutzerdefinierten Eigenschaft --angle

Wir werden eine benutzerdefinierte Eigenschaft hinzufügen, um den Winkel des Farbverlaufs zu verfolgen. Wir werden Conic-Gradient verwenden.
Fügen Sie eine benutzerdefinierte Eigenschaft wie diese hinzu

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

und nehmen Sie die folgenden Änderungen am CSS vor

• Ersetzen Sie den Hintergrund durch ein Hintergrundbild, um den Farbverlauf anzuzeigen.
• Fügen Sie einen Animationsdreh für den benutzerdefinierten Eigenschaftswinkel hinzu.
• Der konische Gradient hat den Winkel als erstes Argument und wir werden ihn ändern, um ihn zu animieren.
• Fügen Sie Unschärfe und Deckkraft hinzu, um einen leuchtenden Effekt zu erzielen.

Ihr CSS sollte so aussehen

.container {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card {
  margin: 0 auto;
  padding: 2em;
  width: 300px;
  background: #1c1f2b;
  text-align: center;
  border-radius: 10px;
  color: #ffffff;
  position: relative;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.card::after,
.card::before {
  content: "";
  position: absolute;
  background-image: conic-gradient(
    from var(--angle),
    transparent 70%,
    blue,
    red
  );
  inset: -4px;
  z-index: -1;
  border-radius: 10px;
  animation: 2s spin linear infinite;
}

.card::before {
  filter: blur(1rem);
  opacity: 0.7;
}

@keyframes spin {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}

Und endlich haben wir eine Karte mit animiertem Verlaufsrand.

Demo

Klicken Sie hier

Mehr lesen

• MDN-Dokumente @property

Originalbeitrag

Das obige ist der detaillierte Inhalt vonErstellen Sie eine ausgefallene Karte mit animiertem Verlaufsrand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!