xarxaprod-wp-theme/sass/base/elements/_body.scss

77 lines
1.8 KiB
SCSS
Raw Normal View History

2024-01-09 16:13:20 +01:00
body {
background: $color__background-body; // Fallback for when there is no custom background color defined.
//background-image: url(./assets/img/background-colors-02.jpg);
//background-size: cover;
//background-position: center center;
//background-repeat: no-repeat;
position: relative;
}
.liquid-bubbles {
overflow: hidden;
float: left;
position: fixed;
top: 0;
left: 0;
z-index: -1000;
width: 100vw;
height: 100vh;
}
2024-02-02 14:15:50 +01:00
@keyframes bubble-move {
from {
width: 40vw;
height: 40vw;
filter: blur(10rem);
/* transform: rotate(0);*/
}
to {
width: 90vw;
height: 20vw;
filter: blur(20rem);
/* transform: rotate(5deg);*/
}
}
.bubbles {
--size: 40vw;
2024-02-02 14:15:50 +01:00
--position: -5vw;
filter: blur(20rem);
position:absolute;
width: var(--size);
height: var(--size);
2024-02-02 14:15:50 +01:00
border-radius: 20%;
background: linear-gradient(var(--bgangle),var(--bgcolor), transparent);
//animation: 4s ease-in-out 4s infinite alternate bubble-move;
&.bubble-01{
top: var(--position);
left: var(--position);
--bgcolor: var(--bubble-color-01);
2024-02-02 14:15:50 +01:00
//--bgangle: to bottom right;
--bgangle: 135deg;
animation: 5s ease-in-out 2s infinite alternate bubble-move;
}
&.bubble-02{
top: var(--position);
right: var(--position);
--bgcolor: var(--bubble-color-02);
2024-02-02 14:15:50 +01:00
//--bgangle: to bottom left;
--bgangle: 225deg;
animation: 3s ease-in-out 0s infinite alternate bubble-move;
}
&.bubble-03{
bottom: var(--position);
left: var(--position);
--bgcolor: var(--bubble-color-03);
2024-02-02 14:15:50 +01:00
//--bgangle: to top right;
--bgangle: 45deg;
animation: 2s ease-in-out 3s infinite alternate bubble-move;
}
&.bubble-04{
bottom: var(--position);
right: var(--position);
--bgcolor: var(--bubble-color-04);
2024-02-02 14:15:50 +01:00
//--bgangle: to top left;
--bgangle: 325deg;
animation: 4s ease-in-out 1s infinite alternate bubble-move;
}
2024-01-09 16:13:20 +01:00
}