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

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

相关推荐
Bellafu6663 小时前
selenium 常用xpath写法
前端·selenium·测试工具
blackorbird5 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者6 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强6 小时前
Chrome和IE获取本机ip地址
前端
天***88966 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*6 小时前
zabbix安装
linux·运维·前端·网络·zabbix
清羽_ls7 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友7 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵7 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
10年前端老司机8 小时前
Promise 常见面试题(持续更新中)
前端·javascript