uniapp+vue3+vite+ts+scss实现背景星空效果

效果：

<script setup lang="ts">  
import { ref, onMounted } from 'vue'  

interface Star {  
  left: number  
  top: number  

	

  

  scale: number  
  delay: number  
}  

const starsList = ref<Star[]>([])  

onMounted(() => {  
  const screenWidth = uni.upx2px(750) // 设备屏幕宽度对应的像素值  
  const screenHeight = uni.upx2px(1334) // 设备屏幕高度对应的像素值  

  // 初始化 starsList 数组  
  for (let i = 0; i < 150; i++) {  
    const star: Star = {  
      left: Math.random() * screenWidth,  
      top: Math.random() * screenHeight,  
      scale: Math.random() * 1.5,  
      delay: Math.random() * 1.5,  
    }  
    starsList.value.push(star)  
  }  
})  
</script>  

<template>  
  <view class="wrapper">  
    <view class="circle"></view>  
    <view class="circle1"></view>  
  </view>  
  <view class="stars">  
    <block v-for="(star, index) in starsList" :key="index">  
      <view  
        class="star"  
        :style="{  
          left: star.left + 'px',  
          top: star.top + 'px',  
          transform: 'scale(' + star.scale + ',' + star.scale + ')',  
          animationDelay: star.delay + 's',  
        }"  
      ></view>  
    </block>  
  </view>  
</template>  

<style scoped lang="scss">  
.wrapper {  
  position: absolute;  
  top: 50px;  
  left: 80%;  
  width: 200px;  
  height: 200px;  
  margin-left: -100px;  
  animation: moonline 30s linear;  
  z-index: 1;  
}  

@keyframes moonline {  
  0% {  
    top: 250px;  
    left: 0%;  
    opacity: 0;  
  }  
  30% {  
    top: 150px;  
    left: 40%;  
    opacity: 0.5;  
  }  
  80% {  
    top: 50px;  
    left: 80%;  
    opacity: 1;  
  }  
}  

.circle {  
  position: absolute;  
  top: 0;  
  left: 0;  
  width: 200px;  
  height: 200px;  
  background-color: #efefef;  
  box-shadow: 0 0 40px #ffffff;  
  border-radius: 100px;  
  animation: moonright 30s linear;  
}  

@keyframes moonright {  
  0% {  
    box-shadow: 0 0 10px #ffffff;  
  }  
  30% {  
    box-shadow: 0 0 15px #ffffff;  
  }  
  40% {  
    box-shadow: 0 0 20px #ffffff;  
  }  
  50% {  
    box-shadow: 0 0 25px #ffffff;  
  }  
  100% {  
    box-shadow: 0 0 30px #ffffff;  
  }  
}  

.stars {  
  position: fixed;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  background-color: #000;  
}  

.star {  
  width: 30px;  
  height: 30px;  
  background: url('@/static/images/star.png') no-repeat;  
  position: absolute;  
  background-size: 100% 100%;  
  animation: flash 1s alternate infinite;  
}  

@keyframes flash {  
  0% {  
    opacity: 0;  
  }  
  100% {  
    opacity: 1;  
  }  
}  

.star:hover {  
  transform: scale(3, 3) rotate(180deg) !important;  
  transition: all 1s;  
}  
</style>  

这是一个组件，需要在主页面中使用

<template>  
<XingKong class="xingkong" />  
</template>  

<style lang="scss" scoped>  
.xingkong {  
  position: absolute;  
  top: 0;  
  left: 0;  
  z-index: -1;  
  width: 100%;  
  height: 100%;  
  /* 其他样式 */  
}  
</style>