Bagaimana untuk Kembangkan Div dari Pusatnya Menggunakan Peralihan CSS?

Cara Mengembangkan Div dari Pusat Daripada Hanya Atas dan Kiri Menggunakan CSS

Adalah mungkin untuk mencapai kesan yang diingini untuk mengembangkan div dari pusatnya menggunakan CSS, walaupun penting untuk ambil perhatian bahawa pendekatan yang tepat akan bergantung pada konteks dan interaksi yang diingini. Berikut ialah satu pilihan yang boleh digunakan:

Dengan menggunakan sifat peralihan pada jidar, anda boleh mencipta kesan mengembangkan div daripada pusatnya. Tetapkan jidar besar di sekeliling div pada mulanya, dan apabila pengguna menuding di atasnya, kurangkan jidar sebanyak separuh daripada lebar dan ketinggian div mengembang.

Sebagai contoh, katakan kita mempunyai div dengan lebar awal dan ketinggian 10px, dan kami mahu ia berkembang kepada 100px pada tuding. Kami akan menetapkan CSS berikut:

<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>

Ini mewujudkan kesan mengembangkan div dari pusatnya. Perlu diingat, mengapungkan div boleh memperkenalkan sedikit "goyang" semasa peralihan, jadi anda disyorkan untuk mengekalkannya di tempat tanpa sebarang terapung.

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