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>