实现一个Sass的简单应用

最近在网上看到一个星空的动画效果,刚好开发项目里也是用的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;
        }

🔥🔥如果对您有一点帮助,给个👍鼓励一下吧!谢谢~🙏

相关推荐
昔人'2 分钟前
html`contenteditable`
前端·html
爱宇阳7 分钟前
npm 常用标签与使用技巧新手教程
前端·npm·node.js
@大迁世界12 分钟前
2025 年该选谁?npm vs yarn vs pnpm
前端·npm·node.js
crary,记忆13 分钟前
简介NPM 和 NPX
前端·学习·npm·node.js
JianZhen✓30 分钟前
现在在本地开发了一些代码A,又有了新需求要紧急开发代码B需要只上线代码B的代码,如何更好的处理这种情况
前端
郝学胜-神的一滴1 小时前
Cesium绘制线:从基础到高级技巧
前端·javascript·程序人生·线性代数·算法·矩阵·图形渲染
蒙奇D索大1 小时前
【计算机网络】408计算机网络高分指南:物理层编码与调制技术精讲
java·前端·学习·计算机网络
无盐海2 小时前
CSRF漏洞攻击(跨站请求伪造攻击)
前端·csrf
慧一居士2 小时前
CSS3 全部功能点介绍,使用场景,对应功能点完整使用示例
前端
烛阴2 小时前
深入Lua包(Package)与依赖管理
前端·lua