渡一教育：利用scss实现星空效果

发布时间 2025-12-06 16:32:35

阅读量加载中...

实现效果

此演示仅在桌面端浏览器中可用

html

     html
    
  
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>wanglei.live</title>
    <link rel="stylesheet" href="./style.css" />
    <link
      href="https://fonts.googleapis.com/css?family=Lato:300,400,700"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body>
    <div class="layer1"></div>
    <div class="layer2"></div>
    <div class="layer3"></div>
    <div class="layer4"></div>
    <div class="title">Sass 星空</div>
  </body>
</html>

scss

     css
    
  
html {
  height: 100%;
  background: radial-gradient(ellipse at bottom, #1b2735, 0%, #090a0f 100%);
  overflow: hidden;
}

.title {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  color: #fff;
  text-align: center;
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-size: 50px;
  letter-spacing: 10px;
  margin-top: -60px;
  padding-left: 10px;
  background: linear-gradient(white, #38495a);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

@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);
}

$duration: 500s;
$count: 1000;

@for $i from 1 through 5 {
  $duration: $duration / 2;
  $count: floor($count / 2);

  .layer#{$i} {
    $size: #{$i}px;
    position: fixed;
    width: $size;
    height: $size;
    border-radius: 50%;
    left: 0;
    top: 0;
    box-shadow: getShadows($count);
    animation: moveUp $duration linear infinite;

    &::after {
      content: "";
      position: fixed;
      left: 0;
      top: 100vh;
      border-radius: inherit;
      width: inherit;
      height: inherit;
      box-shadow: inherit;
    }
  }
}

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

#Scss #After伪元素 #Css #动画