klemek/tout-doux
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases 15 Wiki Activity

fix: animated background

Browse Source
This commit is contained in:
klemek
2026-07-15 15:49:29 +02:00
parent fe41547ced
commit 51801f67f9
1 changed files with 22 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/style.css
+22 -13
View File
@@ -12,27 +12,36 @@ body {
} }
.bg-hero { .bg-hero {
--size: 5vh; --size: 15vh;
--angle: 45deg; --angle: 45deg;
background: repeating-linear-gradient( background: repeating-linear-gradient(
var(--angle), var(--angle),
var(--color-base-200) calc(0 * var(--size)), var(--color-base-200) 0%,
var(--color-base-200) calc(1 * var(--size)), var(--color-base-200) 12.5%,
var(--color-secondary) calc(1 * var(--size)), var(--color-secondary) 12.5%,
var(--color-secondary) calc(2 * var(--size)), var(--color-secondary) 25%,
var(--color-base-200) calc(2 * var(--size)), var(--color-base-200) 25%,
var(--color-base-200) calc(3 * var(--size)), var(--color-base-200) 37.5%,
var(--color-accent) calc(3 * var(--size)), var(--color-accent) 37.5%,
var(--color-accent) calc(4 * var(--size)), var(--color-accent) 50%,
var(--color-base-200) calc(4 * var(--size)) var(--color-base-200) 50%,
var(--color-base-200) 62.5%,
var(--color-secondary) 62.5%,
var(--color-secondary) 75%,
var(--color-base-200) 75%,
var(--color-base-200) 87.5%,
var(--color-accent) 87.5%,
var(--color-accent) 100%,
var(--color-base-200) 100%
); );
background-size: calc(4 * var(--size) / sin(var(--angle))) background-repeat: repeat;
calc(4 * var(--size) / sin(var(--angle))); background-size: calc(var(--size) / sin(var(--angle)))
calc(var(--size) / sin(var(--angle)));
animation: BackgroundAnimate 10s linear infinite reverse; animation: BackgroundAnimate 10s linear infinite reverse;
} }
@keyframes BackgroundAnimate { @keyframes BackgroundAnimate {
0% { 0% {
background-position: calc(4 * var(--size) / sin(var(--angle))) 0; background-position: calc(var(--size) / sin(var(--angle))) 0;
} }
} }