本文最后更新于801 天前，其中的信息可能已经过时，如有错误请评论留言
效果展示
具体实现
HTML部分没什么好说的，就是9个div，代码如下：
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网格布局动画</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>样式部分我选择用SCSS来写，感觉更方便一些，可以使用循环，代码如下：
// index.scss
body {
background: #23262d;
}
.container {
width: 400px;
height: 400px;
margin: 0 auto;
margin-top: 50px;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
transition: 0.5s;
}
@for $i from 0 through 8 {
.item:nth-child(#{$i+1}){
// 色相环，hsl(hue, saturation, lightness)，(色调，饱和度，亮度)
background: hsl(($i * 40%), 100%, 74%);
}
.container:has(.item:nth-child(#{$i+1}):hover) {
$r: floor($i / 3 + 1); // 1 - 3
$c: $i % 3 + 1; // 1 - 3
$arr: 1fr 1fr 1fr;
$rows: set-nth($arr, $r, 2fr);
$cols: set-nth($arr, $c, 2fr);
grid-template-rows: $rows;
grid-template-columns: $cols;
}
}循环从0到8都能取到，可以取到8，不要写成0到9，不然就越界了
PS：SCSS自动编译出CSS可以使用插件Easy Sass
看完了也去自己动手实现一下吧~
