线上效果演示：http://alaya.zone:8003/daily/%E5%9B%BE%E7%89%87%E4%B9%9D%E5%AE%AB%E6%A0%BC/index.html
关键代码：
:root {
--container-size: 300px;
--border-size: 10px;
--offset: 20px;
}
.box-container {
width: var(--container-size);
height: var(--container-size);
display: grid;
grid-template-columns: repeat(3, 1fr);
border: var(--border-size) solid #000;
}
.box {
position: relative;
background-size: var(--container-size) var(--container-size);
background-image: url('/api/placeholder/300/300');
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
/* 控制水平方向（列）的定位 */
.box:nth-child(3n+1) {
left: calc(-1 * var(--offset));
background-position-x: 0px;
}
.box:nth-child(3n+2) {
background-position-x: -100px;
}
.box:nth-child(3n) {
left: var(--offset);
background-position-x: -200px;
}
/* 控制垂直方向（行）的定位 */
.box:nth-child(-n+3) {
top: calc(-1 * var(--offset));
}
.box:nth-child(n+4):nth-child(-n+6) {
background-position-y: -100px;
}
.box:nth-child(n+7):nth-child(-n+9) {
top: var(--offset);
background-position-y: -200px;
}
/* 悬停效果 */
.box-container:hover .box {
top: 0;
left: 0;
}这段 CSS 代码包含了实现九宫格效果的核心功能：
- 使用 CSS 变量定义关键尺寸，便于统一管理。
.box-container设置了整体容器的大小和网格布局。.box类定义了每个格子的基本样式，包括背景图片和过渡效果。- 使用
:nth-child选择器精确控制每个格子的位置和背景图片显示区域：- 水平方向（列）的控制
- 垂直方向（行）的控制
- 悬停效果：当鼠标悬停在容器上时，所有格子回到原位。
这些 CSS 规则共同作用，创建了一个初始状态下略微错位，悬停时对齐的九宫格图片效果。它们是实现整个交互效果的关键代码。
