CSS里的方塊可以實現放大縮小的效果。這種效果可以通過修改方塊的尺寸來實現。下面是一個示例:
.box { width: 100px; height: 100px; transition: all .3s ease-in-out; } .box:hover { width: 120px; height: 120px; }
在上面的代碼中,我們首先定義了一個類名為 ".box" 的方塊,它的寬高都是100像素。在鼠標懸浮到方塊上時,我們通過:hover偽類將方塊的寬高都改為了120像素,并設置了一個過渡效果,讓它平滑過渡。
除了直接修改寬高外,我們還可以使用 transform 屬性來實現縮放效果。下面是一個示例:
.box { width: 100px; height: 100px; transform: scale(1); transition: all .3s ease-in-out; } .box:hover { transform: scale(1.2); }
在這個示例中,我們同樣定義了一個寬高為100像素的方塊,并使用 transform:scale(1) 將其大小設置為原來的1倍。當鼠標懸浮到方塊上時,我們將它的縮放比例設置為1.2,從而實現了放大效果。同樣地,我們使用過渡效果來讓它更加平滑。
總的來說,在CSS中實現方塊的放大縮小效果也是相對簡單的。我們可以通過修改寬高或 transform:scale() 屬性來完成,而過渡效果可以讓它更加自然、舒適。