hanayo/static/snow/snow.css

113 lines
2.0 KiB
CSS
Raw Normal View History

2019-02-23 13:29:15 +00:00
#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);
}
}