diff --git a/testing/test.css b/testing/test.css index e69de29..1326582 100644 --- a/testing/test.css +++ b/testing/test.css @@ -0,0 +1,28 @@ +:root { + --stripe-size: 100px; + --color1: hsl(194, 71%, 30%); + --color2: hsl(194, 77%, 35%); + --duration: 20s; +} + +div { + height: var(--stripe-size); + width: calc(var(--stripe-size) * 7); + margin: auto; + border: 1px solid black; +} + +div { + background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color1) 50%, var(--color1) 75%); + background-size: var(--stripe-size) var(--stripe-size); + animation: alkegrad var(--duration) linear infinite; +} + +@keyframes alkegrad { + from { + background-position: 0 0; + } + to { + background-position: var(--stripe-size) 0; + } +} \ No newline at end of file diff --git a/testing/test.html b/testing/test.html index 09a5f14..8f7c78e 100644 --- a/testing/test.html +++ b/testing/test.html @@ -10,7 +10,7 @@ - +
\ No newline at end of file