aronmal/leaky-ships
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Reveal grid effect finished

Browse source
This commit is contained in:
aronmal 2022-10-24 23:56:11 +02:00
parent 14bd854b91
commit 1e1003758d
Signed by: aronmal
GPG key ID: 816B7707426FC612
4 changed files with 77 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/styles/home.scss
View file

@ -8,7 +8,7 @@
grid-template-rows: repeat(var(--rows), 1fr);
.tile {
background-color: var(--bg-color1);
background-color: var(--bg-color-1);
&.active {
animation: bright .3s forwards;
@ -19,18 +19,18 @@
@keyframes bright {
0% {
background-color: var(--bg-color1);
background-color: var(--bg-color-1);
}
50% {
background-color: var(--bg-color2);
background-color: var(--bg-color-2);
filter: brightness(130%);
outline: 1px solid white;
}
100% {
background-color: var(--bg-color2);
background-color: var(--bg-color-2);
}
}

61
frontend/src/styles/home2.scss
View file

@ -14,7 +14,6 @@ $g2: rgb(236, 64, 122);
.tile {
position: relative;
background-color: var(--bg-color1);
&::before {
position: absolute;
@ -24,9 +23,43 @@ $g2: rgb(236, 64, 122);
}
&.active {
animation: bright 1s forwards;
opacity: 1;
animation: hide .2s forwards;
animation-delay: var(--delay);
}
&.inactive {
opacity: 0;
animation: show .2s forwards;
animation-delay: var(--delay);
}
}
.center-div {
position: absolute;
height: 100vh;
width: 100vw;
display: inherit;
.headline {
margin: auto;
font-size: 5em;
background-color: rgba(20, 20, 20, 0.2);
padding: .25em .5em;
border-radius: .25em;
&.active {
opacity: 1;
animation: hide 2s forwards;
// animation-delay: 1s;
}
&.inactive {
opacity: 0;
animation: show 2s forwards;
// animation-delay: 1s;
}
}
}
}
@ -40,24 +73,22 @@ $g2: rgb(236, 64, 122);
}
}
@keyframes bright {
@keyframes hide {
0% {
background-color: var(--bg-color1);
opacity: 0;
}
40% {
background-color: var(--bg-color2);
opacity: 1;
}
60% {
background-color: var(--bg-color2);
opacity: 1;
}
100% {
background-color: var(--bg-color2);
opacity: 0;
}
}
@keyframes show {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}