星空效果--sass

_最初の心

于 2024-09-06 10:49:10 发布

阅读量265

点赞数 2

分类专栏： web前端文章标签： sass 前端 css

本文链接：https://blog.csdn.net/qq_36405210/article/details/141953860

版权

web前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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="./css/index.css" />
  </head>
  <body>
    <div class="container">
      <div class="star1"></div>
      <div class="star2"></div>
      <div class="star3"></div>
    </div>
  </body>
</html>

sass

* {
  margin: 0;
  padding: 0;
}
.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
}
// 获取随机阴影
@function getShadows($n) {
  $shadows: '#{random(100)}vw #{random(100)}vh #fff';
  @for $i from 2 through $n {
    $shadows: '#{$shadows}, #{random(100)}vw #{random(100)}vh #fff';
  }
  @return unquote($shadows);
}
$count: 1000;
$d: 400s;
@for $i from 1 through 3 {
  $d: $d / 2;
  $count: $count / 2;
  .star#{$i} {
    $size: #{$i}px;
    position: absolute;
    inset: 0;
    width: $size;
    height: $size;
    border-radius: 50%;
    box-shadow: getShadows($count);
    animation: move $d linear infinite;
    &::after {
      content: '';
      position: absolute;
      inset: 0;
      width: $size;
      height: $size;
      top: 100vh;
      border-radius: inherit;
      box-shadow: inherit;
    }
  }
}

@keyframes move {
  to {
    transform: translateY(-100vh);
  }
}