修复动画掉帧的问题,增加昼夜切换的过渡动画

This commit is contained in:
zqlit committed 2026-05-24 14:00:12 +08:00
1 parent c1658c0cc6
commit 0135299e55
7 files changed
+246 -131

No files matched your search

+99
View File
@@ -41,6 +41,32 @@
--card-shadow-dark: 0 18px 45px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(148, 163, 184, 0.45);
}
/* ── Theme switch transition ── */
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.45s;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
::view-transition-old(root) {
animation-name: theme-fade-out;
}
::view-transition-new(root) {
animation-name: theme-fade-in;
animation-delay: 0.04s;
}
@keyframes theme-fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes theme-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
[data-theme="dark"] body {
color: var(--text-content-dark-color);
background-color: var(--background-dark-color);
@@ -3736,6 +3762,79 @@ input[type=submit] {
}
}
/* ── Toast ── */
.ying-toast-container {
position: fixed;
top: 18px;
left: 50%;
transform: translateX(-50%);
z-index: 10000;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
pointer-events: none;
}
.ying-toast {
padding: 9px 18px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
line-height: 1.3;
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.28s ease, transform 0.28s ease;
pointer-events: auto;
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
will-change: transform, opacity;
}
.ying-toast--visible {
opacity: 1;
transform: translateY(0);
}
.ying-toast--success {
background: rgba(34, 197, 94, 0.88);
color: #fff;
box-shadow: 0 8px 32px rgba(34, 197, 94, 0.18);
}
.ying-toast--error {
background: rgba(239, 68, 68, 0.88);
color: #fff;
box-shadow: 0 8px 32px rgba(239, 68, 68, 0.18);
}
.ying-toast--warning {
background: rgba(245, 158, 11, 0.88);
color: #fff;
box-shadow: 0 8px 32px rgba(245, 158, 11, 0.18);
}
.ying-toast--info {
background: rgba(29, 61, 108, 0.85);
color: #f0f4fb;
box-shadow: 0 8px 32px rgba(29, 61, 108, 0.18);
}
[data-theme="dark"] .ying-toast--info {
background: rgba(159, 196, 244, 0.22);
color: #f3f7fd;
-webkit-backdrop-filter: blur(24px) saturate(180%);
backdrop-filter: blur(24px) saturate(180%);
}
@media screen and (max-width: 480px) {
.ying-toast {
padding: 8px 14px;
font-size: 12px;
border-radius: 5px;
}
}
.floating-tools a {
width: 40px;
height: 40px;