如何從小放大到全屏？

在CSS中，我們可以使用transform屬性來實現從小放大到全屏的動畫效果，以下是一個簡單的示例代碼：

HTML代碼：

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

CSS代碼：

.container {
  position: relative;
  height: 100vh; /* 設置容器高度為視口高度 */
  overflow: hidden; /* 隱藏超出容器的內容 */
}
.box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(0); /* 初始狀態(tài)，縮放比例為0 */
  transition: transform 2s ease-in-out; /* 設置變換動畫 */
}
.box:hover {
  transform: scale(1); /* 鼠標懸停時，縮放比例為1，即放大到全屏 */
}

在這個示例中，我們使用了transform屬性來縮放.box元素，從初始狀態(tài)的縮放比例為0，到鼠標懸停時的縮放比例為1，實現了從小放大到全屏的動畫效果，我們還使用了transition屬性來設置變換動畫的過渡效果，使得放大過程更加平滑，注意，這里的CSS代碼只是示例，實際使用時需要根據自己的需求進行調整。