CSS實現(xiàn)鼠標懸停時盒子變小

在CSS中，我們可以使用transition和transform屬性來實現(xiàn)鼠標懸停時盒子變小的效果，下面是一個簡單的示例代碼：

HTML結(jié)構(gòu)：

<div class="box"></div>

CSS樣式：

.box {
  width: 200px;
  height: 200px;
  background-color: #333;
  transition: transform 0.3s ease;
}
.box:hover {
  transform: scale(0.8);
}

在這個示例中，我們創(chuàng)建了一個名為.box的類，用于表示盒子，在CSS樣式中，我們設(shè)置了盒子的初始寬度和高度，并添加了transition屬性，用于設(shè)置變換的過渡效果，在.box:hover偽類中，我們使用了transform屬性，將盒子縮小到原來的0.8倍，這樣，當鼠標懸停在盒子上時，盒子就會逐漸變小，并伴隨著過渡效果。

你可以根據(jù)需要調(diào)整盒子的初始大小和變換的比例，以達到不同的效果，你還可以添加其他樣式來美化盒子，如添加邊框、圓角等，希望這個示例能夠幫助你實現(xiàn)想要的效果！