CSS3 verwendet Animationsattribute, um den Effekt eines dynamischen Hintergrundfarbverlaufs zu erzielen (Code im Anhang).

Wenn die Hintergrundfarbe der Website relativ einfarbig ist, sieht sie nicht schön genug aus. Wie kann man also die Hintergrundfarbe ändern? In diesem Artikel erfahren Sie, wie Sie mithilfe von CSS3-Animationen die Hintergrundfarbe schrittweise ändern, die Kombination von Farbe und Reihenfolge anpassen und das Farbdesign auffälliger gestalten.

Werfen wir ohne weiteres einen Blick auf den konkreten Inhalt (empfohlener Kurs: CSS3-Video-Tutorial)

Werfen wir zunächst einen Blick auf CSS3-Keyframe-Animation Die Grundlagen

Beginnen wir mit Animationen, die nach und nach Elemente ändern! In den Animationseigenschaften von CSS 3 können Sie Keyframes festlegen und detaillierte Bewegungen zeichnen. Bezüglich der Zeit und des Timings von Animationen und Endlosschleifen kann nur CSS angegeben werden!

Was sind Keyframes?

Keyframes (Passpunkte) sind Frames, die Änderungen in der Animation definieren. Wir @keyframes definieren, wie sich das Element mit jedem Keyframe ändert. Damit eine Animation mit ihren Keyframes übereinstimmt, müssen Sie den Namen der @keyframes-Regel mit dem Namen des für das Element angegebenen Attributs „animation-name“ abgleichen.

Der Name der @keyframes-Regel wird als „ @keyframes + beliebiger Name“ deklariert. Ich schreibe Keyframe-Informationen von 0 % bis 100 %. 0 % gibt den Start der Animation an, 100 % gibt die Endzeit an. 0 % von, 100 % kann durch bis ersetzt werden. Das folgende Beispiel ist ein Schlüsselbild, das die Hintergrundfarbe von Rot über Orange zu Rosa ändert.

@keyframes name {
  0% { background: red; }
  50% { background: orange; }
  100% { background: pink; }
}

Hinweis: Für WebKit-Browser wie Chrome und Safari ist das Herstellerpräfix (-webkit-) erforderlich. Schreiben Sie „ -webkit-keyframes“ wie geschrieben und schreiben Sie „-webkit-“ zwischen @ und dem Keyframe.

Animationsbezogene Attribute

Animationsname (Animationsname)

Der in der @keyframes-Spezifikation definierte Name. Wenn dies nicht angegeben ist, wird keine Animation ausgeführt. Wenn der angegebene Animationsname außerdem mit keinem Keyframe übereinstimmt, wird der Keyframe nicht ausgeführt.

animation-duration (Animationsdauer)

Geben Sie die Zeitspanne für die Ausführung einer Animation in „Sekunden + s“ an. „5 Sekunden“ dauert beispielsweise 5 Sekunden. Wenn 0, wird es nicht ausgeführt. Auch wenn ein negativer Wert angegeben wird, wird dieser als 0 behandelt.

animation-timing-function (Animations-Timing-Funktion)

Geben Sie das Timing der Animation und die Fortsetzung an. Sie können flüssige Bewegungen ausdrücken, indem Sie die Fortschrittsgeschwindigkeit der Animation skalieren.

ease (Anfangswert)

ease-in

ease-out

ease-in-out

linear

Animationsverzögerung (Animationsverzögerung)

Geben Sie beim Lesen eines Elements die „Animationsstart“-Zeit aus „Elementnummer + s“ an. „5 Sekunden“ dauert beispielsweise 5 Sekunden. Ein Anfangswert von 0 wird sofort ausgeführt.

animation-iteration-count (Animationsiterationsanzahl)

Gibt mithilfe einer Zahl an, wie oft die Animation wiederholt werden soll. Um eine Endlosschleife anzugeben, geben Sie „unendlich“ an.

animation-direction

Gibt die Richtung der sich wiederholenden Animation an.

normal ...spielt in normaler Richtung (Anfangswert)

alternate ...erzeugt ungerade Zeiten in entgegengesetzter Richtung zu normalen und geraden Zeiten (Rück- und Rücklauf...)

reverse...rückwärts abspielen

alternate-reverse...rückwärts abspielen

animation-play-state (Animationsabspielzustand)

Geben Sie die angehaltene (paused) und abgespielte (running) Animation an. Es scheint jedoch nicht viel genutzt zu werden.

animation-fill-mode (Animationsfüllmodus)

Gibt den Zustand vor und nach dem Abspielen der Animation an.

keine (Standard)

vorwärts. Behalten Sie den Status des letzten Keyframes nach der Wiedergabe bei

rückwärts...Übernehmen Sie den Status des ersten Keyframes vor der Wiedergabe

beide … vorwärts ...gilt sowohl vorwärts als auch rückwärts

Eigenschaftsübersicht

Mit der Animationseigenschaft können Sie jeden einzelnen Attributwert getrennt durch angeben Räume. Das Element kann weggelassen werden, der Animationsname muss jedoch vor der Ausführung geschrieben werden. Es wird empfohlen, sie in der folgenden Reihenfolge aufzulisten.

animation-name (Animationsname)

animation-duration (Animationsdauer)

animation-timing-function (Animations-Timing-Funktion)

animation - Verzögerung (Animationsverzögerung)

animation-iteration-count (Animationsiterationsanzahl)

animation-direction (Animationsrichtung)

animation-fill-mode (Animationsfüllmodus) )

animation-play-state (Animationswiedergabestatus)

body {
  animation: test 5s ease 1s infinite forwards;
}

Werfen wir einen Blick auf den spezifischen Inhalt der Hintergrundfarbänderung

Nachdem wir das Grundwissen verstanden haben, werfen wir einen detaillierten Blick auf die spezifischen Implementierungsmethoden. Legen Sie zunächst den Namen des Keyframes auf „bg – color“ fest und stellen Sie die Hintergrundfarbe auf den Übergang von 0 bis 100 % ein. Wenn Sie dieselbe Farbe auf 0 % und 100 % einstellen, bewegt sie sich beim Schleifen der Animation reibungslos. Wir beschreiben auch die Version, die Sie für Webkit-basierte Browser aktivieren.

@-webkit-keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}
@keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}

Da zu diesem Zeitpunkt die Hintergrundfarbe der gesamten Webseite angegeben ist, wird der Körper mit Animationsattributen angegeben. Die Werte sind „Keyframe-Name“, bg-color „change“ wird in 10 Sekunden hinzugefügt, „,10s“ gibt eine Endlosschleife an. Vergessen Sie nicht die Webkit-Version. Mit der Hintergrundfarbe können wir eine Grundhintergrundfarbe als Hintergrundfarbe festlegen und uns so auf Situationen vorbereiten, in denen die Animation nicht funktioniert.

body {
  background-color: #e74c3c;
  animation: bg-color 10s infinite;
  -webkit-animation: bg-color 10s infinite;
}

Der vollständige Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	body {
  background-color: #e74c3c;
  animation: bg-color 10s infinite;
  -webkit-animation: bg-color 10s infinite;
}
@-webkit-keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}
@keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}
p {
  font-family: Meiryo, "Hiragino Kaku Gothic Pro W3",sans-serif;
  text-align: center;
  margin-top: 150px;
  color: #fff;
}
</style>
</head>
<body>
<p>php中文网</p>
</body>
</html>

效果如下：

Das obige ist der detaillierte Inhalt vonCSS3 verwendet Animationsattribute, um den Effekt eines dynamischen Hintergrundfarbverlaufs zu erzielen (Code im Anhang).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!