使用SCSS实现随机大小的方块在页面滚动

目录

一、scss中的插值语法

二、方块在界面上滚动的动画

一、scss中的插值语法

插值语法 #{}‌ 是一种动态注入变量或表达式到选择器、属性名、属性值等位置的机制

.类名:nth-child(n) 表示需同时满足为父元素的第n个元素且类名为给定条件 

 效果图：

<div class="parent">
    <div class="child2"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>

//nth是针对父元素下所有子元素进行选择
$height: 400px; // 视口高度
.parent {
  width: 400px;
  height: #{$height}; // 背景容器高度为视口高度
  .child {
    width: 50px;
    height: 50px;
    background-color: pink;
    margin: 10px;
  }
  .child2 {
    width: 30px;
    height: 30px;
  }
  //表示类名为.child2且为parent的第一个元素
  .child2:nth-child(1) {
    background-color: #6dd5ed; // 白色背景，透明度0.05
  }
  @for $i from 2 through 4 {
    //父元素所有子元素的1-4
    :nth-child(#{$i}) {
      background-color: red; // 白色背景，透明度0.05
    }
  }
}

二、方块在界面上滚动的动画

示例图：

<div class="main">
  <div class="bg-container">
    <ng-container *ngFor="let item of countList">
      <div class="square"></div>
    </ng-container>
  </div>
</div>

// 基础配置
$bg-color: #ffd6e7; // 粉色背景
$square-count: 40; // 方块数量
$min-size: 2vmin; // 最小尺寸
$max-size: 10vmin; // 最大尺寸
$animation-duration: 20s; // 基础动画时长

//背景方块
.main {
  width: 100%;
  height: 100%;
  // 容器样式
  .bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}

// 方块基础样式
.square {
  position: absolute;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 10%;
  animation: float linear infinite;
  background: linear-gradient(to bottom, #ee9ca7, #ffdde1);
  opacity: 0;

  // 生成随机方块 random随机生成0-给定数值的随机数，左闭右开
  @for $i from 1 through $square-count {
    &:nth-child(#{$i}) {
      $size: random($max-size - $min-size) + $min-size;
      $delay: random(30) * 0.1s;
      $duration: 15 + random(20) * 0.1s;
      $startX: random(50) * 1vw;
      $endX: $startX + (random(40) - 20) * 1vw;
      $rotation: random(360) * 1deg;

      width: #{$size};
      height: #{$size};
      animation-delay: $delay;
      animation-duration: $duration;
      left: $startX;

      @keyframes float {
        0% {
          transform: translateY(110vh) rotate(0deg);
          opacity: 0;
        }
        10% {
          opacity: 0.7;
        }
        50% {
          opacity: 1;
        }
        90% {
          opacity: 0.7;
        }
        100% {
          transform: translateY(-10vh) translateX($endX) rotate($rotation);
          opacity: 0;
        }
      }
    }
  }
}