Heim > Artikel > Web-Frontend > Wie erstelle ich mit CSS mehrere Übergänge für ein Element?

Wie erstelle ich mit CSS mehrere Übergänge für ein Element?

王林nach vorne: 2023-08-26 13:37:02956Durchsuche

如何使用 CSS 在一个元素上创建多个过渡？

Das Erstellen mehrerer Übergänge für Elemente mithilfe von CSS ist eine großartige Möglichkeit, Ihrer Website mehr Interesse und Interaktivität zu verleihen. Durch die Integration verschiedener Übergänge können wir unseren Benutzern ein dynamisches und ansprechendes Erlebnis bieten. In diesem Artikel behandeln wir die Grundlagen zum Erstellen mehrerer Übergänge für ein Element mithilfe von CSS.

Cascading Style Sheets (CSS) sind ein leistungsstarkes Tool zum Gestalten von Webseiten. Eine der nützlichsten Funktionen ist die Möglichkeit, sanfte und optisch ansprechende Übergänge zwischen verschiedenen Zuständen eines Elements zu erstellen, beispielsweise wenn der Mauszeiger darüber bewegt oder darauf geklickt wird.

Was sind CSS-Transformationen?

Bevor wir lernen, wie man mehrere Übergänge erstellt, wollen wir zunächst verstehen, was CSS-Übergänge sind. Ein Übergang ist ein allmählicher Wechsel zwischen zwei Zuständen eines Elements. Wenn wir beispielsweise mit der Maus über eine Schaltfläche fahren, ändert sich die Hintergrundfarbe allmählich von einer Farbe zur anderen. Mit CSS können wir die Dauer und den Zeitpunkt dieser Übergänge sowie die zu transformierenden Eigenschaften festlegen.

Grammatik

css-selector{
   transition: property duration timing-function delay;
}

Übergangseigenschaften in CSS

Zu den Übergangseigenschaften, die wir in CSS verwenden können, gehören:

transition-property – Diese Eigenschaft gibt an, welche CSS-Eigenschaften transformiert werden sollen.
transition-duration – Diese Eigenschaft gibt die Dauer des Übergangs in Sekunden oder Millisekunden an. Standardmäßig ist die Übergangsdauer 0, was bedeutet, dass kein Übergangseffekt angewendet wird.
transition-timing-function – Diese Eigenschaft steuert die Geschwindigkeit und den Zeitpunkt des Übergangs.
transition-delay – Diese Eigenschaft gibt die Verzögerung an, bevor der Übergang beginnt.

Erstellen Sie grundlegende Transformationen

Um einen Übergang zu erstellen, müssen wir die Eigenschaften angeben, die wir animieren möchten, z. B. die Dauer des Übergangs, die Zeitfunktion und etwaige Verzögerungen. Um beispielsweise einen Übergang für die Breite einer Schaltfläche zu erstellen, können wir hierfür den folgenden Code verwenden –

button {
   transition: width 0.5s ease-in-out;
}

Der obige Code gibt an, dass sich die Breite der Schaltfläche über einen Zeitraum von 0,5 Sekunden ändert, indem eine Zeitfunktion zum einfachen Ein- und Ausfahren verwendet wird.

Erstellen Sie mehrere Übergänge

Um mehrere Übergänge für ein Element zu erstellen, müssen wir dem CSS-Code zusätzliche Übergänge hinzufügen. Um beispielsweise eine Schaltfläche zu erstellen, die sowohl die Eigenschaften Breite als auch Hintergrundfarbe umwandelt, können wir hierfür den folgenden Code verwenden –

button {
   transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;
}

Der obige Code gibt an, dass die Breite und die Hintergrundfarbe der Schaltfläche über einen Zeitraum von 0,5 Sekunden mithilfe einer Easy-In-Out-Timing-Funktion geändert werden.

Hier finden Sie einige vollständige Codebeispiele zum Erstellen mehrerer Übergänge für ein Element mithilfe von CSS -

Beispiel 1

In diesem Beispiel erstellen wir eine Schaltfläche mit den Eigenschaften „Umschaltbreite“ und „Hintergrundfarbe“. Wir werden jedoch für jeden Übergang eine unterschiedliche Dauer verwenden, um einen gestaffelten Effekt zu erzielen.

<html>
<head>
   <style>
      body{
         text-align: center;
      }
      button {
         margin: auto;
         width: 100px;
         height: 50px;
         background-color: green;
         border: none;
         color: #fff;
         font-size: 16px;
         padding: 10px 20px;
         transition: width 0.5s ease-in, background-color 1s ease-out;
      }
      button:hover {
         width: 150px;
         background-color: red;
      }
   </style>
