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

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

相关推荐
袁煦丞7 分钟前
9.12 Halo的“傻瓜建站魔法”:cpolar内网穿透实验室第637个成功挑战
前端·程序员·远程工作
universe_0129 分钟前
day27|前端框架学习
前端·笔记
沙尘暴炒饭31 分钟前
前端vue使用canvas封装图片标注功能,鼠标画矩形框,标注文字 包含下载标注之后的图片
前端·vue.js·计算机外设
百思可瑞教育1 小时前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育
yinuo1 小时前
Uni-App跨端实战:APP的WebView与H5通信全流程解析(03)
前端
沐墨专攻技术1 小时前
二、网页的“化妆师”:从零学习 CSS
css·笔记·学习
yinuo1 小时前
Uni-App跨端实战:支付宝小程序WebView与H5通信全流程解析(02)
前端
GISer_Jing2 小时前
sqb&ks二面(准备)
前端·javascript·面试
谢尔登2 小时前
【Webpack】模块联邦
前端·webpack·node.js
Bottle4142 小时前
深入探究 React Fiber(译文)
前端