最近在网上看到一个星空的动画效果，刚好开发项目里也是用的Sass，简单的实现一下，顺便复习一下Sass的基本语法

基本的HTML代码

js 复制代码

import React from 'react';
import styles from '@/styles/Demo.module.scss';

const Index = () => {
    return (
        <div className={styles.container}>
            <div className="layer1"></div>
            <div className="layer2"></div>
            <div className="layer3"></div>
            <div className="layer4"></div>
            <div className="title">Sass应用实例</div>
        </div>
    );
};

export default Index;

基本页面布局

js 复制代码

.container{
    height: 100vh;
    overflow: hidden;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    :global{
        .title{
            text-align: center;
            margin-top: 200px;
            font-size: 50px;
            color: #FFF;
            letter-spacing: 10px;
            background: linear-gradient(white, #090a0f);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }
    }
}

设置静态星空

我们首先通过设置多个box-shadow完成一层的静态星空

js 复制代码

@function getShadows($n){
   $shadows: '#{random(100)}vw #{random(100)}vw #fff';
   @for $i from 2 through $n {
      $shadows: '#{$shadows},  #{random(100)}vw #{random(100)}vw #fff';
   }
   @return unquote($shadows)
}

 .layer1:local{
      position: fixed;
      $size: unquote('#{random(100)}px');
      width: $size;
      height: $size;
      border-radius: 50%;
      background: #f40;
      box-shadow: getShadows(1000);
}

添加动画样式

我们利用animation设置星星整体沿着Y轴向上移动，同时在移动后避免页面空，需要设置对称的DOM属性填充页面

js 复制代码

 .layer1:local{
      position: fixed;
      $size: unquote('#{random(100)}px');
      width: $size;
      height: $size;
      border-radius: 50%;
      background: #f40;
      box-shadow: getShadows(1000);
      animation: moveup $duration linear infinite;
    
      &::after{
        content: '';
        position: fixed;
        width: inherit;
        height: inherit;
        left: 0;
        top: 100vh;
        border-radius: inherit;
        box-shadow: inherit;
     }
}


@keyframes moveup {
      to{
          ransform: translateY(-100vh);
      }
}

其中inherit表示继承父级的计算值

最后优化

按照页面效果，我们需要设置四层相同的星空，从视觉效果和常识我们要求是近大远小和近快远慢，也是要求每一层的大小、运动的速度、数量都不同，才能出现视觉差

js 复制代码

$duration: 1000s;
$count: 1000s;
   @for $i from 1 through 4 {
      $duration: floor($duration / 2);
      $count: floor($count / 2);
      .layer#{$i}:local{
         position: fixed;
         $size: #{$i}px;
         width: $size;
         height: $size;
         border-radius: 50%;
         box-shadow: getShadows($count);
         animation: moveup $duration linear infinite;
        }

🔥🔥如果对您有一点帮助，给个👍鼓励一下吧！谢谢～🙏

实现一个Sass的简单应用

基本页面布局

设置静态星空

添加动画样式

最后优化