Wie erstelle ich mit CSS eine Hintergrundfarbfüllung von links nach rechts beim Schweben?

Erzielen einer Hintergrundfarbfüllung von links nach rechts beim Schweben mit CSS

So erzielen Sie eine Hintergrundfarbfüllung von links nach rechts beim Schweben Verwenden Sie über einem Element einen linearen Gradienten und Übergang. Beginnen Sie mit der Konfiguration eines linearen Farbverlaufs mit zwei Farben, beispielsweise Rot und Blau, bei der 50 %-Marke. Stellen Sie dann den Farbverlauf so ein, dass er rechts positioniert wird, und verdoppeln Sie die Größe des Elements im Verhältnis zu seiner Breite und Höhe (z. B. 200 %).

Wenn Sie mit der Maus über das Element fahren, ändern Sie die Hintergrundposition auf "links". Integrieren Sie „Übergang: alle 2er erleichtern;“ um einen reibungslosen Übergang anzuwenden.

Für Browser, die Herstellerpräfixe erfordern, lesen Sie die Kommentare unter der ersten Frage.

Zusätzliche Anpassung

Um eine zu erstellen Farbübergang, erhöhen Sie die Verlaufsbreite auf 300 % und passen Sie die Start- (z. B. 34 %) und Endpositionen (z. B. 65 %) entsprechend an.

Beispiel:

<code class="css">div {
  font: 22px Arial;
  display: inline-block;
  padding: 1em 2em;
  text-align: center;
  color: white;
  background: red; /* default color */

  /* Linear gradient and initial position */
  background: linear-gradient(to left, salmon 50%, lightblue 50%) right;
  background-size: 200%;
  transition: .5s ease-out;
}
div:hover {
  background-position: left;
}</code>

HTML:

<code class="html"><div>Hover me</div></code>

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS eine Hintergrundfarbfüllung von links nach rechts beim Schweben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!