rotating bg

with some custom classes.
2025-06-22 20:08:55 +02:00
parent 2a64d05b71
commit dba9b58a6a
3 changed files with 26 additions and 10 deletions
@@ -1,12 +1,29 @@
@import "tailwindcss";

+@property --angle {
+    syntax: "<angle>";
+    inherits: false;
+    initial-value: 0deg;
+}
+
 .bg-game-show {
    background: repeating-conic-gradient(
-        from 0deg,
-        var(--color-sky-500) 0deg 30deg,
-        var(--color-sky-800) 30deg 60deg,
-        var(--color-sky-500) 60deg 90deg,
-        var(--color-sky-800) 90deg 120deg
+        from var(--angle),
+        var(--color-sky-500) var(--angle) calc(var(--angle) + 30deg),
+        var(--color-sky-700) calc(var(--angle) + 30deg)
+            calc(var(--angle) + 60deg)
    );
-    height: 100vh;
+}
+
+.bg-game-show.animate {
+    animation: rotate_bg 5s cubic-bezier(0.55, 0.45, 0.45, 0.55) infinite;
+}
+
+@keyframes rotate_bg {
+    from {
+        --angle: 00deg;
+    }
+    to {
+        --angle: 30deg;
+    }
 }