feat:交接
This commit is contained in:
73
背景/1.vue
Normal file
73
背景/1.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<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>
|
||||
|
||||
141
背景/2.vue
Normal file
141
背景/2.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>紫色星空渐变背景</title>
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
font-family: 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
.starry-sky {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: linear-gradient(135deg, #1a0b2e, #4a1e6d, #6b2c9c);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
background-color: #f9e076;
|
||||
border-radius: 50%;
|
||||
animation: twinkle 4s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.star.small {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.star.medium {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.star.large {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.star.x-large {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
box-shadow: 0 0 10px 2px rgba(249, 224, 118, 0.7);
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0%, 100% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.content h1 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #f9e076;
|
||||
}
|
||||
|
||||
.content p {
|
||||
font-size: 1.2rem;
|
||||
max-width: 600px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="starry-sky">
|
||||
<div
|
||||
v-for="(star, index) in stars"
|
||||
:key="index"
|
||||
class="star"
|
||||
:class="star.size"
|
||||
:style="{
|
||||
left: star.x + 'vw',
|
||||
top: star.y + 'vh',
|
||||
animationDelay: star.delay + 's'
|
||||
}"
|
||||
></div>
|
||||
|
||||
<div class="content">
|
||||
<h1>紫色星空</h1>
|
||||
<p>这是一个使用Vue实现的紫色渐变星空背景，带有闪烁的淡黄色星光点缀。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { createApp } = Vue;
|
||||
|
||||
createApp({
|
||||
data() {
|
||||
return {
|
||||
stars: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.generateStars();
|
||||
},
|
||||
methods: {
|
||||
generateStars() {
|
||||
const starCount = 150;
|
||||
const sizes = ['small', 'medium', 'large', 'x-large'];
|
||||
|
||||
for (let i = 0; i < starCount; i++) {
|
||||
this.stars.push({
|
||||
x: Math.random() * 100,
|
||||
y: Math.random() * 100,
|
||||
size: sizes[Math.floor(Math.random() * sizes.length)],
|
||||
delay: Math.random() * 4
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}).mount('#app');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
64
背景/3.vue
Normal file
64
背景/3.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user