组件
<template>
<div class="starlit_sky">
<div class="layer1"></div>
<div class="layer2"></div>
<div class="layer3"></div>
<slot name="contentmain"></slot>
</div>
</template>
<script >
</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>