Bagaimana untuk Membuat Div Berkembang dari Pusatnya Menggunakan CSS?

Memperluas Div dari Pusat Menggunakan CSS

Apabila kami mengembangkan div menggunakan CSS, ia biasanya mengembang dari sudut kiri atasnya, meninggalkan bahagian tengah tidak disentuh. Walau bagaimanapun, mungkin terdapat senario di mana kami mahu pengembangan berasal dari pusat div. Dengan teknik CSS kreatif, kita boleh mencapai kesan ini, seperti yang dibincangkan di bawah.

Kunci: Laraskan Margin melalui Formula

Untuk mengembangkan div dari tengah, kuncinya terletak pada peralihan margin. Formula digunakan untuk melaraskan jidar, memastikan pengembangan berlaku secara simetri di sekitar titik tengah.

Pilihan 1: Kembangkan Dalam Ruang Terpelihara

Pilihan ini mengembangkan div dalam ruang yang dikhaskan di sekelilingnya :

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

Pilihan 2: Kembangkan Elemen Sekeliling

Di sini, div mengembang ke atas elemen sekeliling:

<code class="css">#square {
    margin: 0; /*for centering purposes*/
    transition: width 1s, height 1s, margin 1s;
    ...
}
#square:hover {
    margin: -50px; /* 0 - (110px - 10px [= 100px]) / 2 =  -50px */
}</code>

Pilihan 3: Kembangkan dan Alihkan Elemen dalam Aliran Dokumen

Pilihan ini mengembangkan div ke atas elemen sebelum ia dalam aliran dan mengalihkan elemen selepasnya:

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

Nota tentang Unsur Bukan Segiempat

Yang disediakan penyelesaian berfungsi paling baik untuk unsur segi empat sama. Untuk elemen bukan segi empat sama, peralihan perlu melaraskan secara berbeza untuk setiap arah. Sebagai contoh, kita boleh melaraskan lebar dua kali lebih banyak daripada ketinggian:

<code class="css">#rectangle {
    transition: width 1s, height 1s, margin 1s;
    ...
}
#rectangle:hover {
    margin: -50px -100px; /* margin: -50px -((initial margin - width change (or height change))/2) */
}</code>

Dengan mengikuti teknik ini, kita boleh mencapai kesan yang diingini untuk mengembangkan div dari pusatnya, tanpa menggunakan JavaScript.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Div Berkembang dari Pusatnya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!