Wie kann ich in CSS einen radialen Farbverlaufsglanzeffekt von links nach rechts animieren?

Radiale Verläufe mit CSS animieren

Problem:

Sie möchten einen radialen Verlauf erstellen. Erstellen Sie einen Farbverlaufs-"Glanz"-Effekt auf einem Div und sorgen Sie dafür, dass sich die weiße Hervorhebung sanft von links nach links bewegt richtig.

Lösung:

1. Doppelte Verlaufsgröße und 50 % Farbstopps:

   Erstellen ein radialer Gradient, der doppelt so groß ist wie der div. Stellen Sie die Farbstopps auf die Hälfte ihrer ursprünglichen Werte ein (z. B. 4 % statt 8 % usw.). Dadurch wird sichergestellt, dass das visuelle Erscheinungsbild gleich bleibt.

2. Verlaufsposition animieren:

   Verwenden Sie eine Keyframe-Animation, um die Eigenschaft „Hintergrundposition“ zu manipulieren. Beginnen Sie mit dem oben rechts positionierten Farbverlauf und animieren Sie ihn nach oben links. Wenn Sie die Animation auf „Abwechseln“ einstellen, wird die Richtung umgekehrt.

Beispielcode:

#shine-div {
  height: 30vh;
  width: 60vw;
  margin: auto;
  border-radius: 10px;
  background: radial-gradient(farthest-corner at top,
    #FFFFFF 0%, #ffb3ff 4%, #ff33ff 12.25%,
    #800080 31.25%, #b300b3 50%) top right/200% 200%;
  animation: colorChange 5s infinite alternate;
}

@keyframes colorChange {
  to {
    background-position: top left;
  }
}

Hinweis: Aufgrund der Berechnung der äußersten Ecke entspricht der Farbverlauf möglicherweise nicht genau der ursprünglichen Definition.

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS einen radialen Farbverlaufsglanzeffekt von links nach rechts animieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!