64 lines
1.4 KiB
Vue
64 lines
1.4 KiB
Vue
<template>
|
|
<div class="background" ref="background">
|
|
<div v-for="star in stars" :key="star.id" class="star" :style="{ left: star.x + 'vw', top: star.y + 'vh', width: star.size + 'px', height: star.size + 'px' }"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'BackgroundUI',
|
|
data() {
|
|
return {
|
|
stars: []
|
|
};
|
|
},
|
|
mounted() {
|
|
this.generateStars();
|
|
},
|
|
methods: {
|
|
generateStars() {
|
|
const numberOfStars = 100;
|
|
for (let i = 0; i < numberOfStars; i++) {
|
|
this.stars.push({
|
|
id: i,
|
|
x: Math.random() * 100,
|
|
y: Math.random() * 100,
|
|
size: Math.random() * 2 + 1
|
|
});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.background {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: linear-gradient(to bottom, #4b0082, #8a2be2, #483d8b);
|
|
overflow: hidden;
|
|
z-index: -1;
|
|
}
|
|
|
|
.star {
|
|
position: absolute;
|
|
background-color: #ffff99;
|
|
border-radius: 50%;
|
|
opacity: 0.7;
|
|
animation: twinkle 2s infinite alternate, move 5s infinite ease-in-out;
|
|
}
|
|
|
|
@keyframes twinkle {
|
|
from { opacity: 0.7; }
|
|
to { opacity: 0.3; }
|
|
}
|
|
|
|
@keyframes move {
|
|
0% { transform: translateY(0); }
|
|
50% { transform: translateY(-5px); }
|
|
100% { transform: translateY(0); }
|
|
}
|
|
</style> |