jekkinoopy/sechskies
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 加強時間軸鑽石動畫

Browse Source
This commit is contained in:
jekkinoopy
2026-06-02 10:57:11 +08:00
parent 75fe70b8e7
commit 43355d5dae
1 changed files with 45 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/style.css
+45 -12
View File
@@ -1559,43 +1559,46 @@ a {
background: #fffdf5;
color: #e0b400;
z-index: 2;
box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.35);
}
@media (prefers-reduced-motion: no-preference) {
.merged-storyline .story-node::before {
animation: timeline-diamond-enter 0.55s ease-out backwards;
animation:
timeline-diamond-enter 0.65s cubic-bezier(0.22, 1, 0.36, 1) backwards,
timeline-diamond-glow 2.1s ease-in-out 0.65s infinite;
}
.merged-storyline .story-node:nth-of-type(1)::before {
animation-delay: 0.06s;
animation-delay: 0.05s, 0.7s;
}
.merged-storyline .story-node:nth-of-type(2)::before {
animation-delay: 0.14s;
animation-delay: 0.12s, 0.9s;
}
.merged-storyline .story-node:nth-of-type(3)::before {
animation-delay: 0.22s;
animation-delay: 0.19s, 1.1s;
}
.merged-storyline .story-node:nth-of-type(4)::before {
animation-delay: 0.3s;
animation-delay: 0.26s, 1.3s;
}
.merged-storyline .story-node:nth-of-type(5)::before {
animation-delay: 0.38s;
animation-delay: 0.33s, 1.5s;
}
.merged-storyline .story-node:nth-of-type(6)::before {
animation-delay: 0.46s;
animation-delay: 0.4s, 1.7s;
}
.merged-storyline .story-node:nth-of-type(7)::before {
animation-delay: 0.54s;
animation-delay: 0.47s, 1.9s;
}
.merged-storyline .story-node:nth-of-type(8)::before {
animation-delay: 0.62s;
animation-delay: 0.54s, 2.1s;
}
}
@@ -1766,14 +1769,44 @@ a {
}
@keyframes timeline-diamond-enter {
from {
0% {
opacity: 0;
transform: scale(0.72);
transform: scale(0.45);
box-shadow: 0 0 0 0 rgba(255, 204, 0, 0);
color: #c9a000;
}
to {
70% {
transform: scale(1.18);
box-shadow:
0 0 0 3px rgba(255, 204, 0, 0.55),
0 0 16px 4px rgba(255, 204, 0, 0.45);
color: #ffdd33;
}
100% {
opacity: 1;
transform: scale(1);
box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.35);
color: #e0b400;
}
}
@keyframes timeline-diamond-glow {
0%,
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.3);
color: #e0b400;
}
50% {
transform: scale(1.14);
box-shadow:
0 0 0 3px rgba(255, 204, 0, 0.5),
0 0 14px 5px rgba(255, 204, 0, 0.55);
color: #ffea4d;
}
}