body {
margin: 0;
padding: 0;
background-image: linear-gradient(to bottom, #00111a, #00334d, #005580);
background: url("https://hagall-media.de/cp/forest3.jpg") repeat-x;
background-position: center bottom;
background-size: cover;
overflow: hidden;
height: 100vh;
width: 100vw;
position: relative;
}
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#snow-canvas-1 {
z-index: 6;
}
#snow-canvas-2 {
z-index: 5;
}
#snow-canvas-3 {
z-index: 4;
}
#snow-canvas-4 {
z-index: 3;
}
#snow-canvas-5 {
z-index: 2;
}
#snow-canvas-6 {
z-index: 1;
}
.clouds-bg {
width: 100vw;
height: 100vh;
z-index: 1;
background: url("https://hagall-media.de/cp/clouds.png") repeat-x;
background-size: cover;
animation: moveClouds 200s linear infinite;
backdrop-filter: saturate(200%);
mix-blend-mode: plus-lighter;
}
@keyframes moveClouds {
0% {
background-position: 0 0;
}
100% {
background-position: -2000px 0;
}
}
|
