113 lines
2.0 KiB
CSS
113 lines
2.0 KiB
CSS
|
#snow-container {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 700px) {
|
||
|
|
#snow-container {
|
||
|
|
height: 100px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (min-width: 700px) {
|
||
|
|
#snow-container {
|
||
|
|
height: 175px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#snow-container>div:first-child, .snow {
|
||
|
|
z-index: 100;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#snow-container>div:first-child {
|
||
|
|
overflow: hidden;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.snow {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
-webkit-animation: falling linear infinite both;
|
||
|
|
animation: falling linear infinite both;
|
||
|
|
-webkit-transform: translate3D(0, -100%, 0);
|
||
|
|
transform: translate3D(0, -100%, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.snow.large {
|
||
|
|
-webkit-animation-duration: 10s;
|
||
|
|
animation-duration: 10s;
|
||
|
|
background-image: url("./large.png");
|
||
|
|
background-size: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.snow.large + .delayed {
|
||
|
|
-webkit-animation-delay: -5s;
|
||
|
|
animation-delay: -5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.snow.medium {
|
||
|
|
-webkit-animation-duration: 20s;
|
||
|
|
animation-duration: 20s;
|
||
|
|
background-image: url("./medium.png");
|
||
|
|
background-size: contain;
|
||
|
|
}
|
||
|
|
|
||
|
|
.snow.medium + .delayed {
|
||
|
|
-webkit-animation-delay: -10s;
|
||
|
|
animation-delay: -10s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.snow.small {
|
||
|
|
-webkit-animation-duration: 30s;
|
||
|
|
animation-duration: 30s;
|
||
|
|
background-image: url("./small.png");
|
||
|
|
background-size: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.snow.small + .delayed {
|
||
|
|
-webkit-animation-delay: -15s;
|
||
|
|
animation-delay: -15s;
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes falling {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3D(-7.5%, -100%, 0);
|
||
|
|
transform: translate3D(-7.5%, -100%, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
10% {
|
||
|
|
-webkit-transform: translate3D(-7.5%, -100%, 0);
|
||
|
|
transform: translate3D(-7.5%, -100%, 0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3D(7.5%, 100%, 0);
|
||
|
|
transform: translate3D(7.5%, 100%, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes falling {
|
||
|
|
0% {
|
||
|
|
-webkit-transform: translate3D(-7.5%, -100%, 0);
|
||
|
|
transform: translate3D(-7.5%, -100%, 0);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
10% {
|
||
|
|
-webkit-transform: translate3D(-7.5%, -100%, 0);
|
||
|
|
transform: translate3D(-7.5%, -100%, 0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
-webkit-transform: translate3D(7.5%, 100%, 0);
|
||
|
|
transform: translate3D(7.5%, 100%, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|