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

feat: 在 App.vue 中添加新的花朵动画效果，优化花瓣和中心的动画，提升视觉表现和用户体验。

Browse Source
This commit is contained in:
Cat Tom 2025-03-26 12:54:28 +08:00
parent 112bc980b5
commit fc5d6e3446
1 changed files with 74 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/App.vue
View File

@ -194,6 +194,9 @@ onUnmounted(() => {
animation: floatFlower 25s ease-in-out infinite; animation: floatFlower 25s ease-in-out infinite;
animation-delay: var(--delay); animation-delay: var(--delay);
opacity: 0.5; opacity: 0.5;
transform-origin: center;
backface-visibility: hidden;
perspective: 1000px;
} }
.flower-center { .flower-center {
@ -205,6 +208,7 @@ onUnmounted(() => {
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 {
@ -216,13 +220,65 @@ onUnmounted(() => {
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) { transform: rotate(0deg) translate(10px, 0); } .flower-petal:nth-child(1) {
.flower-petal:nth-child(2) { transform: rotate(72deg) translate(10px, 0); } transform: rotate(0deg) translate(10px, 0);
.flower-petal:nth-child(3) { transform: rotate(144deg) translate(10px, 0); } animation-delay: 0s;
.flower-petal:nth-child(4) { transform: rotate(216deg) translate(10px, 0); } }
.flower-petal:nth-child(5) { transform: rotate(288deg) translate(10px, 0); } .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;
}
@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);
}
100% {
transform: translate(100vw, -50px) rotate(720deg) scale(1);
}
}
@keyframes petalWave {
0%, 100% {
transform: rotate(var(--rotation)) translate(10px, 0) scale(1);
}
50% {
transform: rotate(var(--rotation)) translate(10px, 0) scale(1.1);
}
}
@keyframes pulse {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
}
50% {
transform: translate(-50%, -50%) scale(1.2);
}
}
/* 云朵样式 */ /* 云朵样式 */
.floating-cloud { .floating-cloud {
@ -281,18 +337,6 @@ onUnmounted(() => {
} }
/* 动画关键帧 */ /* 动画关键帧 */
@keyframes floatFlower {
0% {
transform: translate(0, -50px) rotate(0deg);
}
50% {
transform: translate(calc(100vw * 0.5), calc(100vh + 50px)) rotate(360deg);
}
100% {
transform: translate(100vw, -50px) rotate(720deg);
}
}
@keyframes floatCloud { @keyframes floatCloud {
0% { 0% {
transform: translateX(-150px) translateY(0); transform: translateX(-150px) translateY(0);
@ -431,6 +475,19 @@ onUnmounted(() => {
.rainbow-glow { .rainbow-glow {
animation-duration: 20s; animation-duration: 20s;
} }
.floating-flower {
animation-duration: 20s;
animation-timing-function: linear;
}
.flower-petal {
animation-duration: 2s;
}
.flower-center {
animation-duration: 1.5s;
}
} }
.floating-element, .floating-element,