2 lines
17 KiB
CSS
2 lines
17 KiB
CSS
|
snowfall{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50000000;display:block;font-size:40px;overflow:hidden;pointer-events:none}snowfall snowflake{position:absolute;top:0;left:0;display:flex;justify-content:center;width:100px;height:100px}snowfall snowflake span{align-self:center}snowfall snowflake img{align-self:center;width:20px}snowfall snowflake:nth-child(50){animation:animation-snowflake-50 linear infinite;animation-duration:13.1s;animation-delay:-1.1s}@keyframes animation-snowflake-50{0%{left:85%;top:calc(0% - 100px);transform:scale(1.058) rotate3d(.36,.38,.25,0deg)}100%{left:114.1%;top:calc(100% + 100px);transform:scale(1.058) rotate3d(.35,.84,.72,997deg)}}snowfall snowflake:nth-child(49){animation:animation-snowflake-49 linear infinite;animation-duration:12s;animation-delay:-14.8s}@keyframes animation-snowflake-49{0%{left:26%;top:calc(0% - 100px);transform:scale(.637) rotate3d(.22,.52,.15,0deg)}100%{left:16%;top:calc(100% + 100px);transform:scale(.637) rotate3d(.12,.67,.79,-1212deg)}}snowfall snowflake:nth-child(48){animation:animation-snowflake-48 linear infinite;animation-duration:11.8s;animation-delay:-10.4s}@keyframes animation-snowflake-48{0%{left:3%;top:calc(0% - 100px);transform:scale(1.235) rotate3d(.92,.78,.97,0deg)}100%{left:26.8%;top:calc(100% + 100px);transform:scale(1.235) rotate3d(.75,.86,.08,-1042deg)}}snowfall snowflake:nth-child(47){animation:animation-snowflake-47 linear infinite;animation-duration:9.2s;animation-delay:-1s}@keyframes animation-snowflake-47{0%{left:50%;top:calc(0% - 100px);transform:scale(1.046) rotate3d(.88,.19,.75,0deg)}100%{left:75.1%;top:calc(100% + 100px);transform:scale(1.046) rotate3d(.22,.68,.67,-1287deg)}}snowfall snowflake:nth-child(46){animation:animation-snowflake-46 linear infinite;animation-duration:15.8s;animation-delay:-15.1s}@keyframes animation-snowflake-46{0%{left:78%;top:calc(0% - 100px);transform:scale(1.146) rotate3d(.95,.06,.46,0deg)}100%{left:67%;top:calc(100% + 100px);transform:scale(1.146) rotate3d(.79,.01,.63,1235deg)}}snowfall snowflake:nth-child(45){animation:animation-snowflake-45 linear infinite;animation-duration:13.4s;animation-delay:-15.5s}@keyframes animation-snowflake-45{0%{left:22%;top:calc(0% - 100px);transform:scale(.705) rotate3d(.2,1,.33,0deg)}100%{left:22.5%;top:calc(100% + 100px);transform:scale(.705) rotate3d(.99,.94,.9,1293deg)}}snowfall snowflake:nth-child(44){animation:animation-snowflake-44 linear infinite;animation-duration:11.3s;animation-delay:-15.7s}@keyframes animation-snowflake-44{0%{left:74%;top:calc(0% - 100px);transform:scale(.87) rotate3d(.89,.22,.95,0deg)}100%{left:58.7%;top:calc(100% + 100px);transform:scale(.87) rotate3d(.77,.8,.04,1038deg)}}snowfall snowflake:nth-child(43){animation:animation-snowflake-43 linear infinite;animation-duration:14.8s;animation-delay:-14s}@keyframes animation-snowflake-43{0%{left:57%;top:calc(0% - 100px);transform:scale(1.103) rotate3d(.11,.59,.53,0deg)}100%{left:55.6%;top:calc(100% + 100px);transform:scale(1.103) rotate3d(.84,.39,.31,955deg)}}snowfall snowflake:nth-child(42){animation:animation-snowflake-42 linear infinite;animation-duration:8.1s;animation-delay:-7.8s}@keyframes animation-snowflake-42{0%{left:91%;top:calc(0% - 100px);transform:scale(1.249) rotate3d(.56,.42,.15,0deg)}100%{left:81.8%;top:calc(100% + 100px);transform:scale(1.249) rotate3d(.16,.03,.8,1214deg)}}snowfall snowflake:nth-child(41){animation:animation-snowflake-41 linear infinite;animation-duration:15.9s;animation-delay:-11.1s}@keyframes animation-snowflake-41{0%{left:66%;top:calc(0% - 100px);transform:scale(1.389) rotate3d(.91,.12,.21,0deg)}100%{left:105.3%;top:calc(100% + 100px);transform:scale(1.389) rotate3d(.31,.97,.5,-885deg)}}snowfall snowflake:nth-child(40){animation:animation-snowflake-40 linear infinite;animation-duration:14.4s;animation-delay:-4.2s}@keyframes animation-snowflake-40{0%{left:3%;top:calc(0% - 100px);transform:scale(1.247) rotate3d(.38,.39,.66,0deg)}100%{left:23.7%;top:calc(100% + 100px);transform:scale(1.247) rotate3d(.98,.66,.46,999deg)}}snowfall snowflake:nth-child(39){animation:an
|