cattom/PersonalPage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化 App.vue 中的花朵样式和动画效果，调整尺寸、动画时长及透明度，同时添加移动端和暗色模式适配，提升性能和用户体验。

Browse Source
This commit is contained in:
Cat Tom
2025-03-26 12:58:56 +08:00
parent fc5d6e3446
commit 05da8be48c
1 changed files with 72 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
src/App.vue
View File

@@ -187,13 +187,13 @@ onUnmounted(() => {
/* 花朵样式 */ /* 花朵样式 */
.floating-flower { .floating-flower {
position: absolute; position: absolute;
width: 30px; width: 24px;
height: 30px; height: 24px;
will-change: transform; will-change: transform;
transform: translateZ(0); transform: translateZ(0);
animation: floatFlower 25s ease-in-out infinite; animation: floatFlower 30s linear infinite;
animation-delay: var(--delay); animation-delay: var(--delay);
opacity: 0.5; opacity: 0.4;
transform-origin: center; transform-origin: center;
backface-visibility: hidden; backface-visibility: hidden;
perspective: 1000px; perspective: 1000px;
@@ -201,85 +201,104 @@ onUnmounted(() => {
.flower-center { .flower-center {
position: absolute; position: absolute;
width: 10px; width: 8px;
height: 10px; height: 8px;
background: #ffd700; background: #ffd700;
border-radius: 50%; border-radius: 50%;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
animation: pulse 2s ease-in-out infinite;
} }
.flower-petal { .flower-petal {
position: absolute; position: absolute;
width: 12px; width: 10px;
height: 12px; height: 10px;
background: #ffb7d0; background: #ffb7d0;
border-radius: 50%; border-radius: 50%;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform-origin: 0 0; transform-origin: 0 0;
animation: petalWave 3s ease-in-out infinite;
} }
.flower-petal:nth-child(1) { .flower-petal:nth-child(1) { transform: rotate(0deg) translate(8px, 0); }
transform: rotate(0deg) translate(10px, 0); .flower-petal:nth-child(2) { transform: rotate(72deg) translate(8px, 0); }
animation-delay: 0s; .flower-petal:nth-child(3) { transform: rotate(144deg) translate(8px, 0); }
} .flower-petal:nth-child(4) { transform: rotate(216deg) translate(8px, 0); }
.flower-petal:nth-child(2) { .flower-petal:nth-child(5) { transform: rotate(288deg) translate(8px, 0); }
transform: rotate(72deg) translate(10px, 0);
animation-delay: 0.2s;
}
.flower-petal:nth-child(3) {
transform: rotate(144deg) translate(10px, 0);
animation-delay: 0.4s;
}
.flower-petal:nth-child(4) {
transform: rotate(216deg) translate(10px, 0);
animation-delay: 0.6s;
}
.flower-petal:nth-child(5) {
transform: rotate(288deg) translate(10px, 0);
animation-delay: 0.8s;
}
@keyframes floatFlower { @keyframes floatFlower {
0% { 0% {
transform: translate(0, -50px) rotate(0deg) scale(1); transform: translate(0, -30px) rotate(0deg);
}
25% {
transform: translate(calc(100vw * 0.25), calc(100vh * 0.25)) rotate(180deg) scale(1.1);
}
50% {
transform: translate(calc(100vw * 0.5), calc(100vh * 0.5)) rotate(360deg) scale(1);
}
75% {
transform: translate(calc(100vw * 0.75), calc(100vh * 0.75)) rotate(540deg) scale(0.9);
} }
100% { 100% {
transform: translate(100vw, -50px) rotate(720deg) scale(1); transform: translate(100vw, calc(100vh + 30px)) rotate(360deg);
} }
} }
@keyframes petalWave { /* 优化移动端性能 */
0%, 100% { @media (max-width: 768px) {
transform: rotate(var(--rotation)) translate(10px, 0) scale(1); .floating-flower {
width: 20px;
height: 20px;
animation-duration: 25s;
} }
50% {
transform: rotate(var(--rotation)) translate(10px, 0) scale(1.1); .flower-center {
width: 6px;
height: 6px;
}
.flower-petal {
width: 8px;
height: 8px;
}
.flower-petal:nth-child(1) { transform: rotate(0deg) translate(6px, 0); }
.flower-petal:nth-child(2) { transform: rotate(72deg) translate(6px, 0); }
.flower-petal:nth-child(3) { transform: rotate(144deg) translate(6px, 0); }
.flower-petal:nth-child(4) { transform: rotate(216deg) translate(6px, 0); }
.flower-petal:nth-child(5) { transform: rotate(288deg) translate(6px, 0); }
}
/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
.floating-flower {
opacity: 0.3;
}
.flower-center {
background: #ffd700;
opacity: 0.8;
}
.flower-petal {
background: #ffb7d0;
opacity: 0.6;
} }
} }
@keyframes pulse { /* 性能优化 */
0%, 100% { .floating-flower {
transform: translate(-50%, -50%) scale(1); will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000px;
animation-play-state: running;
} }
50% {
transform: translate(-50%, -50%) scale(1.2); /* 添加动画性能优化 */
@media (prefers-reduced-motion: no-preference) {
.floating-flower {
animation-play-state: running !important;
} }
} }
/* 添加动画暂停状态 */
.animation-paused .floating-flower {
animation-play-state: paused !important;
}
/* 云朵样式 */ /* 云朵样式 */
.floating-cloud { .floating-cloud {
position: absolute; position: absolute;
@@ -370,8 +389,7 @@ onUnmounted(() => {
} }
.floating-flower { .floating-flower {
opacity: 0.6; opacity: 0.3;
filter: brightness(0.8);
} }
.floating-cloud { .floating-cloud {