JoanaChicau/digital_selves
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update 'digitalselves.css'

Browse Source
This commit is contained in:
JoanaChicau 2022-03-30 23:05:59 +02:00
parent 11c877d3bd
commit 867cb03214
1 changed files with 29 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
digitalselves.css
View File

@ -13,8 +13,8 @@ font-weight: normal;
--color-gray: #edecec;
--color-pink: #f8a8ff;
--color-yel: #FDFFF0;
--color-aqua: #7FFFD4;
--color-black: #000;
--color-aqua: #758fce;
--color-darkblue: #00000d;
--special-font: 'Sinistre';
font-size: 16pt;
}
@ -29,35 +29,37 @@ html {
}
body{
margin:0px;
background-color: var(--color-darkblue) !important;
}
.move {
animation: bodymove 120s infinite;
-webkit-animation: bodymove 120s infinite;
}
@keyframes bodymove {
0% { background: radial-gradient(ellipse at center, var(--color-pink), var(--color-blue));
0% { background: radial-gradient(ellipse at center, var(--color-pink), var(--color-aqua));
background-size: 100% 100%;}
20% { background: radial-gradient(ellipse at top, var(--color-yel), var(--color-blue) 100%);
20% { background: radial-gradient(ellipse at top, var(--color-darkblue), var(--color-aqua) 100%);
background-size: 10% 10%; }
30% { background: radial-gradient(ellipse at top, var(--color-yel), var(--color-blue) 40%);
30% { background: radial-gradient(ellipse at top, var(--color-darkblue), var(--color-aqua) 40%);
background-size: 10% 100%;}
35% { background: radial-gradient(ellipse at top, var(--color-yel), var(--color-blue) 40%, var(--color-pink));
35% { background: radial-gradient(ellipse at top, var(--color-darkblue), var(--color-aqua) 40%, var(--color-pink));
background-size: 10% 100%;}
45% { background: radial-gradient(ellipse at center, var(--color-yel), var(--color-blue) 10%, var(--color-yel) 100%);}
65% { background: radial-gradient(ellipse at center, var(--color-blue), var(--color-yel) 10%, var(--color-blue) 100%);
45% { background: radial-gradient(ellipse at center, var(--color-darkblue), var(--color-aqua) 10%, var(--color-yel) 100%);}
65% { background: radial-gradient(ellipse at center, var(--color-darkblue), var(--color-darkblue) 10%, var(--color-darkblue) 100%);
background-size: 10% 999%;
background-position: left;}
70% { background: radial-gradient(ellipse at center, var(--color-pink), var(--color-yel) 10%, #f8a8ff 100%);
70% { background: radial-gradient(ellipse at center, var(--color-pink), var(--color-darkblue) 10%, #f8a8ff 100%);
background-size: 10% 999%;}
85% { background: linear-gradient(var(--color-pink), var(--color-blue) 10%, var(--color-pink) 100%);
85% { background: linear-gradient(var(--color-pink), var(--color-darkblue) 10%, var(--color-pink) 100%);
background-size: 10% 10%;}
90% { background: linear-gradient(var(--color-blue) 50%, var(--color-pink) 10% 10%);
90% { background: linear-gradient(var(--color-darkblue) 50%, var(--color-pink) 10% 10%);
background-size: 100% 1%;}
100% { background: linear-gradient(var(--color-pink) 10%, var(--color-blue) 100%);}
100% { background: linear-gradient(var(--color-pink) 10%, var(--color-darkblue) 100%);}
}
marquee{
color: var(--color-pink);
font-family: var(--special-font);
margin: 2rem 0rem;
}
#stage01{
position: absolute;
@ -71,7 +73,7 @@ marquee{
padding: 0rem 0.5rem;
width: 150px;
height: 150px;
background-color: var(--color-black);
background-color: var(--color-darkblue);
color: var(--color-pink);
border: 0px;
font-size: 1.6rem;
@ -91,7 +93,7 @@ marquee{
}
#stage01 button:hover{
background-color: var(--color-pink);
color: var(--color-black);
color: var(--color-darkblue);
}
#stage02{
color: var(--color-blue);
@ -107,7 +109,7 @@ marquee{
text-shadow: 0.1rem 0.1rem 0.1rem var(--color-pink);
}
#stage03{
display: initial;
display: none;
position: absolute;
z-index: 3;
top: 0;
@ -121,7 +123,7 @@ marquee{
filter: grayscale(1);
opacity: 0.8;
}
span {
span.oval {
box-shadow: 0.1rem 0.1rem 1rem 0.1rem var(--color-pink);
position: absolute;
z-index: 1;
@ -153,9 +155,19 @@ span.oval:nth-of-type(4n) {
}
span.oval:nth-of-type(5n) {
width: 35%;
height: 35%;
height: 20%;
border-radius: 60% 10% / 80% 40%;
bottom: 0;
left: 0;
}
span.oval:nth-of-type(6n) {
width: 0.5%;
height: 55%;
border-radius: 20% 80% / 80% 40%;
bottom: 0;
right: 0;
background-color: transparent;
margin: 5vh;
}