Add glow and animation to timeline

2025-11-19 01:46:37 +08:00
parent 48ce66a3e6
commit eefc38d562
2 changed files with 34 additions and 3 deletions
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -29,6 +29,28 @@ body {
  font-family: var(--font-system-sans);
 }

+@keyframes timeline-scroll {
+  0% {
+    transform: translate(-50%, -10%);
+    opacity: 0;
+  }
+  15% {
+    opacity: 1;
+  }
+  85% {
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, 110%);
+    opacity: 0;
+  }
+}
+
+.timeline-scroll-dot {
+  animation: timeline-scroll 6s linear infinite;
+  will-change: transform, opacity;
+}
+
 .toc-target-highlight {
  @apply bg-yellow-50/60 dark:bg-yellow-900/40 transition-colors duration-500;
 }