diff --git a/style.css b/style.css index 0b09b84..05b72e5 100644 --- a/style.css +++ b/style.css @@ -2,6 +2,12 @@ --logo-width: 10rem; } +@property --red-stripe-index { + syntax: ""; + initial-value: 0; + inherits: false; +} + html, body { height: 100%; @@ -9,21 +15,33 @@ body { body { --stripes-width: 3rem; + margin: 0; font-family: "Comic Sans", "Impact", sans-serif; background: repeating-linear-gradient( -45deg, - #d23f45aa, - #d23f45aa calc(1 * var(--stripes-width)), - #d9a638aa calc(1 * var(--stripes-width)), - #d9a638aa calc(2 * var(--stripes-width)), - #92a678aa calc(2 * var(--stripes-width)), - #92a678aa calc(3 * var(--stripes-width)), - #798889aa calc(3 * var(--stripes-width)), - #798889aa calc(4 * var(--stripes-width)), - #87485faa calc(4 * var(--stripes-width)), - #87485faa calc(5 * var(--stripes-width)) + #d23f45aa calc(var(--red-stripe-index) * var(--stripes-width)), + #d23f45aa calc(calc(var(--red-stripe-index) + 1) * var(--stripes-width)), + #d9a638aa calc(calc(var(--red-stripe-index) + 1) * var(--stripes-width)), + #d9a638aa calc(calc(var(--red-stripe-index) + 2) * var(--stripes-width)), + #92a678aa calc(calc(var(--red-stripe-index) + 2) * var(--stripes-width)), + #92a678aa calc(calc(var(--red-stripe-index) + 3) * var(--stripes-width)), + #798889aa calc(calc(var(--red-stripe-index) + 3) * var(--stripes-width)), + #798889aa calc(calc(var(--red-stripe-index) + 4) * var(--stripes-width)), + #87485faa calc(calc(var(--red-stripe-index) + 4) * var(--stripes-width)), + #87485faa calc(calc(var(--red-stripe-index) + 5) * var(--stripes-width)) ); + animation: moveStripes 1s linear 0s infinite; +} + +@keyframes moveStripes { + from { + --red-stripe-index: 0; + } + + to { + --red-stripe-index: -5; + } } .container { @@ -41,6 +59,7 @@ body { .logo { width: var(--logo-width); position: absolute; + z-index: 420; animation: moveX 7s linear 0s infinite alternate, moveY 12s linear 0s infinite alternate, @@ -69,11 +88,11 @@ body { } @keyframes rotate { - 0% { + from { transform: rotate(0deg); } - 100% { + to { transform: rotate(360deg); } }