feat: 在 App.vue 组件中添加装饰性背景元素，包括花朵、云朵和彩虹光晕，优化背景样式和动画效果，同时调整 ParticleBackground 组件的粒子数量和样式以提升视觉效果。
This commit is contained in:
Cat Tom
parent
7db6d59780
commit
5c50c8d70a
179
src/App.vue
179
src/App.vue
@ -9,6 +9,26 @@
|
||||
<!-- 3D粒子背景 -->
|
||||
<ParticleBackground />
|
||||
|
||||
<!-- 添加装饰性背景元素 -->
|
||||
<div class="decorative-background">
|
||||
<!-- 漂浮的花朵 -->
|
||||
<div v-for="n in 8" :key="`flower-${n}`"
|
||||
class="floating-flower"
|
||||
:style="{ '--delay': `${n * 3}s` }">
|
||||
<div class="flower-center"></div>
|
||||
<div v-for="p in 5" :key="`petal-${p}`" class="flower-petal"></div>
|
||||
</div>
|
||||
|
||||
<!-- 漂浮的云朵 -->
|
||||
<div v-for="n in 6" :key="`cloud-${n}`"
|
||||
class="floating-cloud"
|
||||
:style="{ '--delay': `${n * 4}s` }">
|
||||
</div>
|
||||
|
||||
<!-- 彩虹渐变光晕 -->
|
||||
<div class="rainbow-glow"></div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="content">
|
||||
<div class="profile-section">
|
||||
@ -70,7 +90,11 @@ onMounted(() => {
|
||||
<style scoped>
|
||||
.app-container {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #e0f7fa 0%, #f3e5f5 100%);
|
||||
background: linear-gradient(135deg,
|
||||
#e6f3ff 0%,
|
||||
#f8f1ff 50%,
|
||||
#fff5f5 100%
|
||||
);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -129,10 +153,140 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.decorative-background {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 花朵样式 */
|
||||
.floating-flower {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
animation: floatFlower 20s ease-in-out infinite;
|
||||
animation-delay: var(--delay);
|
||||
}
|
||||
|
||||
.flower-center {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #ffd700;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.flower-petal {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #ffb7d0;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.flower-petal:nth-child(1) { transform: rotate(0deg) translate(10px, 0); }
|
||||
.flower-petal:nth-child(2) { transform: rotate(72deg) translate(10px, 0); }
|
||||
.flower-petal:nth-child(3) { transform: rotate(144deg) translate(10px, 0); }
|
||||
.flower-petal:nth-child(4) { transform: rotate(216deg) translate(10px, 0); }
|
||||
.flower-petal:nth-child(5) { transform: rotate(288deg) translate(10px, 0); }
|
||||
|
||||
/* 云朵样式 */
|
||||
.floating-cloud {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 20px;
|
||||
animation: floatCloud 25s linear infinite;
|
||||
animation-delay: var(--delay);
|
||||
filter: blur(4px);
|
||||
}
|
||||
|
||||
.floating-cloud::before,
|
||||
.floating-cloud::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: inherit;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.floating-cloud::before {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -20px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.floating-cloud::after {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
top: -15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
/* 彩虹光晕 */
|
||||
.rainbow-glow {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(
|
||||
circle at center,
|
||||
transparent 0%,
|
||||
rgba(255, 182, 193, 0.1) 40%,
|
||||
rgba(173, 216, 230, 0.1) 60%,
|
||||
rgba(176, 224, 230, 0.05) 80%,
|
||||
transparent 100%
|
||||
);
|
||||
animation: rotateGlow 30s linear infinite;
|
||||
}
|
||||
|
||||
/* 动画关键帧 */
|
||||
@keyframes floatFlower {
|
||||
0%, 100% {
|
||||
transform: translate(
|
||||
calc(random(100) * 1vw),
|
||||
-50px
|
||||
) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translate(
|
||||
calc(random(100) * 1vw),
|
||||
calc(100vh + 50px)
|
||||
) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes floatCloud {
|
||||
from {
|
||||
transform: translateX(-150px) translateY(calc(random(50) * 1vh));
|
||||
}
|
||||
to {
|
||||
transform: translateX(calc(100vw + 150px)) translateY(calc(random(50) * 1vh));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotateGlow {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 暗色模式适配 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.app-container {
|
||||
background: linear-gradient(135deg, #263238 0%, #1a237e 100%);
|
||||
background: linear-gradient(135deg,
|
||||
#1a1f3c 0%,
|
||||
#2a1b3d 50%,
|
||||
#1f1f35 100%
|
||||
);
|
||||
}
|
||||
|
||||
.floating-element {
|
||||
@ -142,15 +296,34 @@ onMounted(() => {
|
||||
.floating-bubble {
|
||||
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
|
||||
}
|
||||
|
||||
.floating-flower {
|
||||
opacity: 0.6;
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
|
||||
/* 优化动画性能 */
|
||||
.floating-cloud {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.rainbow-glow {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
/* 性能优化 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.floating-element,
|
||||
.floating-bubble {
|
||||
animation: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.floating-flower,
|
||||
.floating-cloud,
|
||||
.rainbow-glow {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
|
||||
@ -12,17 +12,18 @@ const breakpoints = useBreakpoints({
|
||||
})
|
||||
|
||||
const isMobile = breakpoints.smaller('tablet')
|
||||
const particleCount = isMobile.value ? 800 : 1500
|
||||
const particleCount = isMobile.value ? 1000 : 1800
|
||||
|
||||
// 动画参数
|
||||
const config = {
|
||||
particleSize: 1.5,
|
||||
particleSize: 2,
|
||||
systemRadius: 15,
|
||||
baseSpeed: 0.2,
|
||||
baseSpeed: 0.15,
|
||||
hoverRadius: 3,
|
||||
color: 0x7ac5e8,
|
||||
lineColor: 0x5ab0d6,
|
||||
lineDistance: 2.5
|
||||
color: 0xb4e0f7,
|
||||
lineColor: 0xa8d8ea,
|
||||
lineDistance: 3,
|
||||
particleCount: isMobile.value ? 1000 : 1800
|
||||
}
|
||||
|
||||
let scene, camera, renderer, particles, lines, mouse = { x: 0, y: 0 }
|
||||
@ -220,14 +221,15 @@ onUnmounted(() => {
|
||||
height: 100%;
|
||||
z-index: var(--z-index-particle);
|
||||
pointer-events: none;
|
||||
opacity: 0.6;
|
||||
opacity: 0.4;
|
||||
mix-blend-mode: screen;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
/* 移动设备降低不透明度 */
|
||||
/* 移动设备优化 */
|
||||
@media (max-width: 768px) {
|
||||
.particle-canvas {
|
||||
opacity: 0.3;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user