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

feat: add diagonal scroll animation to AC tile background

Browse Source 
@keyframes ac-bg-scroll mirrors the reference site's bgScroll:
background-position 100%0% → 0%100% over 80s infinite.
Disabled via prefers-reduced-motion.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
yuetsh
2026-05-18 04:18:30 -06:00
parent 8f44a3186a
commit 7438498d4b
1 changed files with 15 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
style.css
View File

@@ -1832,11 +1832,21 @@ html[data-theme="dark"][data-design-theme="animal-crossing"] .beian a:hover {
color: var(--accent); color: var(--accent);
} }
@keyframes ac-bg-scroll {
0% {
background-position: 100% 0%;
}
100% {
background-position: 0% 100%;
}
}
html[data-design-theme="animal-crossing"] body::before { html[data-design-theme="animal-crossing"] body::before {
background-image: url("/textures/ac-tile.webp"); background-image: url("/textures/ac-tile.webp");
background-size: auto; background-size: auto;
background-repeat: repeat; background-repeat: repeat;
opacity: 0.6; opacity: 0.6;
animation: ac-bg-scroll 80s linear infinite;
} }
html[data-theme="dark"][data-design-theme="animal-crossing"] body::before { html[data-theme="dark"][data-design-theme="animal-crossing"] body::before {
@@ -1844,6 +1854,7 @@ html[data-theme="dark"][data-design-theme="animal-crossing"] body::before {
background-size: auto; background-size: auto;
background-repeat: repeat; background-repeat: repeat;
opacity: 0.12; opacity: 0.12;
animation: ac-bg-scroll 80s linear infinite;
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
@@ -1853,6 +1864,10 @@ html[data-theme="dark"][data-design-theme="animal-crossing"] body::before {
transition-duration: 0.01ms !important; transition-duration: 0.01ms !important;
transform: none !important; transform: none !important;
} }
html[data-design-theme="animal-crossing"] body::before {
animation: none !important;
}
} }
/* ─── Minecraft — Stone & Cave / Overworld Day ──────────────── */ /* ─── Minecraft — Stone & Cave / Overworld Day ──────────────── */