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 ( return (
<html lang="en"> <html lang="en">
<body className="bg-game-show">{children}</body> <body className="bg-game-show animate h-screen">{children}</body>
</html> </html>
); );
} }
frontend/src/app/page.tsx
+2 -3
View File
@@ -2,9 +2,8 @@ import Image from "next/image";
export default function Page() { export default function Page() {
return ( return (
<> <div className="flex items-center justify-center h-full">
<h1>Hallo mooie wereld!</h1>
<Image src={"/meowl.png"} width="460" height="460" alt="Meowl image" /> <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"; @import "tailwindcss";
@property --angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.bg-game-show { .bg-game-show {
background: repeating-conic-gradient( background: repeating-conic-gradient(
from 0deg, from var(--angle),
var(--color-sky-500) 0deg 30deg, var(--color-sky-500) var(--angle) calc(var(--angle) + 30deg),
var(--color-sky-800) 30deg 60deg, var(--color-sky-700) calc(var(--angle) + 30deg)
var(--color-sky-500) 60deg 90deg, calc(var(--angle) + 60deg)
var(--color-sky-800) 90deg 120deg
); );
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;
}
} }