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 {
--size: 5vh;
--size: 15vh;
--angle: 45deg;
background: repeating-linear-gradient(
var(--angle),
var(--color-base-200) calc(0 * var(--size)),
var(--color-base-200) calc(1 * var(--size)),
var(--color-secondary) calc(1 * var(--size)),
var(--color-secondary) calc(2 * var(--size)),
var(--color-base-200) calc(2 * var(--size)),
var(--color-base-200) calc(3 * var(--size)),
var(--color-accent) calc(3 * var(--size)),
var(--color-accent) calc(4 * var(--size)),
var(--color-base-200) calc(4 * var(--size))
var(--color-base-200) 0%,
var(--color-base-200) 12.5%,
var(--color-secondary) 12.5%,
var(--color-secondary) 25%,
var(--color-base-200) 25%,
var(--color-base-200) 37.5%,
var(--color-accent) 37.5%,
var(--color-accent) 50%,
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)))
calc(4 * var(--size) / sin(var(--angle)));
background-repeat: repeat;
background-size: calc(var(--size) / sin(var(--angle)))
calc(var(--size) / sin(var(--angle)));
animation: BackgroundAnimate 10s linear infinite reverse;
}
@keyframes BackgroundAnimate {
0% {
background-position: calc(4 * var(--size) / sin(var(--angle))) 0;
background-position: calc(var(--size) / sin(var(--angle))) 0;
}
}