页面交互与动画优化

This commit is contained in:
cc
2026-03-12 23:52:46 +08:00
parent 4e80f93b30
commit 4966cdbfac
9 changed files with 597 additions and 380 deletions

View File

@@ -11,6 +11,33 @@
padding: 28px 32px;
background: rgba(15, 23, 42, 0.28);
backdrop-filter: blur(10px);
animation: settingsFadeIn 0.2s ease;
&.closing {
animation: settingsFadeOut 0.2s ease forwards;
}
}
@keyframes settingsFadeIn {
from {
opacity: 0;
backdrop-filter: blur(0);
}
to {
opacity: 1;
backdrop-filter: blur(10px);
}
}
@keyframes settingsFadeOut {
from {
opacity: 1;
backdrop-filter: blur(10px);
}
to {
opacity: 0;
backdrop-filter: blur(0);
}
}
.settings-page {
@@ -25,6 +52,33 @@
border-radius: 24px;
box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
overflow: hidden;
animation: settingsSlideUp 0.3s ease;
&.closing {
animation: settingsSlideDown 0.2s ease forwards;
}
}
@keyframes settingsSlideUp {
from {
opacity: 0;
transform: translateY(30px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes settingsSlideDown {
from {
opacity: 1;
transform: translateY(0) scale(1);
}
to {
opacity: 0;
transform: translateY(20px) scale(0.98);
}
}
.settings-header {