xuyue/home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update
Some checks failed
Deploy / build-and-deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
yuetsh
2025-09-05 12:56:25 +08:00
parent bc0a71bfcd
commit 023e79dd4f
1 changed files with 53 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
style.css
View File

@@ -92,6 +92,7 @@ a:hover {
padding: 1rem; padding: 1rem;
text-align: center; text-align: center;
box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2); box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
animation: adFloat 3s ease-in-out infinite, adShake 2s ease-in-out infinite, adFlash 1.5s ease-in-out infinite; animation: adFloat 3s ease-in-out infinite, adShake 2s ease-in-out infinite, adFlash 1.5s ease-in-out infinite;
} }
@@ -195,8 +196,8 @@ a:hover {
} }
@keyframes buttonPulse { @keyframes buttonPulse {
0%, 100% { transform: scale(1); } 0%, 100% { transform: scale(1); -webkit-transform: scale(1); }
50% { transform: scale(1.05); } 50% { transform: scale(1.05); -webkit-transform: scale(1.05); }
} }
/* 爱心抖动效果 */ /* 爱心抖动效果 */
@@ -219,88 +220,88 @@ a:hover {
@keyframes heartShake { @keyframes heartShake {
0%, 100% { 0%, 100% {
transform: translateX(0) translateY(0) rotate(0deg) scale(1); transform: translateX(0) translateY(0) rotate(0deg) scale(1); -webkit-transform: translateX(0) translateY(0) rotate(0deg) scale(1);
} }
25% { 25% {
transform: translateX(-1px) translateY(-1px) rotate(-2deg) scale(1.1); transform: translateX(-1px) translateY(-1px) rotate(-2deg) scale(1.1); -webkit-transform: translateX(-1px) translateY(-1px) rotate(-2deg) scale(1.1);
} }
50% { 50% {
transform: translateX(1px) translateY(1px) rotate(2deg) scale(1.2); transform: translateX(1px) translateY(1px) rotate(2deg) scale(1.2); -webkit-transform: translateX(1px) translateY(1px) rotate(2deg) scale(1.2);
} }
75% { 75% {
transform: translateX(-1px) translateY(1px) rotate(-1deg) scale(1.1); transform: translateX(-1px) translateY(1px) rotate(-1deg) scale(1.1); -webkit-transform: translateX(-1px) translateY(1px) rotate(-1deg) scale(1.1);
} }
} }
@keyframes textShake { @keyframes textShake {
0%, 100% { 0%, 100% {
transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); -webkit-transform: translateX(0) translateY(0);
} }
10% { 10% {
transform: translateX(-0.5px) translateY(-0.5px); transform: translateX(-0.5px) translateY(-0.5px); -webkit-transform: translateX(-0.5px) translateY(-0.5px);
} }
20% { 20% {
transform: translateX(0.5px) translateY(0.5px); transform: translateX(0.5px) translateY(0.5px); -webkit-transform: translateX(0.5px) translateY(0.5px);
} }
30% { 30% {
transform: translateX(-0.3px) translateY(0.3px); transform: translateX(-0.3px) translateY(0.3px); -webkit-transform: translateX(-0.3px) translateY(0.3px);
} }
40% { 40% {
transform: translateX(0.3px) translateY(-0.3px); transform: translateX(0.3px) translateY(-0.3px); -webkit-transform: translateX(0.3px) translateY(-0.3px);
} }
50% { 50% {
transform: translateX(-0.2px) translateY(0.2px); transform: translateX(-0.2px) translateY(0.2px); -webkit-transform: translateX(-0.2px) translateY(0.2px);
} }
60% { 60% {
transform: translateX(0.2px) translateY(-0.2px); transform: translateX(0.2px) translateY(-0.2px); -webkit-transform: translateX(0.2px) translateY(-0.2px);
} }
70% { 70% {
transform: translateX(-0.1px) translateY(0.1px); transform: translateX(-0.1px) translateY(0.1px); -webkit-transform: translateX(-0.1px) translateY(0.1px);
} }
80% { 80% {
transform: translateX(0.1px) translateY(-0.1px); transform: translateX(0.1px) translateY(-0.1px); -webkit-transform: translateX(0.1px) translateY(-0.1px);
} }
90% { 90% {
transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); -webkit-transform: translateX(0) translateY(0);
} }
} }
@keyframes adFloat { @keyframes adFloat {
0%, 100% { transform: translateY(0px); } 0%, 100% { transform: translateY(0px); -webkit-transform: translateY(0px); }
50% { transform: translateY(-5px); } 50% { transform: translateY(-5px); -webkit-transform: translateY(-5px); }
} }
@keyframes adShake { @keyframes adShake {
0%, 100% { 0%, 100% {
transform: translateX(0) translateY(0) rotate(0deg); transform: translateX(0) translateY(0) rotate(0deg); -webkit-transform: translateX(0) translateY(0) rotate(0deg);
} }
10% { 10% {
transform: translateX(-3px) translateY(-3px) rotate(-2deg); transform: translateX(-3px) translateY(-3px) rotate(-2deg); -webkit-transform: translateX(-3px) translateY(-3px) rotate(-2deg);
} }
20% { 20% {
transform: translateX(3px) translateY(3px) rotate(2deg); transform: translateX(3px) translateY(3px) rotate(2deg); -webkit-transform: translateX(3px) translateY(3px) rotate(2deg);
} }
30% { 30% {
transform: translateX(-2px) translateY(2px) rotate(-1.5deg); transform: translateX(-2px) translateY(2px) rotate(-1.5deg); -webkit-transform: translateX(-2px) translateY(2px) rotate(-1.5deg);
} }
40% { 40% {
transform: translateX(2px) translateY(-2px) rotate(1.5deg); transform: translateX(2px) translateY(-2px) rotate(1.5deg); -webkit-transform: translateX(2px) translateY(-2px) rotate(1.5deg);
} }
50% { 50% {
transform: translateX(-1.5px) translateY(1.5px) rotate(-1deg); transform: translateX(-1.5px) translateY(1.5px) rotate(-1deg); -webkit-transform: translateX(-1.5px) translateY(1.5px) rotate(-1deg);
} }
60% { 60% {
transform: translateX(1.5px) translateY(-1.5px) rotate(1deg); transform: translateX(1.5px) translateY(-1.5px) rotate(1deg); -webkit-transform: translateX(1.5px) translateY(-1.5px) rotate(1deg);
} }
70% { 70% {
transform: translateX(-1px) translateY(1px) rotate(-0.5deg); transform: translateX(-1px) translateY(1px) rotate(-0.5deg); -webkit-transform: translateX(-1px) translateY(1px) rotate(-0.5deg);
} }
80% { 80% {
transform: translateX(1px) translateY(-1px) rotate(0.5deg); transform: translateX(1px) translateY(-1px) rotate(0.5deg); -webkit-transform: translateX(1px) translateY(-1px) rotate(0.5deg);
} }
90% { 90% {
transform: translateX(0) translateY(0) rotate(0deg); transform: translateX(0) translateY(0) rotate(0deg); -webkit-transform: translateX(0) translateY(0) rotate(0deg);
} }
} }
@@ -345,6 +346,7 @@ a:hover {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
border-radius: 20px; border-radius: 20px;
box-shadow: 0 8px 32px rgba(255, 182, 193, 0.2); box-shadow: 0 8px 32px rgba(255, 182, 193, 0.2);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
animation: float 6s ease-in-out infinite; animation: float 6s ease-in-out infinite;
@@ -377,19 +379,20 @@ a:hover {
background: linear-gradient(45deg, #ff69b4 0%, #ff1493 25%, #da70d6 50%, #9370db 75%, #8a2be2 100%); background: linear-gradient(45deg, #ff69b4 0%, #ff1493 25%, #da70d6 50%, #9370db 75%, #8a2be2 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent; color: transparent;
text-shadow: none; text-shadow: none;
animation: centerRotate 4s linear infinite, rainbow 3s ease-in-out infinite; animation: centerRotate 4s linear infinite, rainbow 3s ease-in-out infinite;
} }
@keyframes centerRotate { @keyframes centerRotate {
0% { transform: rotate(0deg); } 0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); }
100% { transform: rotate(360deg); } 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); }
} }
@keyframes rainbow { @keyframes rainbow {
0% { filter: hue-rotate(0deg); } 0% { -webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg); }
100% { filter: hue-rotate(360deg); } 100% { -webkit-filter: hue-rotate(360deg); filter: hue-rotate(360deg); }
} }
.title, .title,
@@ -411,6 +414,11 @@ a:hover {
50% { opacity: 1; } 50% { opacity: 1; }
} }
@keyframes float {
0%, 100% { transform: translateY(0px); -webkit-transform: translateY(0px); }
50% { transform: translateY(-10px); -webkit-transform: translateY(-10px); }
}
.grid { .grid {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -441,6 +449,7 @@ a:hover {
color: #4a4a4a; color: #4a4a4a;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 240, 245, 0.8) 100%); background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 240, 245, 0.8) 100%);
box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2); box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
animation: cardFloat 4s ease-in-out infinite, cardRotate 8s linear infinite; animation: cardFloat 4s ease-in-out infinite, cardRotate 8s linear infinite;
transform-origin: center; transform-origin: center;
@@ -464,19 +473,19 @@ a:hover {
} }
@keyframes shine { @keyframes shine {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); opacity: 0; } 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); -webkit-transform: translateX(-100%) translateY(-100%) rotate(45deg); opacity: 0; }
50% { opacity: 1; } 50% { opacity: 1; }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); opacity: 0; } 100% { transform: translateX(100%) translateY(100%) rotate(45deg); -webkit-transform: translateX(100%) translateY(100%) rotate(45deg); opacity: 0; }
} }
@keyframes cardFloat { @keyframes cardFloat {
0%, 100% { transform: translateY(0px); } 0%, 100% { transform: translateY(0px); -webkit-transform: translateY(0px); }
50% { transform: translateY(-5px); } 50% { transform: translateY(-5px); -webkit-transform: translateY(-5px); }
} }
@keyframes cardRotate { @keyframes cardRotate {
0% { transform: rotate(0deg); } 0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); }
100% { transform: rotate(360deg); } 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); }
} }
.card.pin { .card.pin {
@@ -487,8 +496,8 @@ a:hover {
} }
@keyframes pinPulse { @keyframes pinPulse {
0%, 100% { transform: scale(1); } 0%, 100% { transform: scale(1); -webkit-transform: scale(1); }
50% { transform: scale(1.05); } 50% { transform: scale(1.05); -webkit-transform: scale(1.05); }
} }
.card:hover, .card:hover,
@@ -497,6 +506,7 @@ a:hover {
color: #ff1493; color: #ff1493;
border-color: rgba(255, 20, 147, 0.8); border-color: rgba(255, 20, 147, 0.8);
transform: translateY(-8px) scale(1.02); transform: translateY(-8px) scale(1.02);
-webkit-transform: translateY(-8px) scale(1.02);
box-shadow: 0 8px 25px rgba(255, 20, 147, 0.3); box-shadow: 0 8px 25px rgba(255, 20, 147, 0.3);
animation-play-state: paused; animation-play-state: paused;
} }
@@ -561,6 +571,7 @@ a:hover {
padding: 1rem; padding: 1rem;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
border-radius: 15px; border-radius: 15px;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
border: 1px solid rgba(255, 182, 193, 0.2); border: 1px solid rgba(255, 182, 193, 0.2);
} }
@@ -712,6 +723,6 @@ a:hover {
} }
@keyframes sparkle { @keyframes sparkle {
0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.7; } 0%, 100% { transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); opacity: 0.7; }
50% { transform: scale(1.2) rotate(180deg); opacity: 1; } 50% { transform: scale(1.2) rotate(180deg); -webkit-transform: scale(1.2) rotate(180deg); opacity: 1; }
} }