diff --git a/index.html b/index.html index e58c1c4..f8cce9f 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ -->
- +

: @@ -75,7 +75,7 @@ - + diff --git a/jstrr.css b/jstrr.css index 60b64dd..4f70273 100644 --- a/jstrr.css +++ b/jstrr.css @@ -1,9 +1,9 @@ -/*body {background-color: rgb(142, 174, 235); +body {background-color: rgb(142, 174, 235); background-image: url(snow.png); background-position: center; background-repeat: no-repeat; background-size: cover; - z-index: 0.1;}*/ + z-index: 0.1;} .wrapper{ text-align: center; margin: 0 auto; @@ -16,33 +16,52 @@ background-color: #fff; border-radius: 50%; position: absolute; - z-index: 999; + animation: animate-snow 10s linear; } -.snow:nth-child(2n+1){ - max-width: 500px; +@keyframes animate-snow { + 0% { + opacity: 0; + top: 0; + } + + 10% { + opacity: 1; + } + + 90% { + opacity: 1; + } + + 100% { + opacity: 0; + top: 100vh; + } } -.snow:nth-child(2n){ - max-width: 150px; +/*.wrapper.snow-inner img:nth-child(2n+1){ + width: 13px; } -span.snow-part1{top: 0; left: 5%;} -span.snow-part2{top: 0; left: 12%;} -span.snow-part3{top: 0; left: 15%;} -span.snow-part4{top: 0; left: 22%;} -span.snow-part5{top: 0; left: 25%;} -span.snow-part6{top: 0; left: 28%;} -span.snow-part7{top: 0; left: 35%;} -span.snow-part8{top: 0; left: 40%;} -span.snow-part9{top: 0; left: 43%;} -span.snow-part10{top: 0; left: 50%;} -span.snow-part11{top: 0; left: 55%;} -span.snow-part12{top: 0; left: 60%;} -span.snow-part13{top: 0; left: 63%;} -span.snow-part14{top: 0; left: 70%;} -span.snow-part15{top: 0; left: 75%;} -span.snow-part16{top: 0; left: 81%;} -span.snow-part17{top: 0; left: 85%;} -span.snow-part18{top: 0; left: 90%;} -span.snow-part19{top: 0; left: 93%;} +.wrapper.snow-inner img:nth-child(2n){ + width: 15px; +} +img .snow-part1{top: 0; left: 5%;} +img .snow-part2{top: 0; left: 12%;} +img .snow-part3{top: 0; left: 15%;} +img .snow-part4{top: 0; left: 22%;} +img .snow-part5{top: 0; left: 25%;} +img .snow-part6{top: 0; left: 28%;} +img .snow-part7{top: 0; left: 35%;} +img .snow-part8{top: 0; left: 40%;} +img .snow-part9{top: 0; left: 43%;} +img .snow-part10{top: 0; left: 50%;} +img .snow-part11{top: 0; left: 55%;} +img .snow-part12{top: 0; left: 60%;} +img .snow-part13{top: 0; left: 63%;} +img .snow-part14{top: 0; left: 70%;} +img .snow-part15{top: 0; left: 75%;} +img .snow-part16{top: 0; left: 81%;} +img .snow-part17{top: 0; left: 85%;} +img .snow-part18{top: 0; left: 90%;} +img .snow-part19{top: 0; left: 93%;} @keyframes animate-snow { 0% { @@ -70,34 +89,33 @@ opacity: 0; } } -.snow-inner .snow { +.snow-inner img { animation: animate-snow linear 6s infinite; - opacity: 0; } -span.snow-part1,span.snow-part4,span.snow-part7,span.snow-part10,span.snow-part8,span.snow-part11,span.snow-part13,span.snow-part16,span.snow-part19{ +img.snow-part1,img.snow-part4,img.snow-part7,img.snow-part10,img.snow-part8,img.snow-part11,img.snow-part13,img.snow-part16,img.snow-part19{ -webkit-animation-delay: 0s; animation-delay: 0s; } -span.snow-part2,span.snow-part5{ +img.snow-part2,img.snow-part5{ -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } -span.snow-part3,span.snow-part6,span.snow-part9,span.snow-part12{ +img.snow-part3,img.snow-part6,img.snow-part9,img.snow-part12{ -webkit-animation-delay: 4s; animation-delay: 4s; } -span.snow-part8,span.snow-part11,span.snow-part13,span.snow-part16,span.snow-part19{ +img.snow-part8,img.snow-part11,img.snow-part13,img.snow-part16,img.snow-part19{ -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } -span.snow-part14,span.snow-part17{ +img.snow-part14,img.snow-part17{ -webkit-animation-delay: 2s; animation-delay: 2s; } -span.snow-part15,span.snow-part18{ +img.snow-part15,img.snow-part18{ -webkit-animation-delay: 5s; animation-delay: 5s; -} +}*/ table{ margin: 0 auto; background-color: white;