From dba9b58a6a53e35aebf2ed2753289aee61e8747e Mon Sep 17 00:00:00 2001 From: Mark Hoekveen Date: Sun, 22 Jun 2025 20:08:55 +0200 Subject: [PATCH] rotating bg with some custom classes. --- frontend/src/app/layout.tsx | 2 +- frontend/src/app/page.tsx | 5 ++--- frontend/src/app/style.css | 29 +++++++++++++++++++++++------ 3 files changed, 26 insertions(+), 10 deletions(-) diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index 0483f0e..094a64a 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -7,7 +7,7 @@ export default function RootLayout({ }) { return ( - {children} + {children} ); } diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index 8701b97..27bbcb3 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -2,9 +2,8 @@ import Image from "next/image"; export default function Page() { return ( - <> -

Hallo mooie wereld!

+
Meowl image - +
); } diff --git a/frontend/src/app/style.css b/frontend/src/app/style.css index c256eb9..661acf9 100644 --- a/frontend/src/app/style.css +++ b/frontend/src/app/style.css @@ -1,12 +1,29 @@ @import "tailwindcss"; +@property --angle { + syntax: ""; + 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; + } }