xarxaprod
/
xarxaprod-wp-theme
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
adminstyles.css
View File

@ -882,14 +882,33 @@ Add your custom styles in this file so it is easier to update the theme.
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 {
--size: 40vw;
--position: -10vw;
--position: -5vw;
filter: blur(20rem);
position: absolute;
width: var(--size);
height: var(--size);
border-radius: 50%;
filter: blur(10rem);
border-radius: 20%;
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);
left: var(--position);
--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 {
top: var(--position);
right: var(--position);
--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 {
bottom: var(--position);
left: var(--position);
--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 {
bottom: var(--position);
right: var(--position);
--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 {

2
adminstyles.css.map
View File

File diff suppressed because one or more lines are too long

2
assets/css/adminstyles.css
View File

File diff suppressed because one or more lines are too long

39
sass/base/elements/_body.scss
View File

@ -17,37 +17,60 @@ body {
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 {
--size: 40vw;
--position: -10vw;
--position: -5vw;
filter: blur(20rem);
position:absolute;
width: var(--size);
height: var(--size);
border-radius: 50%;
filter: blur(10rem);
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);
--bgangle: to bottom right;
//--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);
--bgangle: to bottom left;
//--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);
--bgangle: to top right;
//--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);
--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);
}

37
style.css
View File

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

2
style.css.map
View File

File diff suppressed because one or more lines are too long