mark/muzak
2
0
Fork 0
Code Issues Pull Requests Activity

rotating bg

Browse Source 
with some custom classes.
This commit is contained in:
Mark Hoekveen
2025-06-22 20:08:55 +02:00
parent 2a64d05b71
commit dba9b58a6a
3 changed files with 26 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/layout.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<body className="bg-game-show">{children}</body>
<body className="bg-game-show animate h-screen">{children}</body>
</html>
);
}
frontend/src/app/page.tsx
+2 -3
View File
@@ -2,9 +2,8 @@ import Image from "next/image";
export default function Page() {
return (
<>
<h1>Hallo mooie wereld!</h1>
<div className="flex items-center justify-center h-full">
<Image src={"/meowl.png"} width="460" height="460" alt="Meowl image" />
</>
</div>
);
}
frontend/src/app/style.css
+23 -6
View File
@@ -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;
}
}