Browse Source

better example splash screen.

pull/9142/head
Dan Walmsley 4 years ago
parent
commit
c682c46948
  1. 23
      src/Web/Avalonia.Web.Sample/app.css

23
src/Web/Avalonia.Web.Sample/app.css

@ -4,12 +4,15 @@
} }
#avalonia-splash { #avalonia-splash {
position: absolute; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
color: whitesmoke; color: whitesmoke;
background: #171C2C; background: #171C2C;
font-family: 'Nunito', sans-serif; font-family: 'Nunito', sans-serif;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
} }
#avalonia-splash a{ #avalonia-splash a{
@ -24,15 +27,23 @@
} }
.splash-close { .splash-close {
animation: fadeOut 1s forwards; animation: slide 0.5s linear 1s forwards;
} }
@keyframes fadeOut { @keyframes slide {
from { 0% {
opacity: 1; top: 0%;
} }
to { 50% {
opacity: 80%;
}
100% {
top: 100%;
overflow: hidden;
opacity: 0; opacity: 0;
display: none;
visibility: collapse;
} }
} }

Loading…
Cancel
Save