Wie erreicht man mithilfe von CSS-Übergängen eine zentrierte Erweiterung für ein DIV-Element?

Erweitern eines DIV von seiner Mitte aus mit CSS

In dieser Frage wollen wir einen Effekt erzeugen, bei dem ein Div von seiner Mitte aus erweitert wird. anstelle der typischen Erweiterung von der oberen linken Ecke. Obwohl CSS-Transformationen wie „scale()“ diesen Effekt erzielen können, mangelt es ihnen an Pixelgenauigkeit und sie haben keinen Einfluss auf das umgebende Layout.

Der Schlüssel zum Erreichen dieses Verhaltens liegt im Übergang des Randes. Durch die Berechnung eines bestimmten Randwerts können wir dafür sorgen, dass das Div von der Mitte aus erweitert wird, ohne den Dokumentenfluss zu beeinträchtigen.

Optionen für die zentrale Erweiterung

Option 1 : Erweiterung innerhalb des reservierten Bereichs

<code class="css">#square {
  margin: 100px;
  transition: width 1s, height 1s, margin 1s;
}
#square:hover {
  width: 100px;
  height: 100px;
  margin: 55px;
}</code>

Bei dieser Option wird das Div innerhalb eines vorreservierten Bereichs um es herum erweitert. Der Randübergang wird als anfänglicher Rand minus der Hälfte der Breiten-/Höhenänderung berechnet.

Option 2: Erweiterung über umgebende Elemente

<code class="css">#square {
  margin: 0;
  transition: width 1s, height 1s, margin 1s;
}
#square:hover {
  width: 110px;
  height: 110px;
  margin: -50px;
}</code>

Mit dieser Option Das Div wird über alle umgebenden Elemente erweitert. Der Randübergang wird als 0 minus der Hälfte der Breiten-/Höhenänderung berechnet.

Option 3: Erweiterung über und Verschieben anderer Elemente

<code class="css">#square {
  position: relative;
  transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}
#square:hover {
  width: 110px;
  height: 110px;
  top: -50px;
  left: -50px;
  margin-right: -50px;
  margin-bottom: -50px;
}</code>

Diese Option ermöglicht die div, um vorangehende Elemente im Fluss zu erweitern und gleichzeitig nachfolgende Elemente zu verschieben. Die Randübergänge werden ähnlich wie bei den vorherigen Optionen berechnet.

Überlegungen zu nichtquadratischen DIVs

Die oben genannten Optionen gehen von einem quadratischen Div aus, können aber auch darauf angewendet werden nichtquadratische Divs mit geringfügigen Anpassungen der Margenberechnungen. Beispielsweise kann ein Rechteck mit ungleicher Breite und Höhe mithilfe von Rändern wie folgt übergegangen werden:

<code class="css">margin: -50px -100px;</code>

Zusammenfassend lässt sich sagen, dass es durch Bearbeiten des Rands mithilfe von CSS-Übergängen möglich ist, ein Div zu erstellen, das sich von seiner Mitte aus erweitert. Beeinflussen Sie das umgebende Layout wie gewünscht.

Das obige ist der detaillierte Inhalt vonWie erreicht man mithilfe von CSS-Übergängen eine zentrierte Erweiterung für ein DIV-Element?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!