优化 App.vue 中的花朵样式和动画效果，调整尺寸、动画时长及透明度，同时添加移动端和暗色模式适配，提升性能和用户体验。
This commit is contained in:
Cat Tom
parent
fc5d6e3446
commit
05da8be48c
126
src/App.vue
126
src/App.vue
@ -187,13 +187,13 @@ onUnmounted(() => {
|
||||
/* 花朵样式 */
|
||||
.floating-flower {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
will-change: transform;
|
||||
transform: translateZ(0);
|
||||
animation: floatFlower 25s ease-in-out infinite;
|
||||
animation: floatFlower 30s linear infinite;
|
||||
animation-delay: var(--delay);
|
||||
opacity: 0.5;
|
||||
opacity: 0.4;
|
||||
transform-origin: center;
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
@ -201,85 +201,104 @@ onUnmounted(() => {
|
||||
|
||||
.flower-center {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #ffd700;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.flower-petal {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #ffb7d0;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform-origin: 0 0;
|
||||
animation: petalWave 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.flower-petal:nth-child(1) {
|
||||
transform: rotate(0deg) translate(10px, 0);
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.flower-petal:nth-child(2) {
|
||||
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;
|
||||
}
|
||||
.flower-petal:nth-child(1) { transform: rotate(0deg) translate(8px, 0); }
|
||||
.flower-petal:nth-child(2) { transform: rotate(72deg) translate(8px, 0); }
|
||||
.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(5) { transform: rotate(288deg) translate(8px, 0); }
|
||||
|
||||
@keyframes floatFlower {
|
||||
0% {
|
||||
transform: translate(0, -50px) rotate(0deg) scale(1);
|
||||
}
|
||||
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);
|
||||
transform: translate(0, -30px) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(100vw, -50px) rotate(720deg) scale(1);
|
||||
transform: translate(100vw, calc(100vh + 30px)) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes petalWave {
|
||||
0%, 100% {
|
||||
transform: rotate(var(--rotation)) translate(10px, 0) scale(1);
|
||||
/* 优化移动端性能 */
|
||||
@media (max-width: 768px) {
|
||||
.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% {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -50%) scale(1.2);
|
||||
/* 性能优化 */
|
||||
.floating-flower {
|
||||
will-change: transform;
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
/* 添加动画性能优化 */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.floating-flower {
|
||||
animation-play-state: running !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 添加动画暂停状态 */
|
||||
.animation-paused .floating-flower {
|
||||
animation-play-state: paused !important;
|
||||
}
|
||||
|
||||
/* 云朵样式 */
|
||||
.floating-cloud {
|
||||
position: absolute;
|
||||
@ -370,8 +389,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.floating-flower {
|
||||
opacity: 0.6;
|
||||
filter: brightness(0.8);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.floating-cloud {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user