added movement random to background

This commit is contained in:
jorge 2024-02-02 14:15:50 +01:00
parent 4748b3b4ac
commit e7d417337a
6 changed files with 94 additions and 25 deletions

View File

@ -882,14 +882,33 @@ Add your custom styles in this file so it is easier to update the theme.
height: 100vh; height: 100vh;
} }
@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);*/
}
}
.edit-post-visual-editor__content-area .bubbles { .edit-post-visual-editor__content-area .bubbles {
--size: 40vw; --size: 40vw;
--position: -10vw; --position: -5vw;
filter: blur(20rem);
position: absolute; position: absolute;
width: var(--size); width: var(--size);
height: var(--size); height: var(--size);
border-radius: 50%; border-radius: 20%;
filter: blur(10rem);
background: linear-gradient(var(--bgangle), var(--bgcolor), transparent); background: linear-gradient(var(--bgangle), var(--bgcolor), transparent);
} }
@ -897,28 +916,32 @@ Add your custom styles in this file so it is easier to update the theme.
top: var(--position); top: var(--position);
left: var(--position); left: var(--position);
--bgcolor: var(--bubble-color-01); --bgcolor: var(--bubble-color-01);
--bgangle: to bottom right; --bgangle: 135deg;
animation: 5s ease-in-out 2s infinite alternate bubble-move;
} }
.edit-post-visual-editor__content-area .bubbles.bubble-02 { .edit-post-visual-editor__content-area .bubbles.bubble-02 {
top: var(--position); top: var(--position);
right: var(--position); right: var(--position);
--bgcolor: var(--bubble-color-02); --bgcolor: var(--bubble-color-02);
--bgangle: to bottom left; --bgangle: 225deg;
animation: 3s ease-in-out 0s infinite alternate bubble-move;
} }
.edit-post-visual-editor__content-area .bubbles.bubble-03 { .edit-post-visual-editor__content-area .bubbles.bubble-03 {
bottom: var(--position); bottom: var(--position);
left: var(--position); left: var(--position);
--bgcolor: var(--bubble-color-03); --bgcolor: var(--bubble-color-03);
--bgangle: to top right; --bgangle: 45deg;
animation: 2s ease-in-out 3s infinite alternate bubble-move;
} }
.edit-post-visual-editor__content-area .bubbles.bubble-04 { .edit-post-visual-editor__content-area .bubbles.bubble-04 {
bottom: var(--position); bottom: var(--position);
right: var(--position); right: var(--position);
--bgcolor: var(--bubble-color-04); --bgcolor: var(--bubble-color-04);
--bgangle: to top left; --bgangle: 325deg;
animation: 4s ease-in-out 1s infinite alternate bubble-move;
} }
.edit-post-visual-editor__content-area hr { .edit-post-visual-editor__content-area hr {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -17,37 +17,60 @@ body {
height: 100vh; height: 100vh;
} }
@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 { .bubbles {
--size: 40vw; --size: 40vw;
--position: -10vw; --position: -5vw;
filter: blur(20rem);
position:absolute; position:absolute;
width: var(--size); width: var(--size);
height: var(--size); height: var(--size);
border-radius: 50%; border-radius: 20%;
filter: blur(10rem); background: linear-gradient(var(--bgangle),var(--bgcolor), transparent);
//animation: 4s ease-in-out 4s infinite alternate bubble-move;
&.bubble-01{ &.bubble-01{
top: var(--position); top: var(--position);
left: var(--position); left: var(--position);
--bgcolor: var(--bubble-color-01); --bgcolor: var(--bubble-color-01);
--bgangle: to bottom right; //--bgangle: to bottom right;
--bgangle: 135deg;
animation: 5s ease-in-out 2s infinite alternate bubble-move;
} }
&.bubble-02{ &.bubble-02{
top: var(--position); top: var(--position);
right: var(--position); right: var(--position);
--bgcolor: var(--bubble-color-02); --bgcolor: var(--bubble-color-02);
--bgangle: to bottom left; //--bgangle: to bottom left;
--bgangle: 225deg;
animation: 3s ease-in-out 0s infinite alternate bubble-move;
} }
&.bubble-03{ &.bubble-03{
bottom: var(--position); bottom: var(--position);
left: var(--position); left: var(--position);
--bgcolor: var(--bubble-color-03); --bgcolor: var(--bubble-color-03);
--bgangle: to top right; //--bgangle: to top right;
--bgangle: 45deg;
animation: 2s ease-in-out 3s infinite alternate bubble-move;
} }
&.bubble-04{ &.bubble-04{
bottom: var(--position); bottom: var(--position);
right: var(--position); right: var(--position);
--bgcolor: var(--bubble-color-04); --bgcolor: var(--bubble-color-04);
--bgangle: to top left; //--bgangle: to top left;
--bgangle: 325deg;
animation: 4s ease-in-out 1s infinite alternate bubble-move;
} }
background: linear-gradient(var(--bgangle),var(--bgcolor), transparent);
} }

View File

@ -747,14 +747,33 @@ body {
height: 100vh; height: 100vh;
} }
@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 { .bubbles {
--size: 40vw; --size: 40vw;
--position: -10vw; --position: -5vw;
filter: blur(20rem);
position: absolute; position: absolute;
width: var(--size); width: var(--size);
height: var(--size); height: var(--size);
border-radius: 50%; border-radius: 20%;
filter: blur(10rem);
background: linear-gradient(var(--bgangle), var(--bgcolor), transparent); background: linear-gradient(var(--bgangle), var(--bgcolor), transparent);
} }
@ -762,28 +781,32 @@ body {
top: var(--position); top: var(--position);
left: var(--position); left: var(--position);
--bgcolor: var(--bubble-color-01); --bgcolor: var(--bubble-color-01);
--bgangle: to bottom right; --bgangle: 135deg;
animation: 5s ease-in-out 2s infinite alternate bubble-move;
} }
.bubbles.bubble-02 { .bubbles.bubble-02 {
top: var(--position); top: var(--position);
right: var(--position); right: var(--position);
--bgcolor: var(--bubble-color-02); --bgcolor: var(--bubble-color-02);
--bgangle: to bottom left; --bgangle: 225deg;
animation: 3s ease-in-out 0s infinite alternate bubble-move;
} }
.bubbles.bubble-03 { .bubbles.bubble-03 {
bottom: var(--position); bottom: var(--position);
left: var(--position); left: var(--position);
--bgcolor: var(--bubble-color-03); --bgcolor: var(--bubble-color-03);
--bgangle: to top right; --bgangle: 45deg;
animation: 2s ease-in-out 3s infinite alternate bubble-move;
} }
.bubbles.bubble-04 { .bubbles.bubble-04 {
bottom: var(--position); bottom: var(--position);
right: var(--position); right: var(--position);
--bgcolor: var(--bubble-color-04); --bgcolor: var(--bubble-color-04);
--bgangle: to top left; --bgangle: 325deg;
animation: 4s ease-in-out 1s infinite alternate bubble-move;
} }
hr { hr {

File diff suppressed because one or more lines are too long