Add transition to menu opening

This commit is contained in:
Marcel
2017-12-17 19:50:46 +01:00
parent e42d65f4b6
commit 41f702a18b
5 changed files with 64 additions and 24 deletions

View File

@@ -14,6 +14,7 @@ body {
top: 10px;
font-size: 14px;
font-weight: 300;
z-index: 1;
}
.lang {
@@ -31,8 +32,10 @@ body {
#game-title {
position: absolute;
left: 50%;
top: 25%;
transform: translate(-50%, -25%);
top: 50%;
transform: translate(-50%, -25%) translateY(-200px);
opacity: 1;
transition: opacity .5s;
}
#game-play, #game-reset {
@@ -44,30 +47,34 @@ body {
height: 75px;
font-size: 30px;
box-shadow: none;
color: #ffff;
background: #3877FF;
border: 0;
border-radius: 0;
transition: box-shadow .2s;
color: #ffff !important;
background: #3877FF !important;
border: 0 !important;
border-radius: 0 !important;
transition: box-shadow .2s, opacity .5s;
cursor: pointer;
opacity: 1;
}
#game-reset {
display: none;
background-color: #FF0D72;
background-color: #FF0D72 !important;
transform: translate(-50%, -50%) translateY(85px);
opacity: 0;
}
#game-play:hover, #game-play:active, #game-play:focus {
outline: none;
box-shadow: 3px 4px 0 3px rgba(0,0,0,0.2);
outline: none !important;
box-shadow: 3px 4px 0 3px rgba(0,0,0,0.2) !important;
}
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
filter: none;
}
#background.blurred {