Wie erweitere ich ein Div von seiner Mitte aus mithilfe von CSS-Übergängen?

So erweitern Sie Divs von der Mitte aus statt nur von oben und links mithilfe von CSS

Es ist möglich, den gewünschten Effekt der Erweiterung eines Divs zu erzielen aus der Mitte mithilfe von CSS, wobei zu beachten ist, dass der genaue Ansatz vom gewünschten Kontext und der gewünschten Interaktion abhängt. Hier ist eine Option, die verwendet werden kann:

Durch die Verwendung der Übergangseigenschaft am Rand können Sie den Effekt erzeugen, dass das Div von seiner Mitte aus erweitert wird. Legen Sie zunächst einen großen Rand um das Div fest, und wenn der Benutzer mit der Maus darüber fährt, verringern Sie den Rand um die Hälfte der Breite und Höhe, auf die sich das Div erweitert.

Angenommen, wir haben ein Div mit einer anfänglichen Breite und eine Höhe von 10 Pixel, und wir möchten, dass es beim Schweben auf 100 Pixel erweitert wird. Wir würden das folgende CSS festlegen:

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

Dies erzeugt den Effekt, dass das Div von seiner Mitte aus erweitert wird. Bedenken Sie, dass das Schweben des Div während des Übergangs zu einem leichten „Wackeln“ führen kann. Daher wird empfohlen, es ohne Schweben an Ort und Stelle zu belassen.

Das obige ist der detaillierte Inhalt vonWie erweitere ich ein Div von seiner Mitte aus mithilfe von CSS-Übergängen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!