实现一个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;
        }

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

相关推荐
繁依Fanyi39 分钟前
用 CodeBuddy 实现「IdeaSpark 每日灵感卡」:一场 UI 与灵感的极简之旅
开发语言·前端·游戏·ui·编辑器·codebuddy首席试玩官
来自星星的坤3 小时前
【Vue 3 + Vue Router 4】如何正确重置路由实例(resetRouter)——避免“VueRouter is not defined”错误
前端·javascript·vue.js
香蕉可乐荷包蛋7 小时前
浅入ES5、ES6(ES2015)、ES2023(ES14)版本对比,及使用建议---ES6就够用(个人觉得)
前端·javascript·es6
未来之窗软件服务7 小时前
资源管理器必要性———仙盟创梦IDE
前端·javascript·ide·仙盟创梦ide
liuyang___8 小时前
第一次经历项目上线
前端·typescript
西哥写代码9 小时前
基于cornerstone3D的dicom影像浏览器 第十八章 自定义序列自动播放条
前端·javascript·vue
清风细雨_林木木9 小时前
Vue 中生成源码映射文件,配置 map
前端·javascript·vue.js
FungLeo9 小时前
node 后端和浏览器前端,有关 RSA 非对称加密的完整实践, 前后端匹配的代码演示
前端·非对称加密·rsa 加密·node 后端
不灭锦鲤9 小时前
xss-labs靶场第11-14关基础详解
前端·xss
不是吧这都有重名10 小时前
利用systemd启动部署在服务器上的web应用
运维·服务器·前端