【网格布局动画】纯css/sass实现网格布局hover动画

一、效果

网格布局动画

二、代码

body{
    background-color: darkslategrey;
}
.container{
    width: 400px;
    height: 400px;
    margin: 0 auto;
    margin-top: 100px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 10px;
    transition: all 0.2s;
}
/* 1、 hsl(hue, saturation, lightness) 
       hue 旋转角度  
       saturation 饱和度
       lightness 亮度
       HSL是一种将RGB色彩模型中的点在圆柱坐标系中的表示法
       HSL色彩模式是工业界的一种颜色标准,是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色
   2、@for sass中的循环语句
   3、:has 满足has条件的元素选择器
   4、set-nth(list, n, value)。设置列表第n项的值为value
   5、这里计算鼠标滑入第$i块时是第几行第几列涉及数学的计算公式（取余、向下取整、取整）
*/
@for $i from 1 through 9{
    .container .item:nth-child(#{$i}){
        background-color: hsl($i * 40%, 100%, 74%);
    }
    .container:has(.item:nth-child(#{$i}):hover){
        cursor: pointer;
        $r: floor(($i - 1)/3 + 1);
        $c: ($i - 1) % 3 + 1;
        $fr: 1fr 1fr 1fr;
        $rows: set-nth($fr, $r, 2fr);
        $cols: set-nth($fr, $c, 2fr);
        grid-template-columns: $cols;
        grid-template-rows: $rows;
    }
}