valknar/pivoine.art
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: animate header logo with counter-rotating rings, static in footer

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-04-29 10:37:38 +02:00
parent 18e0e36f41
commit 356098496d
3 changed files with 88 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+16
View File
@@ -624,3 +624,19 @@ footer nav a.label:hover svg {
@keyframes page-in {
from { opacity: 0; transform: translateY(14px); }
}
/* ── Logo bloom animation ──────────────────────────────────── */
.logo-r1, .logo-r2, .logo-r3 {
transform-box: fill-box;
transform-origin: 50% 50%;
}
.logo-bloom:not(.logo-static) .logo-r1 { animation: logo-cw 30s linear infinite; }
.logo-bloom:not(.logo-static) .logo-r2 { animation: logo-ccw 20s linear infinite; }
.logo-bloom:not(.logo-static) .logo-r3 { animation: logo-cw 12s linear infinite; }
.logo-bloom:not(.logo-static):hover .logo-r1 { animation-duration: 3s; }
.logo-bloom:not(.logo-static):hover .logo-r2 { animation-duration: 2s; }
.logo-bloom:not(.logo-static):hover .logo-r3 { animation-duration: 1.2s; }
@keyframes logo-cw { to { transform: rotate(360deg); } }
@keyframes logo-ccw { to { transform: rotate(-360deg); } }