Skip to content

Instantly share code, notes, and snippets.

@Efetivos
Last active December 7, 2020 22:45
Show Gist options
  • Select an option

  • Save Efetivos/1bfacfc433375aff9fde6da6ec107a38 to your computer and use it in GitHub Desktop.

Select an option

Save Efetivos/1bfacfc433375aff9fde6da6ec107a38 to your computer and use it in GitHub Desktop.
SnowFlake BLEX
.g-snows{width: 100vw; height: 100vh; z-index: 999; pointer-events: none; left: 0; top: 0; position: fixed;}.g-snows > li{opacity: 0; position: absolute; top: 0; border-radius: 100%; background-color: #FFFFFF; background-repeat: no-repeat; background-size: 100% auto; animation-name: snow-drop; animation-iteration-count: infinite; animation-timing-function: linear; animation-fill-mode: forwards;}.g-snows > li:nth-child(1){left: 62%; width: 2px; height: 2px; animation-duration: 9006ms; animation-delay: 4963ms; filter: blur(1px);}.g-snows > li:nth-child(2){left: 101%; width: 1px; height: 1px; animation-duration: 11548ms; animation-delay: 1122ms; filter: blur(0px);}.g-snows > li:nth-child(3){left: 8%; width: 2px; height: 2px; animation-duration: 6086ms; animation-delay: 327ms; filter: blur(1px);}.g-snows > li:nth-child(4){left: 10%; width: 1px; height: 1px; animation-duration: 8572ms; animation-delay: 3836ms; filter: blur(1px);}.g-snows > li:nth-child(5){left: 16%; width: 0px; height: 0px; animation-duration: 10726ms; animation-delay: 1050ms; filter: blur(1px);}.g-snows > li:nth-child(6){left: 90%; width: 1px; height: 1px; animation-duration: 6821ms; animation-delay: 4967ms; filter: blur(1px);}.g-snows > li:nth-child(7){left: 77%; width: 6px; height: 6px; animation-duration: 6866ms; animation-delay: 1356ms; filter: blur(1px);}.g-snows > li:nth-child(8){left: 26%; width: 2px; height: 2px; animation-duration: 10632ms; animation-delay: 534ms; filter: blur(1px);}.g-snows > li:nth-child(9){left: 71%; width: 0px; height: 0px; animation-duration: 6936ms; animation-delay: 880ms; filter: blur(0px);}.g-snows > li:nth-child(10){left: 21%; width: 4px; height: 4px; animation-duration: 7333ms; animation-delay: 2863ms; filter: blur(0px);}.g-snows > li:nth-child(11){left: 8%; width: 1px; height: 1px; animation-duration: 9569ms; animation-delay: 2093ms; filter: blur(1px);}.g-snows > li:nth-child(12){left: 1%; width: 6px; height: 6px; animation-duration: 6187ms; animation-delay: 2597ms; filter: blur(1px);}.g-snows > li:nth-child(13){left: 27%; width: 6px; height: 6px; animation-duration: 11728ms; animation-delay: 14ms; filter: blur(0px);}.g-snows > li:nth-child(14){left: 42%; width: 3px; height: 3px; animation-duration: 11303ms; animation-delay: 1479ms; filter: blur(1px);}.g-snows > li:nth-child(15){left: 20%; width: 3px; height: 3px; animation-duration: 14186ms; animation-delay: 931ms; filter: blur(0px);}.g-snows > li:nth-child(16){left: 17%; width: 2px; height: 2px; animation-duration: 6025ms; animation-delay: 3415ms; filter: blur(0px);}.g-snows > li:nth-child(17){left: 107%; width: 2px; height: 2px; animation-duration: 12157ms; animation-delay: 3486ms; filter: blur(1px);}.g-snows > li:nth-child(18){left: 58%; width: 0px; height: 0px; animation-duration: 10744ms; animation-delay: 3998ms; filter: blur(1px);}.g-snows > li:nth-child(19){left: 81%; width: 6px; height: 6px; animation-duration: 13231ms; animation-delay: 4178ms; filter: blur(0px);}.g-snows > li:nth-child(20){left: 86%; width: 0px; height: 0px; animation-duration: 12817ms; animation-delay: 2247ms; filter: blur(1px);}.g-snows > li:nth-child(21){left: 27%; width: 3px; height: 3px; animation-duration: 8307ms; animation-delay: 4410ms; filter: blur(1px);}.g-snows > li:nth-child(22){left: 72%; width: 2px; height: 2px; animation-duration: 6327ms; animation-delay: 163ms; filter: blur(1px);}.g-snows > li:nth-child(23){left: 29%; width: 4px; height: 4px; animation-duration: 6583ms; animation-delay: 1509ms; filter: blur(0px);}.g-snows > li:nth-child(24){left: 23%; width: 4px; height: 4px; animation-duration: 8668ms; animation-delay: 2216ms; filter: blur(1px);}.g-snows > li:nth-child(25){left: 51%; width: 2px; height: 2px; animation-duration: 5527ms; animation-delay: 2480ms; filter: blur(0px);}.g-snows > li:nth-child(26){left: 55%; width: 2px; height: 2px; animation-duration: 10271ms; animation-delay: 2998ms; filter: blur(0px);}.g-snows > li:nth-child(27){left: 27%; width: 1px; height: 1px; animation-duration: 7760ms; animation-delay: 3252ms; filter: blur(0px);}.g-snows > li:nth-child(28){left: 58%; width: 3px; height: 3px; animation-duration: 7203ms; animation-delay: 2400ms; filter: blur(0px);}.g-snows > li:nth-child(29){left: 58%; width: 5px; height: 5px; animation-duration: 5601ms; animation-delay: 1786ms; filter: blur(0px);}.g-snows > li:nth-child(30){left: 111%; width: 0px; height: 0px; animation-duration: 9073ms; animation-delay: 1488ms; filter: blur(1px);}.g-snows > li:nth-child(31){left: 83%; width: 1px; height: 1px; animation-duration: 9659ms; animation-delay: 1337ms; filter: blur(1px);}.g-snows > li:nth-child(32){left: 50%; width: 4px; height: 4px; animation-duration: 13430ms; animation-delay: 1762ms; filter: blur(0px);}.g-snows > li:nth-child(33){left: 6%; width: 1px; height: 1px; animation-duration: 8654ms; animation-delay: 860ms; filter: blur(1px);}.g-snows > li:nth-child(34){left: 108%; width: 2px; height: 2px; animation-duration: 8955ms; animation-delay: 942ms; filter: blur(0px);}.g-snows > li:nth-child(35){left: 56%; width: 4px; height: 4px; animation-duration: 10745ms; animation-delay: 3771ms; filter: blur(1px);}.g-snows > li:nth-child(36){left: 113%; width: 0px; height: 0px; animation-duration: 10524ms; animation-delay: 3111ms; filter: blur(0px);}.g-snows > li:nth-child(37){left: 94%; width: 5px; height: 5px; animation-duration: 5158ms; animation-delay: 3923ms; filter: blur(1px);}.g-snows > li:nth-child(38){left: 132%; width: 2px; height: 2px; animation-duration: 7552ms; animation-delay: 1694ms; filter: blur(0px);}.g-snows > li:nth-child(39){left: 51%; width: 4px; height: 4px; animation-duration: 6559ms; animation-delay: 1326ms; filter: blur(0px);}.g-snows > li:nth-child(40){left: 81%; width: 3px; height: 3px; animation-duration: 8023ms; animation-delay: 1307ms; filter: blur(1px);}.g-snows > li:nth-child(41){left: 55%; width: 2px; height: 2px; animation-duration: 7039ms; animation-delay: 2759ms; filter: blur(0px);}.g-snows > li:nth-child(42){left: 48%; width: 3px; height: 3px; animation-duration: 9853ms; animation-delay: 4815ms; filter: blur(0px);}.g-snows > li:nth-child(43){left: 4%; width: 4px; height: 4px; animation-duration: 5301ms; animation-delay: 4683ms; filter: blur(0px);}.g-snows > li:nth-child(44){left: 33%; width: 7px; height: 7px; animation-duration: 10937ms; animation-delay: 2197ms; filter: blur(1px);}.g-snows > li:nth-child(45){left: 97%; width: 3px; height: 3px; animation-duration: 6384ms; animation-delay: 4177ms; filter: blur(0px);}.g-snows > li:nth-child(46){left: 60%; width: 1px; height: 1px; animation-duration: 11602ms; animation-delay: 1971ms; filter: blur(1px);}.g-snows > li:nth-child(47){left: 136%; width: 7px; height: 7px; animation-duration: 11184ms; animation-delay: 384ms; filter: blur(1px);}.g-snows > li:nth-child(48){left: 22%; width: 7px; height: 7px; animation-duration: 11014ms; animation-delay: 896ms; filter: blur(1px);}.g-snows > li:nth-child(49){left: 40%; width: 5px; height: 5px; animation-duration: 6655ms; animation-delay: 2782ms; filter: blur(1px);}.g-snows > li:nth-child(50){left: 43%; width: 5px; height: 5px; animation-duration: 5998ms; animation-delay: 1421ms; filter: blur(1px);}.g-snows > li:nth-child(51){left: 6%; width: 5px; height: 5px; animation-duration: 11936ms; animation-delay: 3578ms; filter: blur(0px);}.g-snows > li:nth-child(52){left: 4%; width: 0px; height: 0px; animation-duration: 11722ms; animation-delay: 496ms; filter: blur(1px);}.g-snows > li:nth-child(53){left: 109%; width: 3px; height: 3px; animation-duration: 5919ms; animation-delay: 4165ms; filter: blur(1px);}.g-snows > li:nth-child(54){left: 55%; width: 3px; height: 3px; animation-duration: 8426ms; animation-delay: 913ms; filter: blur(0px);}.g-snows > li:nth-child(55){left: 64%; width: 1px; height: 1px; animation-duration: 8889ms; animation-delay: 594ms; filter: blur(0px);}.g-snows > li:nth-child(56){left: 6%; width: 4px; height: 4px; animation-duration: 6862ms; animation-delay: 3910ms; filter: blur(1px);}.g-snows > li:nth-child(57){left: 17%; width: 6px; height: 6px; animation-duration: 8196ms; animation-delay: 2771ms; filter: blur(0px);}.g-snows > li:nth-child(58){left: 124%; width: 3px; height: 3px; animation-duration: 7202ms; animation-delay: 4481ms; filter: blur(1px);}.g-snows > li:nth-child(59){left: 58%; width: 2px; height: 2px; animation-duration: 7202ms; animation-delay: 3677ms; filter: blur(0px);}.g-snows > li:nth-child(60){left: 142%; width: 3px; height: 3px; animation-duration: 8225ms; animation-delay: 3287ms; filter: blur(0px);}.g-snows > li:nth-child(61){left: 23%; width: 2px; height: 2px; animation-duration: 9473ms; animation-delay: 2225ms; filter: blur(0px);}.g-snows > li:nth-child(62){left: 104%; width: 2px; height: 2px; animation-duration: 8481ms; animation-delay: 3314ms; filter: blur(0px);}.g-snows > li:nth-child(63){left: 31%; width: 1px; height: 1px; animation-duration: 13170ms; animation-delay: 3617ms; filter: blur(0px);}.g-snows > li:nth-child(64){left: 1%; width: 3px; height: 3px; animation-duration: 12474ms; animation-delay: 1889ms; filter: blur(1px);}.g-snows > li:nth-child(65){left: 37%; width: 6px; height: 6px; animation-duration: 9118ms; animation-delay: 2366ms; filter: blur(1px);}.g-snows > li:nth-child(66){left: 14%; width: 2px; height: 2px; animation-duration: 11599ms; animation-delay: 4313ms; filter: blur(0px);}.g-snows > li:nth-child(67){left: 37%; width: 2px; height: 2px; animation-duration: 9101ms; animation-delay: 1214ms; filter: blur(0px);}.g-snows > li:nth-child(68){left: 83%; width: 0px; height: 0px; animation-duration: 13479ms; animation-delay: 4213ms; filter: blur(1px);}.g-snows > li:nth-child(69){left: 25%; width: 1px; height: 1px; animation-duration: 8139ms; animation-delay: 1330ms; filter: blur(0px);}.g-snows > li:nth-child(70){left: 35%; width: 2px; height: 2px; animation-duration: 7073ms; animation-delay: 2194ms; filter: blur(0px);}.g-snows > li:nth-child(71){left: 50%; width: 1px; height: 1px; animation-duration: 9758ms; animation-delay: 539ms; filter: blur(1px);}.g-snows > li:nth-child(72){left: 33%; width: 3px; height: 3px; animation-duration: 11881ms; animation-delay: 2734ms; filter: blur(1px);}.g-snows > li:nth-child(73){left: 57%; width: 4px; height: 4px; animation-duration: 8527ms; animation-delay: 2204ms; filter: blur(1px);}.g-snows > li:nth-child(74){left: 113%; width: 1px; height: 1px; animation-duration: 7077ms; animation-delay: 1026ms; filter: blur(1px);}.g-snows > li:nth-child(75){left: 36%; width: 5px; height: 5px; animation-duration: 5703ms; animation-delay: 1787ms; filter: blur(1px);}.g-snows > li:nth-child(76){left: 72%; width: 1px; height: 1px; animation-duration: 6137ms; animation-delay: 833ms; filter: blur(1px);}.g-snows > li:nth-child(77){left: 5%; width: 4px; height: 4px; animation-duration: 11458ms; animation-delay: 698ms; filter: blur(1px);}.g-snows > li:nth-child(78){left: 19%; width: 4px; height: 4px; animation-duration: 5372ms; animation-delay: 2953ms; filter: blur(0px);}.g-snows > li:nth-child(79){left: 69%; width: 2px; height: 2px; animation-duration: 11055ms; animation-delay: 316ms; filter: blur(1px);}.g-snows > li:nth-child(80){left: 25%; width: 3px; height: 3px; animation-duration: 6850ms; animation-delay: 1512ms; filter: blur(0px);}.g-snows > li:nth-child(81){left: 21%; width: 2px; height: 2px; animation-duration: 10069ms; animation-delay: 413ms; filter: blur(1px);}.g-snows > li:nth-child(82){left: 3%; width: 1px; height: 1px; animation-duration: 12517ms; animation-delay: 3024ms; filter: blur(1px);}.g-snows > li:nth-child(83){left: 82%; width: 3px; height: 3px; animation-duration: 9759ms; animation-delay: 4388ms; filter: blur(1px);}.g-snows > li:nth-child(84){left: 42%; width: 7px; height: 7px; animation-duration: 6190ms; animation-delay: 3242ms; filter: blur(1px);}.g-snows > li:nth-child(85){left: 104%; width: 0px; height: 0px; animation-duration: 6286ms; animation-delay: 2257ms; filter: blur(1px);}.g-snows > li:nth-child(86){left: 104%; width: 3px; height: 3px; animation-duration: 10429ms; animation-delay: 233ms; filter: blur(1px);}.g-snows > li:nth-child(87){left: 3%; width: 1px; height: 1px; animation-duration: 11276ms; animation-delay: 511ms; filter: blur(1px);}.g-snows > li:nth-child(88){left: 97%; width: 5px; height: 5px; animation-duration: 7715ms; animation-delay: 77ms; filter: blur(1px);}.g-snows > li:nth-child(89){left: 95%; width: 1px; height: 1px; animation-duration: 9482ms; animation-delay: 3678ms; filter: blur(0px);}.g-snows > li:nth-child(90){left: 33%; width: 5px; height: 5px; animation-duration: 12215ms; animation-delay: 2758ms; filter: blur(1px);}.g-snows > li:nth-child(91){left: 11%; width: 0px; height: 0px; animation-duration: 7923ms; animation-delay: 4757ms; filter: blur(0px);}.g-snows > li:nth-child(92){left: 23%; width: 0px; height: 0px; animation-duration: 8632ms; animation-delay: 996ms; filter: blur(0px);}.g-snows > li:nth-child(93){left: 74%; width: 3px; height: 3px; animation-duration: 12333ms; animation-delay: 1764ms; filter: blur(0px);}.g-snows > li:nth-child(94){left: 20%; width: 3px; height: 3px; animation-duration: 5269ms; animation-delay: 2114ms; filter: blur(1px);}.g-snows > li:nth-child(95){left: 36%; width: 1px; height: 1px; animation-duration: 8327ms; animation-delay: 2804ms; filter: blur(0px);}.g-snows > li:nth-child(96){left: 91%; width: 4px; height: 4px; animation-duration: 5204ms; animation-delay: 625ms; filter: blur(1px);}.g-snows > li:nth-child(97){left: 17%; width: 1px; height: 1px; animation-duration: 5080ms; animation-delay: 4653ms; filter: blur(0px);}.g-snows > li:nth-child(98){left: 77%; width: 2px; height: 2px; animation-duration: 6485ms; animation-delay: 3683ms; filter: blur(0px);}.g-snows > li:nth-child(99){left: 11%; width: 3px; height: 3px; animation-duration: 13239ms; animation-delay: 4686ms; filter: blur(0px);}.g-snows > li:nth-child(100){left: 76%; width: 2px; height: 2px; animation-duration: 11196ms; animation-delay: 4461ms; filter: blur(1px);}@keyframes snow-drop{0%{transform: translate(0, 0); opacity: 0.5; margin-left: 0;}10%{margin-left: 15px;}20%{margin-left: 20px;}25%{transform: translate(0, 166.6666666667px); opacity: 0.75;}30%{margin-left: 15px;}40%{margin-left: 0;}50%{transform: translate(0, 333.3333333333px); opacity: 1; margin-left: -15px;}60%{margin-left: -20px;}70%{margin-left: -15px;}75%{transform: translate(0, 500px); opacity: 0.5;}80%{margin-left: 0;}100%{transform: translate(0, 666.6666666667px); opacity: 0;}}</style><script type="text/javascript">document.getElementById("app").insertAdjacentHTML('afterend', '<ul class="g-snows" id="jsi-snows"> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>')</script><style>
.g-snows{width: 100vw; height: 100vh; z-index: 999; pointer-events: none; left: 0; top: 0; position: fixed;}.g-snows > li{opacity: 0; position: absolute; top: 0; border-radius: 100%; background-color: #FFFFFF; background-repeat: no-repeat; background-size: 100% auto; animation-name: snow-drop; animation-iteration-count: infinite; animation-timing-function: linear; animation-fill-mode: forwards;}.g-snows > li:nth-child(1){left: 62%; width: 2px; height: 2px; animation-duration: 9006ms; animation-delay: 4963ms; filter: blur(1px);}.g-snows > li:nth-child(2){left: 101%; width: 1px; height: 1px; animation-duration: 11548ms; animation-delay: 1122ms; filter: blur(0px);}.g-snows > li:nth-child(3){left: 8%; width: 2px; height: 2px; animation-duration: 6086ms; animation-delay: 327ms; filter: blur(1px);}.g-snows > li:nth-child(4){left: 10%; width: 1px; height: 1px; animation-duration: 8572ms; animation-delay: 3836ms; filter: blur(1px);}.g-snows > li:nth-child(5){left: 16%; width: 0px; height: 0px; animation-duration: 10726ms; animation-delay: 1050ms; filter: blur(1px);}.g-snows > li:nth-child(6){left: 90%; width: 1px; height: 1px; animation-duration: 6821ms; animation-delay: 4967ms; filter: blur(1px);}.g-snows > li:nth-child(7){left: 77%; width: 6px; height: 6px; animation-duration: 6866ms; animation-delay: 1356ms; filter: blur(1px);}.g-snows > li:nth-child(8){left: 26%; width: 2px; height: 2px; animation-duration: 10632ms; animation-delay: 534ms; filter: blur(1px);}.g-snows > li:nth-child(9){left: 71%; width: 0px; height: 0px; animation-duration: 6936ms; animation-delay: 880ms; filter: blur(0px);}.g-snows > li:nth-child(10){left: 21%; width: 4px; height: 4px; animation-duration: 7333ms; animation-delay: 2863ms; filter: blur(0px);}.g-snows > li:nth-child(11){left: 8%; width: 1px; height: 1px; animation-duration: 9569ms; animation-delay: 2093ms; filter: blur(1px);}.g-snows > li:nth-child(12){left: 1%; width: 6px; height: 6px; animation-duration: 6187ms; animation-delay: 2597ms; filter: blur(1px);}.g-snows > li:nth-child(13){left: 27%; width: 6px; height: 6px; animation-duration: 11728ms; animation-delay: 14ms; filter: blur(0px);}.g-snows > li:nth-child(14){left: 42%; width: 3px; height: 3px; animation-duration: 11303ms; animation-delay: 1479ms; filter: blur(1px);}.g-snows > li:nth-child(15){left: 20%; width: 3px; height: 3px; animation-duration: 14186ms; animation-delay: 931ms; filter: blur(0px);}.g-snows > li:nth-child(16){left: 17%; width: 2px; height: 2px; animation-duration: 6025ms; animation-delay: 3415ms; filter: blur(0px);}.g-snows > li:nth-child(17){left: 107%; width: 2px; height: 2px; animation-duration: 12157ms; animation-delay: 3486ms; filter: blur(1px);}.g-snows > li:nth-child(18){left: 58%; width: 0px; height: 0px; animation-duration: 10744ms; animation-delay: 3998ms; filter: blur(1px);}.g-snows > li:nth-child(19){left: 81%; width: 6px; height: 6px; animation-duration: 13231ms; animation-delay: 4178ms; filter: blur(0px);}.g-snows > li:nth-child(20){left: 86%; width: 0px; height: 0px; animation-duration: 12817ms; animation-delay: 2247ms; filter: blur(1px);}.g-snows > li:nth-child(21){left: 27%; width: 3px; height: 3px; animation-duration: 8307ms; animation-delay: 4410ms; filter: blur(1px);}.g-snows > li:nth-child(22){left: 72%; width: 2px; height: 2px; animation-duration: 6327ms; animation-delay: 163ms; filter: blur(1px);}.g-snows > li:nth-child(23){left: 29%; width: 4px; height: 4px; animation-duration: 6583ms; animation-delay: 1509ms; filter: blur(0px);}.g-snows > li:nth-child(24){left: 23%; width: 4px; height: 4px; animation-duration: 8668ms; animation-delay: 2216ms; filter: blur(1px);}.g-snows > li:nth-child(25){left: 51%; width: 2px; height: 2px; animation-duration: 5527ms; animation-delay: 2480ms; filter: blur(0px);}.g-snows > li:nth-child(26){left: 55%; width: 2px; height: 2px; animation-duration: 10271ms; animation-delay: 2998ms; filter: blur(0px);}.g-snows > li:nth-child(27){left: 27%; width: 1px; height: 1px; animation-duration: 7760ms; animation-delay: 3252ms; filter: blur(0px);}.g-snows > li:nth-child(28){left: 58%; width: 3px; height: 3px; animation-duration: 7203ms; animation-delay: 2400ms; filter: blur(0px);}.g-snows > li:nth-child(29){left: 58%; width: 5px; height: 5px; animation-duration: 5601ms; animation-delay: 1786ms; filter: blur(0px);}.g-snows > li:nth-child(30){left: 111%; width: 0px; height: 0px; animation-duration: 9073ms; animation-delay: 1488ms; filter: blur(1px);}.g-snows > li:nth-child(31){left: 83%; width: 1px; height: 1px; animation-duration: 9659ms; animation-delay: 1337ms; filter: blur(1px);}.g-snows > li:nth-child(32){left: 50%; width: 4px; height: 4px; animation-duration: 13430ms; animation-delay: 1762ms; filter: blur(0px);}.g-snows > li:nth-child(33){left: 6%; width: 1px; height: 1px; animation-duration: 8654ms; animation-delay: 860ms; filter: blur(1px);}.g-snows > li:nth-child(34){left: 108%; width: 2px; height: 2px; animation-duration: 8955ms; animation-delay: 942ms; filter: blur(0px);}.g-snows > li:nth-child(35){left: 56%; width: 4px; height: 4px; animation-duration: 10745ms; animation-delay: 3771ms; filter: blur(1px);}.g-snows > li:nth-child(36){left: 113%; width: 0px; height: 0px; animation-duration: 10524ms; animation-delay: 3111ms; filter: blur(0px);}.g-snows > li:nth-child(37){left: 94%; width: 5px; height: 5px; animation-duration: 5158ms; animation-delay: 3923ms; filter: blur(1px);}.g-snows > li:nth-child(38){left: 132%; width: 2px; height: 2px; animation-duration: 7552ms; animation-delay: 1694ms; filter: blur(0px);}.g-snows > li:nth-child(39){left: 51%; width: 4px; height: 4px; animation-duration: 6559ms; animation-delay: 1326ms; filter: blur(0px);}.g-snows > li:nth-child(40){left: 81%; width: 3px; height: 3px; animation-duration: 8023ms; animation-delay: 1307ms; filter: blur(1px);}.g-snows > li:nth-child(41){left: 55%; width: 2px; height: 2px; animation-duration: 7039ms; animation-delay: 2759ms; filter: blur(0px);}.g-snows > li:nth-child(42){left: 48%; width: 3px; height: 3px; animation-duration: 9853ms; animation-delay: 4815ms; filter: blur(0px);}.g-snows > li:nth-child(43){left: 4%; width: 4px; height: 4px; animation-duration: 5301ms; animation-delay: 4683ms; filter: blur(0px);}.g-snows > li:nth-child(44){left: 33%; width: 7px; height: 7px; animation-duration: 10937ms; animation-delay: 2197ms; filter: blur(1px);}.g-snows > li:nth-child(45){left: 97%; width: 3px; height: 3px; animation-duration: 6384ms; animation-delay: 4177ms; filter: blur(0px);}.g-snows > li:nth-child(46){left: 60%; width: 1px; height: 1px; animation-duration: 11602ms; animation-delay: 1971ms; filter: blur(1px);}.g-snows > li:nth-child(47){left: 136%; width: 7px; height: 7px; animation-duration: 11184ms; animation-delay: 384ms; filter: blur(1px);}.g-snows > li:nth-child(48){left: 22%; width: 7px; height: 7px; animation-duration: 11014ms; animation-delay: 896ms; filter: blur(1px);}.g-snows > li:nth-child(49){left: 40%; width: 5px; height: 5px; animation-duration: 6655ms; animation-delay: 2782ms; filter: blur(1px);}.g-snows > li:nth-child(50){left: 43%; width: 5px; height: 5px; animation-duration: 5998ms; animation-delay: 1421ms; filter: blur(1px);}.g-snows > li:nth-child(51){left: 6%; width: 5px; height: 5px; animation-duration: 11936ms; animation-delay: 3578ms; filter: blur(0px);}.g-snows > li:nth-child(52){left: 4%; width: 0px; height: 0px; animation-duration: 11722ms; animation-delay: 496ms; filter: blur(1px);}.g-snows > li:nth-child(53){left: 109%; width: 3px; height: 3px; animation-duration: 5919ms; animation-delay: 4165ms; filter: blur(1px);}.g-snows > li:nth-child(54){left: 55%; width: 3px; height: 3px; animation-duration: 8426ms; animation-delay: 913ms; filter: blur(0px);}.g-snows > li:nth-child(55){left: 64%; width: 1px; height: 1px; animation-duration: 8889ms; animation-delay: 594ms; filter: blur(0px);}.g-snows > li:nth-child(56){left: 6%; width: 4px; height: 4px; animation-duration: 6862ms; animation-delay: 3910ms; filter: blur(1px);}.g-snows > li:nth-child(57){left: 17%; width: 6px; height: 6px; animation-duration: 8196ms; animation-delay: 2771ms; filter: blur(0px);}.g-snows > li:nth-child(58){left: 124%; width: 3px; height: 3px; animation-duration: 7202ms; animation-delay: 4481ms; filter: blur(1px);}.g-snows > li:nth-child(59){left: 58%; width: 2px; height: 2px; animation-duration: 7202ms; animation-delay: 3677ms; filter: blur(0px);}.g-snows > li:nth-child(60){left: 142%; width: 3px; height: 3px; animation-duration: 8225ms; animation-delay: 3287ms; filter: blur(0px);}.g-snows > li:nth-child(61){left: 23%; width: 2px; height: 2px; animation-duration: 9473ms; animation-delay: 2225ms; filter: blur(0px);}.g-snows > li:nth-child(62){left: 104%; width: 2px; height: 2px; animation-duration: 8481ms; animation-delay: 3314ms; filter: blur(0px);}.g-snows > li:nth-child(63){left: 31%; width: 1px; height: 1px; animation-duration: 13170ms; animation-delay: 3617ms; filter: blur(0px);}.g-snows > li:nth-child(64){left: 1%; width: 3px; height: 3px; animation-duration: 12474ms; animation-delay: 1889ms; filter: blur(1px);}.g-snows > li:nth-child(65){left: 37%; width: 6px; height: 6px; animation-duration: 9118ms; animation-delay: 2366ms; filter: blur(1px);}.g-snows > li:nth-child(66){left: 14%; width: 2px; height: 2px; animation-duration: 11599ms; animation-delay: 4313ms; filter: blur(0px);}.g-snows > li:nth-child(67){left: 37%; width: 2px; height: 2px; animation-duration: 9101ms; animation-delay: 1214ms; filter: blur(0px);}.g-snows > li:nth-child(68){left: 83%; width: 0px; height: 0px; animation-duration: 13479ms; animation-delay: 4213ms; filter: blur(1px);}.g-snows > li:nth-child(69){left: 25%; width: 1px; height: 1px; animation-duration: 8139ms; animation-delay: 1330ms; filter: blur(0px);}.g-snows > li:nth-child(70){left: 35%; width: 2px; height: 2px; animation-duration: 7073ms; animation-delay: 2194ms; filter: blur(0px);}.g-snows > li:nth-child(71){left: 50%; width: 1px; height: 1px; animation-duration: 9758ms; animation-delay: 539ms; filter: blur(1px);}.g-snows > li:nth-child(72){left: 33%; width: 3px; height: 3px; animation-duration: 11881ms; animation-delay: 2734ms; filter: blur(1px);}.g-snows > li:nth-child(73){left: 57%; width: 4px; height: 4px; animation-duration: 8527ms; animation-delay: 2204ms; filter: blur(1px);}.g-snows > li:nth-child(74){left: 113%; width: 1px; height: 1px; animation-duration: 7077ms; animation-delay: 1026ms; filter: blur(1px);}.g-snows > li:nth-child(75){left: 36%; width: 5px; height: 5px; animation-duration: 5703ms; animation-delay: 1787ms; filter: blur(1px);}.g-snows > li:nth-child(76){left: 72%; width: 1px; height: 1px; animation-duration: 6137ms; animation-delay: 833ms; filter: blur(1px);}.g-snows > li:nth-child(77){left: 5%; width: 4px; height: 4px; animation-duration: 11458ms; animation-delay: 698ms; filter: blur(1px);}.g-snows > li:nth-child(78){left: 19%; width: 4px; height: 4px; animation-duration: 5372ms; animation-delay: 2953ms; filter: blur(0px);}.g-snows > li:nth-child(79){left: 69%; width: 2px; height: 2px; animation-duration: 11055ms; animation-delay: 316ms; filter: blur(1px);}.g-snows > li:nth-child(80){left: 25%; width: 3px; height: 3px; animation-duration: 6850ms; animation-delay: 1512ms; filter: blur(0px);}.g-snows > li:nth-child(81){left: 21%; width: 2px; height: 2px; animation-duration: 10069ms; animation-delay: 413ms; filter: blur(1px);}.g-snows > li:nth-child(82){left: 3%; width: 1px; height: 1px; animation-duration: 12517ms; animation-delay: 3024ms; filter: blur(1px);}.g-snows > li:nth-child(83){left: 82%; width: 3px; height: 3px; animation-duration: 9759ms; animation-delay: 4388ms; filter: blur(1px);}.g-snows > li:nth-child(84){left: 42%; width: 7px; height: 7px; animation-duration: 6190ms; animation-delay: 3242ms; filter: blur(1px);}.g-snows > li:nth-child(85){left: 104%; width: 0px; height: 0px; animation-duration: 6286ms; animation-delay: 2257ms; filter: blur(1px);}.g-snows > li:nth-child(86){left: 104%; width: 3px; height: 3px; animation-duration: 10429ms; animation-delay: 233ms; filter: blur(1px);}.g-snows > li:nth-child(87){left: 3%; width: 1px; height: 1px; animation-duration: 11276ms; animation-delay: 511ms; filter: blur(1px);}.g-snows > li:nth-child(88){left: 97%; width: 5px; height: 5px; animation-duration: 7715ms; animation-delay: 77ms; filter: blur(1px);}.g-snows > li:nth-child(89){left: 95%; width: 1px; height: 1px; animation-duration: 9482ms; animation-delay: 3678ms; filter: blur(0px);}.g-snows > li:nth-child(90){left: 33%; width: 5px; height: 5px; animation-duration: 12215ms; animation-delay: 2758ms; filter: blur(1px);}.g-snows > li:nth-child(91){left: 11%; width: 0px; height: 0px; animation-duration: 7923ms; animation-delay: 4757ms; filter: blur(0px);}.g-snows > li:nth-child(92){left: 23%; width: 0px; height: 0px; animation-duration: 8632ms; animation-delay: 996ms; filter: blur(0px);}.g-snows > li:nth-child(93){left: 74%; width: 3px; height: 3px; animation-duration: 12333ms; animation-delay: 1764ms; filter: blur(0px);}.g-snows > li:nth-child(94){left: 20%; width: 3px; height: 3px; animation-duration: 5269ms; animation-delay: 2114ms; filter: blur(1px);}.g-snows > li:nth-child(95){left: 36%; width: 1px; height: 1px; animation-duration: 8327ms; animation-delay: 2804ms; filter: blur(0px);}.g-snows > li:nth-child(96){left: 91%; width: 4px; height: 4px; animation-duration: 5204ms; animation-delay: 625ms; filter: blur(1px);}.g-snows > li:nth-child(97){left: 17%; width: 1px; height: 1px; animation-duration: 5080ms; animation-delay: 4653ms; filter: blur(0px);}.g-snows > li:nth-child(98){left: 77%; width: 2px; height: 2px; animation-duration: 6485ms; animation-delay: 3683ms; filter: blur(0px);}.g-snows > li:nth-child(99){left: 11%; width: 3px; height: 3px; animation-duration: 13239ms; animation-delay: 4686ms; filter: blur(0px);}.g-snows > li:nth-child(100){left: 76%; width: 2px; height: 2px; animation-duration: 11196ms; animation-delay: 4461ms; filter: blur(1px);}@keyframes snow-drop{0%{transform: translate(0, 0); opacity: 0.5; margin-left: 0;}10%{margin-left: 15px;}20%{margin-left: 20px;}25%{transform: translate(0, 166.6666666667px); opacity: 0.75;}30%{margin-left: 15px;}40%{margin-left: 0;}50%{transform: translate(0, 333.3333333333px); opacity: 1; margin-left: -15px;}60%{margin-left: -20px;}70%{margin-left: -15px;}75%{transform: translate(0, 500px); opacity: 0.5;}80%{margin-left: 0;}100%{transform: translate(0, 666.6666666667px); opacity: 0;}}
<ul class="g-snows" id="jsi-snows"> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
#app:before, #app:after {
position: absolute;
top: -600px;
left: 0;
bottom: 0;
right: 0;
background-image: radial-gradient(3px 3px at 279px 403px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 375px 571px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 430px 354px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 322px 73px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 331px 283px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 147px 79px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 210px 240px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 228px 187px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 499px 27px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 472px 376px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 78px 249px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 473px 325px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 58px 137px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 77px 11px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 354px 446px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 527px 208px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 539px 491px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 234px 390px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 153px 359px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 332px 5px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 140px 592px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 212px 172px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 499px 49px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 34px 260px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 587px 421px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 158px 553px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 537px 542px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 355px 26px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 464px 69px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 74px 72px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 398px 530px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 514px 283px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 97px 53px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 518px 232px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 299px 559px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 87px 327px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 356px 390px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 194px 474px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 347px 553px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 125px 494px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 27px 540px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 167px 260px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 25px 99px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 254px 207px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 356px 144px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 67px 366px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 94px 480px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 112px 24px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 115px 367px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 356px 258px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 231px 494px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 259px 517px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 8px 310px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 233px 405px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 496px 574px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 401px 56px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 113px 110px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 547px 352px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 311px 488px, rgba(255, 255, 255, 0.7) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 236px 237px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 84px 377px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 467px 216px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 367px 269px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 462px 371px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 345px 69px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 361px 316px, rgba(255, 255, 255, 0.6) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 491px 571px, white 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 411px 157px, rgba(255, 255, 255, 0.9) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 315px 246px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 342px 252px, rgba(255, 255, 255, 0.8) 50%, rgba(0, 0, 0, 0));
background-size: 600px 600px;
animation: snow 10s linear infinite;
content: "";
}
#app:after {
margin-left: -200px;
animation-duration: 40s;
z-index: 1;
pointer-events: none;
}
#app:before {
animation-duration: 60s;
margin-left: -300px;
filter: blur(1.5px);
pointer-events: none;
z-index: 1;
}
@keyframes snow {
to {
transform: translateY(600px);
}
}
console.log('ESTAMOS TESTANDO')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment