feat: add diagonal scroll animation to AC tile background
@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:
15
style.css
15
style.css
@@ -1832,11 +1832,21 @@ html[data-theme="dark"][data-design-theme="animal-crossing"] .beian a:hover {
|
||||
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 {
|
||||
background-image: url("/textures/ac-tile.webp");
|
||||
background-size: auto;
|
||||
background-repeat: repeat;
|
||||
opacity: 0.6;
|
||||
animation: ac-bg-scroll 80s linear infinite;
|
||||
}
|
||||
|
||||
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-repeat: repeat;
|
||||
opacity: 0.12;
|
||||
animation: ac-bg-scroll 80s linear infinite;
|
||||
}
|
||||
|
||||
@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;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] body::before {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Minecraft — Stone & Cave / Overworld Day ──────────────── */
|
||||
|
||||
Reference in New Issue
Block a user