tested some changes on the sandbox

2022-02-01 17:48:29 +01:00 · 2022-02-01 17:48:29 +01:00 · f759696ad3
commit f759696ad3
parent e45531486a
2 changed files with 29 additions and 1 deletions
--- 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;
+    }
+}
--- a/testing/test.html
+++ b/testing/test.html
@ -10,7 +10,7 @@
 </head>

 <body>
-
+    <div></div>
 </body>

 </html>