当前位置: 首页 > news >正文

vue星空背景组件

组件

<template>
    <div class="starlit_sky">
        <div class="layer1"></div>
        <div class="layer2"></div>
        <div class="layer3"></div>
        <slot name="contentmain"></slot>
    </div>
</template>

<script >
/**
 * 这是一个星空背景组件
 * 如果在使用时,需要使用插槽,则需要在插槽中添加teleport标签,并设置name属性为contentmain (v-slot:contentmain)
 */
</script>

<style lang="scss" scoped>
@import url('./index.scss');
</style>

scss代码

.starlit_sky {
  width: 100vw;
  height: 100vh;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
}
.contentmain-style {
  position: absolute;
  width: 100vw;
  height: 100vh;
  left: 0;
  right: 0;
}
@function getShadows($n) {
  $shadows: '#{random(100)}vw #{random(100)}vh #fff';
  @for $i from 2 through $n {
    $shadows: '#{$shadows}, #{random(100)}vw #{random(100)}vh #fff';
  }
  @return unquote($shadows);
}
$duration: 400s;
$count: 1000;
@for $i from 1 through 3 {
  $duration: floor($duration/ 2);
  $count: floor($count/2);
  .layer#{$i} {
    $size: #{$i}px;
    position: fixed;
    width: $size;
    height: $size;
    border-radius: 50%;
    background: #fff;
    box-shadow: getShadows($count);
    animation: moveup $duration linear infinite;
    &::after {
      content: '';
      position: fixed;
      left: 0;
      top: 100vh;
      width: $size;
      height: $size;
      border-radius: inherit;
      box-shadow: inherit;
    }
  }
}

@keyframes moveup {
  100% {
    transform: translateY(-100vh);
  }
}

父组件的调用

<template>
    <StarlitSky>
        <template v-slot:contentmain>
        </template>
    </StarlitSky>
</template>

<script setup>
import {defineAsyncComponent} from 'vue';
const StarlitSky = defineAsyncComponent(()=>import('../../components/starlitSky/index.vue'))
</script>
<style lang="less" scoped>
</style>

相关文章:

  • Github 2025-02-12 C开源项目日报 Top7
  • rdesktop工具实战:打造高效便捷的跨操作系统远程办公环境
  • Chrome Devtools调试技巧
  • Redis笔记
  • 基于Spring Boot的宠物爱心组织管理系统的设计与实现(LW+源码+讲解)
  • elementuiPlus日期范围选择el-date-picker动态禁用时间选择
  • ESP32-C3
  • 阿里 Java 岗个人面经分享(技术三面 + 技术 HR 面):Java 基础 +Spring+JVM+ 并发编程 + 算法 + 缓存
  • C语言操作符详解
  • 蓝桥杯备赛 Day14 素数环
  • 【C++学习篇】C++11
  • AlmaLinux9.5安装samba实现与Windows文件共享 笔记250214
  • Spring Boot 常用依赖详解:如何选择和使用常用依赖
  • 20250213刷机飞凌的OK3588-C_Linux5.10.209+Qt5.15.10_用户资料_R1
  • Box Loss:目标检测中精准框定的秘密武器
  • 自动化测试基本流程
  • RabbitMQ解耦订单模块
  • 在 Android 中实现 H5 文件下载功能:跨版本文件存储机制解析
  • 使用数据库sqlite 筛选人脸信息
  • Tomcat添加到Windows系统服务中,服务名称带空格
  • 互联网网站开发有哪些职位/百度推广后台登陆首页
  • 云服务器可以建网站吗/大数据培训
  • 国家市场监督管理总局约谈白酒/昆明网站seo公司
  • 深圳专业高端网站建设多少钱/网站seo优化8888
  • 独立商城系统网站建设/宁波seo优化公司
  • 房地产网站素材/软文广告例子