</head>
   <body>
      <h3>Multiple Transitions with Different Durations</h3>
      <button>Hover Me</button>
   </body>
</html>

Im obigen Beispiel haben wir eine Breite von 100px und eine grüne Hintergrundfarbe für den Button festgelegt. Anschließend legen wir die Übergangseigenschaften fest, um die Eigenschaften „Breite“ und „Hintergrundfarbe“ zu ändern. Wir verwenden jedoch eine Dauer von 0,5 Sekunden für den Breitenübergang und 1 Sekunde für den Hintergrundfarbübergang. Dadurch entsteht ein gestaffelter Effekt, bei dem sich die Schaltflächenbreite schneller ändert als die Hintergrundfarbe. Wenn sich die Maus über der Schaltfläche befindet, wird die Breite auf 150 Pixel erweitert und die Hintergrundfarbe ändert sich in Rot.

Beispiel 2

In diesem Beispiel erstellen wir ein Feld, das sowohl die Hintergrundfarbe als auch die Eigenschaften des Rahmenradius umwandelt. Wir werden jedoch eine Verzögerung für den Grenzradiusübergang verwenden.

<html>
<head>
   <style>
      body{
         text-align: center;
      }
      .box {
         margin: auto;
         width: 200px;
         height: 200px;
         background-color: red;
         border-radius: 50%;
         transition: background-color 0.5s ease-in-out, border-radius
         0.5s ease-in-out 0.5s;
      }
      .box:hover {
         background-color: blue;
         border-radius: 0;
      }
   </style>
</head>
   <body>
      <h3>Multiple Transitions with Delays</h3>
      <div> Hover over the below circle to see multiple transitions</div>
      <div class="box"></div>
   </body>
</html>

Im obigen Beispiel stellen wir die Breite und Höhe der Box auf 200 Pixel und die Hintergrundfarbe auf Rot ein. Anschließend legen wir Übergangseigenschaften fest, um die Eigenschaften Hintergrundfarbe und Randradius zu übergehen. Wir verwenden jedoch eine Verzögerung von 0,5 Sekunden für den Grenzradiusübergang. Das bedeutet, dass die Hintergrundfarbe sofort wechselt, während der Randradius 0,5 Sekunden wartet, bevor er wechselt. Wenn Sie mit der Maus über das Feld fahren, ändert sich die Hintergrundfarbe zu Blau und der Randradius wird zu 0, wodurch ein Quadrat entsteht.

Beispiel 3

Hier erstellen wir eine Schaltfläche, die die Breiten- und Farbeigenschaften ändern kann. Wir werden jedoch für jeden Übergang unterschiedliche Timing-Funktionen verwenden, um einzigartige Effekte zu erzeugen.

<html>
<head>
   <style>
      body{
         text-align: center;
      }
      button {
         margin: auto;
         width: 120px;
         height: 60px;
         background-color: blue;
         border: none;
         color: red;
         font-size: 18px;
         padding: 10px 20px;
         transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
         color 1s ease-in-out;
      }
      button:hover {
         width: 180px;
         color: #fff;
      }
   </style>
</head>
   <body>
      <h3>Multiple Transitions with Different Timing Functions</h3>
      <button>Hover Me</button>
   </body>
</html>

Im obigen Beispiel legen wir die Breite der Schaltfläche auf 120 Pixel, die Hintergrundfarbe auf Blau fest und legen dann die Übergangseigenschaften fest, um die Breiten- und Farbeigenschaften zu ändern. Wir verwenden jedoch für jeden Übergang eine andere Timing-Funktion. Der Breitenübergang verwendet eine benutzerdefinierte kubische Bezier-Funktion. Wenn sich die Maus über der Schaltfläche befindet, vergrößert sich die Breite auf 180 Pixel und die Textfarbe ändert sich von Rot zu Weiß.

Fazit

CSS-Übergänge sind ein leistungsstarkes Werkzeug zum Erstellen reibungsloser und optisch ansprechender Effekte auf Webseiten. Durch die Verwendung von Übergangseigenschaften können wir die Dauer, die Zeitfunktion und die Eigenschaften des Übergangs angeben. Wir können auch mehrere Übergänge für ein Element erstellen, indem wir im Übergangsattribut mehrere Eigenschaften angeben.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS mehrere Übergänge für ein Element?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：CSS-Pause-EigenschaftNächster Artikel：CSS-Pause-Eigenschaft

In Verbindung stehende Artikel

Mehr sehen