73 lines
1.8 KiB
Vue
73 lines
1.8 KiB
Vue
<template>
|
|
<div class="starry-bg">
|
|
<!-- 星空层 -->
|
|
<div class="stars"></div>
|
|
<div class="twinkling"></div>
|
|
<div class="gradient-overlay"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// 无需脚本逻辑，这个是纯背景效果
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 全屏容器 */
|
|
.starry-bg {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 背景渐变层（以紫色为主） */
|
|
.gradient-overlay {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: radial-gradient(circle at center, #a48cf2 0%, #5b34b1 50%, #1a093f 100%);
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 星星层（淡黄色点点） */
|
|
.stars {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: transparent;
|
|
background-image: radial-gradient(#fff7b3 1px, transparent 1px),
|
|
radial-gradient(#fff7b3 1px, transparent 1px);
|
|
background-size: 2px 2px, 3px 3px;
|
|
background-position: 0 0, 50px 50px;
|
|
animation: moveStars 200s linear infinite;
|
|
z-index: 0;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* 闪烁层 */
|
|
.twinkling {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: transparent;
|
|
background-image: radial-gradient(#fff9c4 1px, transparent 1px),
|
|
radial-gradient(#fff7b3 1px, transparent 1px);
|
|
background-size: 3px 3px, 2px 2px;
|
|
animation: twinkle 3s infinite ease-in-out alternate;
|
|
z-index: 2;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* 星星轻微移动模拟流动的感觉 */
|
|
@keyframes moveStars {
|
|
from { background-position: 0 0, 50px 50px; }
|
|
to { background-position: 10000px 10000px, 10050px 10050px; }
|
|
}
|
|
|
|
/* 闪烁动画 */
|
|
@keyframes twinkle {
|
|
from { opacity: 0.3; }
|
|
to { opacity: 0.7; }
|
|
}
|
|
</style>
|
|
|