【SCSS】网格布局中的动画

效果

在这里插入图片描述

index.html

<!DOCTYPE html>
<html>
  <head>
    <title> Document </title>
    <link type="text/css" 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>

index.scss

在vs code 中使用Live Sass Compiler自动编译scss文件。

body {
  background: #23262d;
}
.container {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  margin-top: 50px;
  //以网格显示
  display: grid;
  //自定义css变量
  --c1: 1fr;
  --c2: 1fr;
  --c3: 1fr;
  --r1: 1fr;
  --r2: 1fr;
  --r3: 1fr;
  //设置列数和宽度
  grid-template-columns: var(--c1) var(--c2) var(--c3);
  //设置行数和高度
  grid-template-rows: var(--r1) var(--r2) var(--r3);
  //平滑过渡网格单元尺寸变化
  transition: 0.5s;
  // 每个格子间距
  grid-gap: 10px;
}

@for $i from 0 to 9 {
  //变量每个ITEM
  .item:nth-child(#{$i + 1}) {
    //使用色相环对每个格子设置不同的颜色
    background: hsl($i * 40%, 100%, 64%);
  }
  //判断container元素内部item是否触发hover事件
  .container:has(.item:nth-child(#{$i + 1}):hover) {
    //计算行号
    $r: floor($i/3) + 1;
    //计算列号
    $c: $i%3 + 1;
    //对相应css 行变量设置宽度
    --r#{$r}: 2fr;
    //对相应css 列变量设置高度
    --c#{$c}: 2fr;
  }
}

transition: 0.5s;平滑过渡单元格的尺寸变化，解决鼠标移动画面切换的卡顿问题
grid-gap: 10px;设置格子的间距
grid-template-columns: var(--c1) var(--c2) var(--c3);使用自定义变量设置格子的列数和宽度
grid-template-rows: var(--r1) var(--r2) var(--r3);使用自定义变量设置格子的行数和高度
--c1: 1fr;第一列的宽度
--c2: 1fr;第二列的宽度
--c3: 1fr;第三列的宽度
--r1: 1fr;第一行的宽度
--r2: 1fr;第二行的宽度
--r3: 1fr;第三行的宽度
$r: floor($i/3) + 1; sass变量行号
$c: $i%3 + 1; sass变量列号
background: hsl($i * 40%, 100%, 64%);使用sass变量$i与色相环hsl对每个格子设置不同的背景颜色

index.css

此文件由index.scss文件自动编译生成

body {
  background: #23262d;
}

.container {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  margin-top: 50px;
  display: grid;
  --c1: 1fr;
  --c2: 1fr;
  --c3: 1fr;
  --r1: 1fr;
  --r2: 1fr;
  --r3: 1fr;
  grid-template-columns: var(--c1) var(--c2) var(--c3);
  grid-template-rows: var(--r1) var(--r2) var(--r3);
  transition: 0.5s;
  grid-gap: 10px;
}

.item:nth-child(1) {
  background: hsl(0, 100%, 64%);
}

.container:has(.item:nth-child(1):hover) {
  --r1: 2fr;
  --c1: 2fr;
}

.item:nth-child(2) {
  background: hsl(40, 100%, 64%);
}

.container:has(.item:nth-child(2):hover) {
  --r1: 2fr;
  --c2: 2fr;
}

.item:nth-child(3) {
  background: hsl(80, 100%, 64%);
}

.container:has(.item:nth-child(3):hover) {
  --r1: 2fr;
  --c3: 2fr;
}

.item:nth-child(4) {
  background: hsl(120, 100%, 64%);
}

.container:has(.item:nth-child(4):hover) {
  --r2: 2fr;
  --c1: 2fr;
}

.item:nth-child(5) {
  background: hsl(160, 100%, 64%);
}

.container:has(.item:nth-child(5):hover) {
  --r2: 2fr;
  --c2: 2fr;
}

.item:nth-child(6) {
  background: hsl(200, 100%, 64%);
}

.container:has(.item:nth-child(6):hover) {
  --r2: 2fr;
  --c3: 2fr;
}

.item:nth-child(7) {
  background: hsl(240, 100%, 64%);
}

.container:has(.item:nth-child(7):hover) {
  --r3: 2fr;
  --c1: 2fr;
}

.item:nth-child(8) {
  background: hsl(280, 100%, 64%);
}

.container:has(.item:nth-child(8):hover) {
  --r3: 2fr;
  --c2: 2fr;
}

.item:nth-child(9) {
  background: hsl(320, 100%, 64%);
}

.container:has(.item:nth-child(9):hover) {
  --r3: 2fr;
  --c3: 2fr;
}/*# sourceMappingURL=index.css.map */