Benutzerdefinierte CSS-Animationsfarbe: Nehmen Sie als Beispiel LDS-Ripple

In diesem Artikel erfahren Sie, wie Sie die Farben von CSS-Ladeanimationen wie lds-ripple anpassen. Der Kern besteht darin, den visuellen Darstellungsmechanismus der Animation zu verstehen und den Wert des Randattributs in den .lds-ripple div-Stilregeln gezielt zu ändern, anstatt das Farbattribut zu missbrauchen, um die Farbanpassung des Loader-Ring-Effekts einfach zu realisieren.

Verstehen Sie die Zusammensetzung und den Farbmechanismus der CSS-Ladeanimation

In der Webentwicklung wird häufig eine CSS-Ladeanimation (Preloader) verwendet, um die Benutzererfahrung zu verbessern und Benutzer darüber zu informieren, dass Inhalte geladen werden. Die visuellen Effekte vieler solcher Animationen, insbesondere solcher, die aus Kreisen oder Linien bestehen, werden nicht über die Farbeigenschaft gesteuert, sondern nutzen geschickt die Rahmen- oder Hintergrundeigenschaften des Elements.

Nehmen Sie als Beispiel die übliche LDS-Ripple-Ladeanimation, die den Ripple-Effekt durch zwei kreisförmige Ränder simuliert, die kontinuierlich erweitert und ausgeblendet werden. Wenn Sie versuchen, seine Farbe zu ändern, könnten Sie intuitiv versuchen, das Farbattribut zu ändern, aber da der animierte Ring von lds-ripple durch das Randattribut des div-Elements gerendert wird, funktioniert das Farbattribut (das hauptsächlich die Textfarbe beeinflusst) nicht. Um die Farbe dieser Ringe zu ändern, müssen Sie daher die genaue Randeigenschaft ändern, die diese Ringe generiert.

Kernmodifikation: Randattribute lokalisieren und anpassen

Um die Farbe für die lds-ripple-Ladeanimation festzulegen, müssen Sie die CSS-Regel finden, die den kreisförmigen Rand definiert, und den Wert für die Randfarbe darin ändern.

In der CSS-Definition von lds-ripple ist der .lds-ripple-Div-Selektor für die Definition des Grundstils jedes animierten Rings, einschließlich seines Randes, verantwortlich. Der Originalcode legt normalerweise eine Standardrahmenfarbe fest, z. B. border: 4px solid #fff;. Das #fff (weiß) ist hier die Farbquelle des Rings.

Änderungsschritte:

1. Suchen Sie in Ihrem CSS-Stylesheet nach der Regel, die das .lds-ripple-Div definiert.
2. Ändern Sie den Wert des Rahmenattributs in dieser Regel in die gewünschte Farbe. Wenn Sie beispielsweise möchten, dass der Loader rot angezeigt wird, können Sie #fff durch rot, #FF0000 oder rgb(255, 0, 0) ersetzen.

Beispielcode

Hier ist ein vollständiges HTML-, CSS- und JavaScript-Beispiel inklusive Farbänderung:

 

<kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Angepasste CSS-Ladeanimationsfarbe</title>
<stil>
/* Stil des gesamten Loader-Containers */
#loader {
  Anzeige: keine; /* standardmäßig ausgeblendet */
  rechtfertigen-Inhalt: Mitte;
  align-items: center;
  Breite: 100 %;
  Höhe: 100 %;
  Rand: grüner Vollton 1 Pixel; /* Beispielrahmen, unabhängig von der Loader-Farbe*/
  Deckkraft:0,9;
  Hintergrundfarbe:weißer Rauch;
  Position:absolut;
  links:0;
  oben:0;
  Z-Index: 9999; /* Stellen Sie sicher, dass der Lader oben ist*/
 }

/* LDS-Ripple-Animationscontainerstil*/
.lds-ripple {
  Anzeige: Inline-Block;
  Position: relativ;
  Breite: 80px;
  Höhe: 80px;
}

/* Der Stil jedes div-Elements, aus dem die Animation besteht*/
.lds-ripple div {
  Position: absolut;
  /* Schlüsseländerung: Rahmenfarbe von #fff in gewünschte_Farbe ändern */
  Rand: 4 Pixel durchgehend rot; /* Hier die Loader-Farbe auf Rot setzen*/
  Deckkraft: 1;
  Randradius: 50 %;
  Animation: lds-ripple 1s kubisch-bezier(0, 0,2, 0,8, 1) unendlich;
 }

/* Verzögerung des zweiten animierten Div, wird verwendet, um einen gestaffelten Effekt zu erzeugen*/
.lds-ripple div:nth-child(2) {
  Animationsverzögerung: -0,5 s;
}

/*Animations-Keyframe-Definition*/
@keyframes lds-ripple {
  0 % {
    oben: 36px;
    links: 36px;
    Breite: 0;
    Höhe: 0;
    Deckkraft: 0;
  }
  4,9 % {
    oben: 36px;
    links: 36px;
    Breite: 0;
    Höhe: 0;
    Deckkraft: 0;
  }
  5 % {
    oben: 36px;
    links: 36px;
    Breite: 0;
    Höhe: 0;
    Deckkraft: 1;
  }
  100 % {
    oben: 0px;
    links: 0px;
    Breite: 72px;
    Höhe: 72px;
    Deckkraft: 0;
  }
}


<k>

<button id="btnShow" onclick="showLoader()">Loader anzeigen</button>

<div id="loader">
  <div class="lds-ripple">
    <div></div>
    <div></div>
  </div>
</div>

<skript>
Funktion showLoader() {
  document.getElementById("loader").style.display = "flex";
  //Loader nach simuliertem Laden ausblenden setTimeout(() => {
    // document.getElementById("loader").style.display = "none";
  }, 3000);
}


</skript></k></stil></kopf>

Das obige ist der detaillierte Inhalt vonBenutzerdefinierte CSS-Animationsfarbe: Nehmen Sie als Beispiel LDS-Ripple. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!