分享一个唯美雪花界面
先看效果：
再看代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雪title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<style>
body {
height: 100vh;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
overflow: hidden;
filter: drop-shadow(0 0 10px white);
}
.snow {
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
}
.snow:nth-child(1) {
opacity: 0.6217;
transform: translate(17.2317vw, -10px) scale(0.3404);
animation: fall-1 20s -26s linear infinite;
}
@keyframes fall-1 {
37.844% {
transform: translate(9.4828vw, 37.844vh) scale(0.3404);
}
to {
transform: translate(13.35725vw, 100vh) scale(0.3404);
}
}
.snow:nth-child(2) {
opacity: 0.9093;
transform: translate(80.2949vw, -10px) scale(0.623);
animation: fall-2 30s -14s linear infinite;
}
@keyframes fall-2 {
58.755% {
transform: translate(89.1814vw, 58.755vh) scale(0.623);
}
to {
transform: translate(84.73815vw, 100vh) scale(0.623);
}
}
.snow:nth-child(3) {
opacity: 0.9338;
transform: translate(55.9007vw, -10px) scale(0.1656);
animation: fall-3 23s -22s linear infinite;
}
@keyframes fall-3 {
50.482% {
transform: translate(56.6019vw, 50.482vh) scale(0.1656);
}
to {
transform: translate(56.2513vw, 100vh) scale(0.1656);
}
}
.snow:nth-child(4) {
opacity: 0.7496;
transform: translate(2.0723vw, -10px) scale(0.6029);
animation: fall-4 10s -3s linear infinite;
}
@keyframes fall-4 {
75.855% {
transform: translate(8.0775vw, 75.855vh) scale(0.6029);
}
to {
transform: translate(5.0749vw, 100vh) scale(0.6029);
}
}
.snow:nth-child(5) {
opacity: 0.0833;
transform: translate(83.9379vw, -10px) scale(0.4666);
animation: fall-5 15s -23s linear infinite;
}
@keyframes fall-5 {
36.272% {
transform: translate(87.908vw, 36.272vh) scale(0.4666);
}
to {
transform: translate(85.92295vw, 100vh) scale(0.4666);
}
}
.snow:nth-child(6) {
opacity: 0.2174;
transform: translate(61.4443vw, -10px) scale(0.3971);
animation: fall-6 12s -5s linear infinite;
}
@keyframes fall-6 {
41.801% {
transform: translate(65.2743vw, 41.801vh) scale(0.3971);
}
to {
transform: translate(63.3593vw, 100vh) scale(0.3971);
}
}
.snow:nth-child(7) {
opacity: 0.8824;
transform: translate(41.2849vw, -10px) scale(0.2143);
animation: fall-7 16s -24s linear infinite;
}
@keyframes fall-7 {
74.524% {
transform: translate(43.9609vw, 74.524vh) scale(0.2143);
}
to {
transform: translate(42.6229vw, 100vh) scale(0.2143);
}
}
.snow:nth-child(8) {
opacity: 0.1577;
transform: translate(96.0659vw, -10px) scale(0.9717);
animation: fall-8 29s -8s linear infinite;
}
@keyframes fall-8 {
66.889% {
transform: translate(89.8076vw, 66.889vh) scale(0.9717);
}
to {
transform: translate(92.93675vw, 100vh) scale(0.9717);
}
}
.snow:nth-child(9) {
opacity: 0.3241;
transform: translate(19.8854vw, -10px) scale(0.0981);
animation: fall-9 26s -5s linear infinite;
}
@keyframes fall-9 {
49.161% {
transform: translate(27.4984vw, 49.161vh) scale(0.0981);
}
to {
transform: translate(23.6919vw, 100vh) scale(0.0981);
}
}
.snow:nth-child(10) {
opacity: 0.0517;
transform: translate(88.2356vw, -10px) scale(0.6757);
animation: fall-10 19s -27s linear infinite;
}
@keyframes fall-10 {
55.671% {
transform: translate(93.3701vw, 55.671vh) scale(0.6757);
}
to {
transform: translate(90.80285vw, 100vh) scale(0.6757);
}
}
.snow:nth-child(11) {
opacity: 0.682;
transform: translate(93.6378vw, -10px) scale(0.6172);
animation: fall-11 10s -25s linear infinite;
}
@keyframes fall-11 {
50.059% {
transform: translate(83.672vw, 50.059vh) scale(0.6172);
}
to {
transform: translate(88.6549vw, 100vh) scale(0.6172);
}
}
.snow:nth-child(12) {
opacity: 0.3735;
transform: translate(83.2183vw, -10px) scale(0.8379);
animation: fall-12 27s -4s linear infinite;
}
@keyframes fall-12 {
41.677% {
transform: translate(93.1573vw, 41.677vh) scale(0.8379);
}
to {
transform: translate(88.1878vw, 100vh) scale(0.8379);
}
}
.snow:nth-child(13) {
opacity: 0.1295;
transform: translate(15.6283vw, -10px) scale(0.5831);
animation: fall-13 25s -15s linear infinite;
}
@keyframes fall-13 {
54.347% {
transform: translate(16.7282vw, 54.347vh) scale(0.5831);
}
to {
transform: translate(16.17825vw, 100vh) scale(0.5831);
}
}
.snow:nth-child(14) {
opacity: 0.6214;
transform: translate(98.5865vw, -10px) scale(0.6709);
animation: fall-14 30s -28s linear infinite;
}
@keyframes fall-14 {
56.23% {
transform: translate(99.5441vw, 56.23vh) scale(0.6709);
}
to {
transform: translate(99.0653vw, 100vh) scale(0.6709);
}
}
.snow:nth-child(15) {
opacity: 0.6976;
transform: translate(58.3811vw, -10px) scale(0.0015);
animation: fall-15 30s -19s linear infinite;
}
@keyframes fall-15 {
38.919% {
transform: translate(66.2232vw, 38.919vh) scale(0.0015);
}
to {
transform: translate(62.30215vw, 100vh) scale(0.0015);
}
}
.snow:nth-child(16) {
opacity: 0.7649;
transform: translate(96.0897vw, -10px) scale(0.4067);
animation: fall-16 10s -6s linear infinite;
}
@keyframes fall-16 {
34.481% {
transform: translate(89.6102vw, 34.481vh) scale(0.4067);
}
to {
transform: translate(92.84995vw, 100vh) scale(0.4067);
}
}
.snow:nth-child(17) {
opacity: 0.5499;
transform: translate(35.8163vw, -10px) scale(0.2318);
animation: fall-17 25s -19s linear infinite;
}
@keyframes fall-17 {
41.679% {
transform: translate(28.179vw, 41.679vh) scale(0.2318);
}
to {
transform: translate(31.99765vw, 100vh) scale(0.2318);
}
}
.snow:nth-child(18) {
opacity: 0.9397;
transform: translate(63.0137vw, -10px) scale(0.3776);
animation: fall-18 27s -21s linear infinite;
}
@keyframes fall-18 {
42.7% {
transform: translate(72.0404vw, 42.7vh) scale(0.3776);
}
to {
transform: translate(67.52705vw, 100vh) scale(0.3776);
}
}
.snow:nth-child(19) {
opacity: 0.6216;
transform: translate(89.5532vw, -10px) scale(0.8441);
animation: fall-19 27s -7s linear infinite;
}
@keyframes fall-19 {
77.918% {
transform: translate(93.5446vw, 77.918vh) scale(0.8441);
}
to {
transform: translate(91.5489vw, 100vh) scale(0.8441);
}
}
.snow:nth-child(20) {
opacity: 0.7876;
transform: translate(70.0684vw, -10px) scale(0.7265);
animation: fall-20 28s -27s linear infinite;
}
@keyframes fall-20 {
50.055% {
transform: translate(75.0741vw, 50.055vh) scale(0.7265);
}
to {
transform: translate(72.57125vw, 100vh) scale(0.7265);
}
}
.snow:nth-child(21) {
opacity: 0.6798;
transform: translate(54.6079vw, -10px) scale(0.5285);
animation: fall-21 29s -26s linear infinite;
}
@keyframes fall-21 {
32.526% {
transform: translate(48.3991vw, 32.526vh) scale(0.5285);
}
to {
transform: translate(51.5035vw, 100vh) scale(0.5285);
}
}
.snow:nth-child(22) {
opacity: 0.8426;
transform: translate(85.2982vw, -10px) scale(0.8384);
animation: fall-22 27s -15s linear infinite;
}
@keyframes fall-22 {
56.682% {
transform: translate(85.2582vw, 56.682vh) scale(0.8384);
}
to {
transform: translate(85.2782vw, 100vh) scale(0.8384);
}
}
.snow:nth-child(23) {
opacity: 0.3847;
transform: translate(44.0697vw, -10px) scale(0.8299);
animation: fall-23 12s -11s linear infinite;
}
@keyframes fall-23 {
79.499% {
transform: translate(45.2424vw, 79.499vh) scale(0.8299);
}
to {
transform: translate(44.65605vw, 100vh) scale(0.8299);
}
}
.snow:nth-child(24) {
opacity: 0.3975;
transform: translate(13.8565vw, -10px) scale(0.9217);
animation: fall-24 19s -23s linear infinite;
}
@keyframes fall-24 {
46.652% {
transform: translate(22.268vw, 46.652vh) scale(0.9217);
}
to {
transform: translate(18.06225vw, 100vh) scale(0.9217);
}
}
.snow:nth-child(25) {
opacity: 0.3019;
transform: translate(58.848vw, -10px) scale(0.7255);
animation: fall-25 26s -7s linear infinite;
}
@keyframes fall-25 {
62.576% {
transform: translate(52.1112vw, 62.576vh) scale(0.7255);
}
to {
transform: translate(55.4796vw, 100vh) scale(0.7255);
}
}
.snow:nth-child(26) {
opacity: 0.7737;
transform: translate(73.5259vw, -10px) scale(0.5706);
animation: fall-26 12s -30s linear infinite;
}
@keyframes fall-26 {
62.665% {
transform: translate(81.2453vw, 62.665vh) scale(0.5706);
}
to {
transform: translate(77.3856vw, 100vh) scale(0.5706);
}
}
.snow:nth-child(27) {
opacity: 0.752;
transform: translate(81.953vw, -10px) scale(0.7906);
animation: fall-27 20s -25s linear infinite;
}
@keyframes fall-27 {
43.053% {
transform: translate(76.9789vw, 43.053vh) scale(0.7906);
}
to {
transform: translate(79.46595vw, 100vh) scale(0.7906);
}
}
.snow:nth-child(28) {
opacity: 0.0596;
transform: translate(16.2128vw, -10px) scale(0.7074);
animation: fall-28 23s -17s linear infinite;
}
@keyframes fall-28 {
39.905% {
transform: translate(7.7819vw, 39.905vh) scale(0.7074);
}
to {
transform: translate(11.99735vw, 100vh) scale(0.7074);
}
}
.snow:nth-child(29) {
opacity: 0.4343;
transform: translate(99.9681vw, -10px) scale(0.0928);
animation: fall-29 15s -10s linear infinite;
}
@keyframes fall-29 {
67.634% {
transform: translate(105.4413vw, 67.634vh) scale(0.0928);
}
to {
transform: translate(102.7047vw, 100vh) scale(0.0928);
}
}
.snow:nth-child(30) {
opacity: 0.6169;
transform: translate(22.2011vw, -10px) scale(0.0598);
animation: fall-30 28s -7s linear infinite;
}
@keyframes fall-30 {
39.533% {
transform: translate(12.4782vw, 39.533vh) scale(0.0598);
}
to {
transform: translate(17.33965vw, 100vh) scale(0.0598);
}
}
.snow:nth-child(31) {
opacity: 0.0386;
transform: translate(42.1573vw, -10px) scale(0.0151);
animation: fall-31 13s -16s linear infinite;
}
@keyframes fall-31 {
48.945% {
transform: translate(34.1896vw, 48.945vh) scale(0.0151);
}
to {
transform: translate(38.17345vw, 100vh) scale(0.0151);
}
}
.snow:nth-child(32) {
opacity: 0.0617;
transform: translate(39.0841vw, -10px) scale(0.8597);
animation: fall-32 14s -5s linear infinite;
}
@keyframes fall-32 {
39.981% {
transform: translate(36.0721vw, 39.981vh) scale(0.8597);
}
to {
transform: translate(37.5781vw, 100vh) scale(0.8597);
}
}
.snow:nth-child(33) {
opacity: 0.9674;
transform: translate(73.1023vw, -10px) scale(0.7075);
animation: fall-33 12s -5s linear infinite;
}
@keyframes fall-33 {
52.578% {
transform: translate(69.3223vw, 52.578vh) scale(0.7075);
}
to {
transform: translate(71.2123vw, 100vh) scale(0.7075);
}
}
.snow:nth-child(34) {
opacity: 0.2133;
transform: translate(13.1777vw, -10px) scale(0.9286);
animation: fall-34 30s -23s linear infinite;
}
@keyframes fall-34 {
40.353% {
transform: translate(10.2724vw, 40.353vh) scale(0.9286);
}
to {
transform: translate(11.72505vw, 100vh) scale(0.9286);
}
}
.snow:nth-child(35) {
opacity: 0.4328;
transform: translate(29.9217vw, -10px) scale(0.5746);
animation: fall-35 29s -26s linear infinite;
}
@keyframes fall-35 {
74.358% {
transform: translate(22.441vw, 74.358vh) scale(0.5746);
}
to {
transform: translate(26.18135vw, 100vh) scale(0.5746);
}
}
.snow:nth-child(36) {
opacity: 0.6733;
transform: translate(9.3641vw, -10px) scale(0.6553);
animation: fall-36 20s -8s linear infinite;
}
@keyframes fall-36 {
51.016% {
transform: translate(6.4292vw, 51.016vh) scale(0.6553);
}
to {
transform: translate(7.89665vw, 100vh) scale(0.6553);
}
}
.snow:nth-child(37) {
opacity: 0.5421;
transform: translate(92.6943vw, -10px) scale(0.7119);
animation: fall-37 30s -29s linear infinite;
}
@keyframes fall-37 {
70.714% {
transform: translate(94.0531vw, 70.714vh) scale(0.7119);
}
to {
transform: translate(93.3737vw, 100vh) scale(0.7119);
}
}
.snow:nth-child(38) {
opacity: 0.1071;
transform: translate(48.6153vw, -10px) scale(0.1067);
animation: fall-38 15s -11s linear infinite;
}
@keyframes fall-38 {
64.343% {
transform: translate(53.9951vw, 64.343vh) scale(0.1067);
}
to {
transform: translate(51.3052vw, 100vh) scale(0.1067);
}
}
.snow:nth-child(39) {
opacity: 0.2562;
transform: translate(20.7254vw, -10px) scale(0.4099);
animation: fall-39 10s -11s linear infinite;
}
@keyframes fall-39 {
60.305% {
transform: translate(25.9641vw, 60.305vh) scale(0.4099);
}
to {
transform: translate(23.34475vw, 100vh) scale(0.4099);
}
}
.snow:nth-child(40) {
opacity: 0.8714;
transform: translate(12.6754vw, -10px) scale(0.4851);
animation: fall-40 29s -23s linear infinite;
}
@keyframes fall-40 {
49.025% {
transform: translate(13.2587vw, 49.025vh) scale(0.4851);
}
to {
transform: translate(12.96705vw, 100vh) scale(0.4851);
}
}
.snow:nth-child(41) {
opacity: 0.0192;
transform: translate(37.6961vw, -10px) scale(0.0788);
animation: fall-41 17s -25s linear infinite;
}
@keyframes fall-41 {
35.198% {
transform: translate(45.081vw, 35.198vh) scale(0.0788);
}
to {
transform: translate(41.38855vw, 100vh) scale(0.0788);
}
}
.snow:nth-child(42) {
opacity: 0.0009;
transform: translate(10.2928vw, -10px) scale(0.594);
animation: fall-42 10s -14s linear infinite;
}
@keyframes fall-42 {
43.425% {
transform: translate(15.2734vw, 43.425vh) scale(0.594);
}
to {
transform: translate(12.7831vw, 100vh) scale(0.594);
}
}
.snow:nth-child(43) {
opacity: 0.3738;
transform: translate(59.7966vw, -10px) scale(0.3308);
animation: fall-43 19s -11s linear infinite;
}
@keyframes fall-43 {
44.356% {
transform: translate(65.1491vw, 44.356vh) scale(0.3308);
}
to {
transform: translate(62.47285vw, 100vh) scale(0.3308);
}
}
.snow:nth-child(44) {
opacity: 0.6375;
transform: translate(36.1646vw, -10px) scale(0.4064);
animation: fall-44 25s -25s linear infinite;
}
@keyframes fall-44 {
37.63% {
transform: translate(31.5781vw, 37.63vh) scale(0.4064);
}
to {
transform: translate(33.87135vw, 100vh) scale(0.4064);
}
}
.snow:nth-child(45) {
opacity: 0.2011;
transform: translate(38.8829vw, -10px) scale(0.9279);
animation: fall-45 24s -18s linear infinite;
}
@keyframes fall-45 {
79.431% {
transform: translate(46.4471vw, 79.431vh) scale(0.9279);
}
to {
transform: translate(42.665vw, 100vh) scale(0.9279);
}
}
.snow:nth-child(46) {
opacity: 0.5334;
transform: translate(87.4782vw, -10px) scale(0.5887);
animation: fall-46 26s -7s linear infinite;
}
@keyframes fall-46 {
74.727% {
transform: translate(96.9408vw, 74.727vh) scale(0.5887);
}
to {
transform: translate(92.2095vw, 100vh) scale(0.5887);
}
}
.snow:nth-child(47) {
opacity: 0.0871;
transform: translate(28.3748vw, -10px) scale(0.7593);
animation: fall-47 26s -6s linear infinite;
}
@keyframes fall-47 {
30.288% {
transform: translate(25.9122vw, 30.288vh) scale(0.7593);
}
to {
transform: translate(27.1435vw, 100vh) scale(0.7593);
}
}
.snow:nth-child(48) {
opacity: 0.0019;
transform: translate(87.4319vw, -10px) scale(0.127);
animation: fall-48 19s -12s linear infinite;
}
@keyframes fall-48 {
61.977% {
transform: translate(92.8453vw, 61.977vh) scale(0.127);
}
to {
transform: translate(90.1386vw, 100vh) scale(0.127);
}
}
.snow:nth-child(49) {
opacity: 0.1615;
transform: translate(62.1377vw, -10px) scale(0.1099);
animation: fall-49 29s -26s linear infinite;
}
@keyframes fall-49 {
45.72% {
transform: translate(67.3532vw, 45.72vh) scale(0.1099);
}
to {
transform: translate(64.74545vw, 100vh) scale(0.1099);
}
}
.snow:nth-child(50) {
opacity: 0.7771;
transform: translate(24.4621vw, -10px) scale(0.313);
animation: fall-50 29s -10s linear infinite;
}
@keyframes fall-50 {
41.085% {
transform: translate(23.9904vw, 41.085vh) scale(0.313);
}
to {
transform: translate(24.22625vw, 100vh) scale(0.313);
}
}
.snow:nth-child(51) {
opacity: 0.8056;
transform: translate(19.8485vw, -10px) scale(0.3896);
animation: fall-51 20s -18s linear infinite;
}
@keyframes fall-51 {
46.67% {
transform: translate(18.547vw, 46.67vh) scale(0.3896);
}
to {
transform: translate(19.19775vw, 100vh) scale(0.3896);
}
}
.snow:nth-child(52) {
opacity: 0.8868;
transform: translate(20.807vw, -10px) scale(0.1373);
animation: fall-52 24s -8s linear infinite;
}
@keyframes fall-52 {
61.45% {
transform: translate(12.6416vw, 61.45vh) scale(0.1373);
}
to {
transform: translate(16.7243vw, 100vh) scale(0.1373);
}
}
.snow:nth-child(53) {
opacity: 0.0075;
transform: translate(78.1071vw, -10px) scale(0.5046);
animation: fall-53 16s -5s linear infinite;
}
@keyframes fall-53 {
73.277% {
transform: translate(80.6646vw, 73.277vh) scale(0.5046);
}
to {
transform: translate(79.38585vw, 100vh) scale(0.5046);
}
}
.snow:nth-child(54) {
opacity: 0.7641;
transform: translate(91.7241vw, -10px) scale(0.863);
animation: fall-54 15s -23s linear infinite;
}
@keyframes fall-54 {
36.678% {
transform: translate(94.0587vw, 36.678vh) scale(0.863);
}
to {
transform: translate(92.8914vw, 100vh) scale(0.863);
}
}
.snow:nth-child(55) {
opacity: 0.6828;
transform: translate(82.7381vw, -10px) scale(0.3318);
animation: fall-55 26s -25s linear infinite;
}
@keyframes fall-55 {
55.263% {
transform: translate(88.5609vw, 55.263vh) scale(0.3318);
}
to {
transform: translate(85.6495vw, 100vh) scale(0.3318);
}
}
.snow:nth-child(56) {
opacity: 0.8838;
transform: translate(22.0524vw, -10px) scale(0.5949);
animation: fall-56 14s -10s linear infinite;
}
@keyframes fall-56 {
39.412% {
transform: translate(16.7126vw, 39.412vh) scale(0.5949);
}
to {
transform: translate(19.3825vw, 100vh) scale(0.5949);
}
}
.snow:nth-child(57) {
opacity: 0.4214;
transform: translate(13.1241vw, -10px) scale(0.5551);
animation: fall-57 25s -8s linear infinite;
}
@keyframes fall-57 {
32.139% {
transform: translate(4.1357vw, 32.139vh) scale(0.5551);
}
to {
transform: translate(8.6299vw, 100vh) scale(0.5551);
}
}
.snow:nth-child(58) {
opacity: 0.4545;
transform: translate(90.1295vw, -10px) scale(0.2701);
animation: fall-58 11s -24s linear infinite;
}
@keyframes fall-58 {
79.737% {
transform: translate(98.8176vw, 79.737vh) scale(0.2701);
}
to {
transform: translate(94.47355vw, 100vh) scale(0.2701);
}
}
.snow:nth-child(59) {
opacity: 0.2507;
transform: translate(4.6701vw, -10px) scale(0.7428);
animation: fall-59 14s -29s linear infinite;
}
@keyframes fall-59 {
63.571% {
transform: translate(-5.0798vw, 63.571vh) scale(0.7428);
}
to {
transform: translate(-0.20485vw, 100vh) scale(0.7428);
}
}
.snow:nth-child(60) {
opacity: 0.1694;
transform: translate(56.394vw, -10px) scale(0.7725);
animation: fall-60 15s -16s linear infinite;
}
@keyframes fall-60 {
56.974% {
transform: translate(46.4124vw, 56.974vh) scale(0.7725);
}
to {
transform: translate(51.4032vw, 100vh) scale(0.7725);
}
}
.snow:nth-child(61) {
opacity: 0.0729;
transform: translate(25.293vw, -10px) scale(0.2993);
animation: fall-61 25s -19s linear infinite;
}
@keyframes fall-61 {
53.016% {
transform: translate(19.4671vw, 53.016vh) scale(0.2993);
}
to {
transform: translate(22.38005vw, 100vh) scale(0.2993);
}
}
.snow:nth-child(62) {
opacity: 0.0175;
transform: translate(51.5571vw, -10px) scale(0.3276);
animation: fall-62 16s -3s linear infinite;
}
@keyframes fall-62 {
45.777% {
transform: translate(56.1327vw, 45.777vh) scale(0.3276);
}
to {
transform: translate(53.8449vw, 100vh) scale(0.3276);
}
}
.snow:nth-child(63) {
opacity: 0.9468;
transform: translate(58.7512vw, -10px) scale(0.1242);
animation: fall-63 22s -10s linear infinite;
}
@keyframes fall-63 {
79.05% {
transform: translate(55.6649vw, 79.05vh) scale(0.1242);
}
to {
transform: translate(57.20805vw, 100vh) scale(0.1242);
}
}
.snow:nth-child(64) {
opacity: 0.2599;
transform: translate(83.4491vw, -10px) scale(0.2366);
animation: fall-64 24s -6s linear infinite;
}
@keyframes fall-64 {
47.306% {
transform: translate(82.0137vw, 47.306vh) scale(0.2366);
}
to {
transform: translate(82.7314vw, 100vh) scale(0.2366);
}
}
.snow:nth-child(65) {
opacity: 0.8126;
transform: translate(41.6017vw, -10px) scale(0.819);
animation: fall-65 30s -29s linear infinite;
}
@keyframes fall-65 {
57.014% {
transform: translate(48.3421vw, 57.014vh) scale(0.819);
}
to {
transform: translate(44.9719vw, 100vh) scale(0.819);
}
}
.snow:nth-child(66) {
opacity: 0.1893;
transform: translate(96.7784vw, -10px) scale(0.1714);
animation: fall-66 21s -29s linear infinite;
}
@keyframes fall-66 {
66.137% {
transform: translate(88.5236vw, 66.137vh) scale(0.1714);
}
to {
transform: translate(92.651vw, 100vh) scale(0.1714);
}
}
.snow:nth-child(67) {
opacity: 0.6853;
transform: translate(19.2497vw, -10px) scale(0.5131);
animation: fall-67 22s -8s linear infinite;
}
@keyframes fall-67 {
48.398% {
transform: translate(28.8136vw, 48.398vh) scale(0.5131);
}
to {
transform: translate(24.03165vw, 100vh) scale(0.5131);
}
}
.snow:nth-child(68) {
opacity: 0.2426;
transform: translate(52.1924vw, -10px) scale(0.8455);
animation: fall-68 27s -24s linear infinite;
}
@keyframes fall-68 {
35.282% {
transform: translate(49.0458vw, 35.282vh) scale(0.8455);
}
to {
transform: translate(50.6191vw, 100vh) scale(0.8455);
}
}
.snow:nth-child(69) {
opacity: 0.4656;
transform: translate(21.735vw, -10px) scale(0.7627);
animation: fall-69 21s -6s linear infinite;
}
@keyframes fall-69 {
67.285% {
transform: translate(16.2574vw, 67.285vh) scale(0.7627);
}
to {
transform: translate(18.9962vw, 100vh) scale(0.7627);
}
}
.snow:nth-child(70) {
opacity: 0.6331;
transform: translate(94.1498vw, -10px) scale(0.5192);
animation: fall-70 30s -5s linear infinite;
}
@keyframes fall-70 {
74.55% {
transform: translate(101.8258vw, 74.55vh) scale(0.5192);
}
to {
transform: translate(97.9878vw, 100vh) scale(0.5192);
}
}
.snow:nth-child(71) {
opacity: 0.4703;
transform: translate(53.1685vw, -10px) scale(0.5879);
animation: fall-71 17s -4s linear infinite;
}
@keyframes fall-71 {
34.068% {
transform: translate(54.1132vw, 34.068vh) scale(0.5879);
}
to {
transform: translate(53.64085vw, 100vh) scale(0.5879);
}
}
.snow:nth-child(72) {
opacity: 0.5645;
transform: translate(62.5978vw, -10px) scale(0.4128);
animation: fall-72 18s -15s linear infinite;
}
@keyframes fall-72 {
32.071% {
transform: translate(56.6531vw, 32.071vh) scale(0.4128);
}
to {
transform: translate(59.62545vw, 100vh) scale(0.4128);
}
}
.snow:nth-child(73) {
opacity: 0.6144;
transform: translate(98.7405vw, -10px) scale(0.8211);
animation: fall-73 26s -13s linear infinite;
}
@keyframes fall-73 {
33.01% {
transform: translate(100.9372vw, 33.01vh) scale(0.8211);
}
to {
transform: translate(99.83885vw, 100vh) scale(0.8211);
}
}
.snow:nth-child(74) {
opacity: 0.8679;
transform: translate(91.0505vw, -10px) scale(0.1526);
animation: fall-74 29s -12s linear infinite;
}
@keyframes fall-74 {
74.994% {
transform: translate(93.0062vw, 74.994vh) scale(0.1526);
}
to {
transform: translate(92.02835vw, 100vh) scale(0.1526);
}
}
.snow:nth-child(75) {
opacity: 0.2903;
transform: translate(18.2233vw, -10px) scale(0.8734);
animation: fall-75 14s -3s linear infinite;
}
@keyframes fall-75 {
76.868% {
transform: translate(27.4265vw, 76.868vh) scale(0.8734);
}
to {
transform: translate(22.8249vw, 100vh) scale(0.8734);
}
}
.snow:nth-child(76) {
opacity: 0.5985;
transform: translate(11.2294vw, -10px) scale(0.797);
animation: fall-76 10s -22s linear infinite;
}
@keyframes fall-76 {
38.291% {
transform: translate(12.3435vw, 38.291vh) scale(0.797);
}
to {
transform: translate(11.78645vw, 100vh) scale(0.797);
}
}
.snow:nth-child(77) {
opacity: 0.704;
transform: translate(97.4282vw, -10px) scale(0.9598);
animation: fall-77 26s -26s linear infinite;
}
@keyframes fall-77 {
50.059% {
transform: translate(102.5913vw, 50.059vh) scale(0.9598);
}
to {
transform: translate(100.00975vw, 100vh) scale(0.9598);
}
}
.snow:nth-child(78) {
opacity: 0.1266;
transform: translate(21.4021vw, -10px) scale(0.37);
animation: fall-78 11s -7s linear infinite;
}
@keyframes fall-78 {
46.532% {
transform: translate(28.9898vw, 46.532vh) scale(0.37);
}
to {
transform: translate(25.19595vw, 100vh) scale(0.37);
}
}
.snow:nth-child(79) {
opacity: 0.906;
transform: translate(93.7235vw, -10px) scale(0.2108);
animation: fall-79 19s -5s linear infinite;
}
@keyframes fall-79 {
69.521% {
transform: translate(89.5683vw, 69.521vh) scale(0.2108);
}
to {
transform: translate(91.6459vw, 100vh) scale(0.2108);
}
}
.snow:nth-child(80) {
opacity: 0.1207;
transform: translate(61.3713vw, -10px) scale(0.8808);
animation: fall-80 21s -7s linear infinite;
}
@keyframes fall-80 {
72.142% {
transform: translate(67.2635vw, 72.142vh) scale(0.8808);
}
to {
transform: translate(64.3174vw, 100vh) scale(0.8808);
}
}
.snow:nth-child(81) {
opacity: 0.2526;
transform: translate(57.8613vw, -10px) scale(0.3706);
animation: fall-81 24s -25s linear infinite;
}
@keyframes fall-81 {
63.283% {
transform: translate(52.8112vw, 63.283vh) scale(0.3706);
}
to {
transform: translate(55.33625vw, 100vh) scale(0.3706);
}
}
.snow:nth-child(82) {
opacity: 0.8629;
transform: translate(64.6413vw, -10px) scale(0.9415);
animation: fall-82 17s -9s linear infinite;
}
@keyframes fall-82 {
45.127% {
transform: translate(56.9004vw, 45.127vh) scale(0.9415);
}
to {
transform: translate(60.77085vw, 100vh) scale(0.9415);
}
}
.snow:nth-child(83) {
opacity: 0.3622;
transform: translate(52.3796vw, -10px) scale(0.4489);
animation: fall-83 10s -26s linear infinite;
}
@keyframes fall-83 {
43.656% {
transform: translate(46.1993vw, 43.656vh) scale(0.4489);
}
to {
transform: translate(49.28945vw, 100vh) scale(0.4489);
}
}
.snow:nth-child(84) {
opacity: 0.8631;
transform: translate(18.8521vw, -10px) scale(0.0198);
animation: fall-84 21s -5s linear infinite;
}
@keyframes fall-84 {
79.804% {
transform: translate(25.4118vw, 79.804vh) scale(0.0198);
}
to {
transform: translate(22.13195vw, 100vh) scale(0.0198);
}
}
.snow:nth-child(85) {
opacity: 0.547;
transform: translate(55.857vw, -10px) scale(0.4955);
animation: fall-85 26s -1s linear infinite;
}
@keyframes fall-85 {
78.733% {
transform: translate(53.69vw, 78.733vh) scale(0.4955);
}
to {
transform: translate(54.7735vw, 100vh) scale(0.4955);
}
}
.snow:nth-child(86) {
opacity: 0.2078;
transform: translate(38.8374vw, -10px) scale(0.9546);
animation: fall-86 20s -30s linear infinite;
}
@keyframes fall-86 {
47.312% {
transform: translate(34.8847vw, 47.312vh) scale(0.9546);
}
to {
transform: translate(36.86105vw, 100vh) scale(0.9546);
}
}
.snow:nth-child(87) {
opacity: 0.8137;
transform: translate(36.9662vw, -10px) scale(0.0565);
animation: fall-87 15s -1s linear infinite;
}
@keyframes fall-87 {
59.893% {
transform: translate(39.3067vw, 59.893vh) scale(0.0565);
}
to {
transform: translate(38.13645vw, 100vh) scale(0.0565);
}
}
.snow:nth-child(88) {
opacity: 0.5699;
transform: translate(31.6324vw, -10px) scale(0.8077);
animation: fall-88 18s -10s linear infinite;
}
@keyframes fall-88 {
53.56% {
transform: translate(41.1254vw, 53.56vh) scale(0.8077);
}
to {
transform: translate(36.3789vw, 100vh) scale(0.8077);
}
}
.snow:nth-child(89) {
opacity: 0.4084;
transform: translate(83.3214vw, -10px) scale(0.0677);
animation: fall-89 21s -15s linear infinite;
}
@keyframes fall-89 {
57.913% {
transform: translate(85.0448vw, 57.913vh) scale(0.0677);
}
to {
transform: translate(84.1831vw, 100vh) scale(0.0677);
}
}
.snow:nth-child(90) {
opacity: 0.1695;
transform: translate(5.8208vw, -10px) scale(0.0984);
animation: fall-90 30s -23s linear infinite;
}
@keyframes fall-90 {
68.254% {
transform: translate(4.8658vw, 68.254vh) scale(0.0984);
}
to {
transform: translate(5.3433vw, 100vh) scale(0.0984);
}
}
.snow:nth-child(91) {
opacity: 0.0625;
transform: translate(74.3408vw, -10px) scale(0.8605);
animation: fall-91 30s -30s linear infinite;
}
@keyframes fall-91 {
31.378% {
transform: translate(68.4103vw, 31.378vh) scale(0.8605);
}
to {
transform: translate(71.37555vw, 100vh) scale(0.8605);
}
}
.snow:nth-child(92) {
opacity: 0.4911;
transform: translate(38.5285vw, -10px) scale(0.5384);
animation: fall-92 29s -1s linear infinite;
}
@keyframes fall-92 {
37.435% {
transform: translate(33.2821vw, 37.435vh) scale(0.5384);
}
to {
transform: translate(35.9053vw, 100vh) scale(0.5384);
}
}
.snow:nth-child(93) {
opacity: 0.975;
transform: translate(32.704vw, -10px) scale(0.7263);
animation: fall-93 27s -16s linear infinite;
}
@keyframes fall-93 {
62.7% {
transform: translate(37.6282vw, 62.7vh) scale(0.7263);
}
to {
transform: translate(35.1661vw, 100vh) scale(0.7263);
}
}
.snow:nth-child(94) {
opacity: 0.5621;
transform: translate(84.4805vw, -10px) scale(0.186);
animation: fall-94 25s -10s linear infinite;
}
@keyframes fall-94 {
42.845% {
transform: translate(84.0514vw, 42.845vh) scale(0.186);
}
to {
transform: translate(84.26595vw, 100vh) scale(0.186);
}
}
.snow:nth-child(95) {
opacity: 0.2996;
transform: translate(45.2354vw, -10px) scale(0.9412);
animation: fall-95 15s -5s linear infinite;
}
@keyframes fall-95 {
65.913% {
transform: translate(45.0463vw, 65.913vh) scale(0.9412);
}
to {
transform: translate(45.14085vw, 100vh) scale(0.9412);
}
}
.snow:nth-child(96) {
opacity: 0.4545;
transform: translate(13.2249vw, -10px) scale(0.7948);
animation: fall-96 23s -6s linear infinite;
}
@keyframes fall-96 {
39.323% {
transform: translate(15.6057vw, 39.323vh) scale(0.7948);
}
to {
transform: translate(14.4153vw, 100vh) scale(0.7948);
}
}
.snow:nth-child(97) {
opacity: 0.5274;
transform: translate(93.1227vw, -10px) scale(0.8413);
animation: fall-97 18s -26s linear infinite;
}
@keyframes fall-97 {
60.502% {
transform: translate(88.191vw, 60.502vh) scale(0.8413);
}
to {
transform: translate(90.65685vw, 100vh) scale(0.8413);
}
}
.snow:nth-child(98) {
opacity: 0.3254;
transform: translate(47.9316vw, -10px) scale(0.0026);
animation: fall-98 17s -8s linear infinite;
}
@keyframes fall-98 {
74.036% {
transform: translate(55.4574vw, 74.036vh) scale(0.0026);
}
to {
transform: translate(51.6945vw, 100vh) scale(0.0026);
}
}
.snow:nth-child(99) {
opacity: 0.5224;
transform: translate(9.9372vw, -10px) scale(0.7135);
animation: fall-99 22s -29s linear infinite;
}
@keyframes fall-99 {
57.403% {
transform: translate(15.9821vw, 57.403vh) scale(0.7135);
}
to {
transform: translate(12.95965vw, 100vh) scale(0.7135);
}
}
.snow:nth-child(100) {
opacity: 0.3649;
transform: translate(22.7812vw, -10px) scale(0.3752);
animation: fall-100 25s -11s linear infinite;
}
@keyframes fall-100 {
41.398% {
transform: translate(29.9843vw, 41.398vh) scale(0.3752);
}
to {
transform: translate(26.38275vw, 100vh) scale(0.3752);
}
}
.snow:nth-child(101) {
opacity: 0.1021;
transform: translate(5.344vw, -10px) scale(0.0475);
animation: fall-101 12s -14s linear infinite;
}
@keyframes fall-101 {
36.443% {
transform: translate(12.1156vw, 36.443vh) scale(0.0475);
}
to {
transform: translate(8.7298vw, 100vh) scale(0.0475);
}
}
.snow:nth-child(102) {
opacity: 0.7423;
transform: translate(49.2603vw, -10px) scale(0.3501);
animation: fall-102 12s -4s linear infinite;
}
@keyframes fall-102 {
66.478% {
transform: translate(57.0902vw, 66.478vh) scale(0.3501);
}
to {
transform: translate(53.17525vw, 100vh) scale(0.3501);
}
}
.snow:nth-child(103) {
opacity: 0.3887;
transform: translate(90.1035vw, -10px) scale(0.9855);
animation: fall-103 25s -22s linear infinite;
}
@keyframes fall-103 {
35.872% {
transform: translate(95.5054vw, 35.872vh) scale(0.9855);
}
to {
transform: translate(92.80445vw, 100vh) scale(0.9855);
}
}
.snow:nth-child(104) {
opacity: 0.6394;
transform: translate(42.3093vw, -10px) scale(0.6481);
animation: fall-104 13s -30s linear infinite;
}
@keyframes fall-104 {
79.073% {
transform: translate(44.4857vw, 79.073vh) scale(0.6481);
}
to {
transform: translate(43.3975vw, 100vh) scale(0.6481);
}
}
.snow:nth-child(105) {
opacity: 0.5715;
transform: translate(97.2292vw, -10px) scale(0.1052);
animation: fall-105 22s -23s linear infinite;
}
@keyframes fall-105 {
66.186% {
transform: translate(102.0887vw, 66.186vh) scale(0.1052);
}
to {
transform: translate(99.65895vw, 100vh) scale(0.1052);
}
}
.snow:nth-child(106) {
opacity: 0.8976;
transform: translate(48.956vw, -10px) scale(0.6257);
animation: fall-106 21s -1s linear infinite;
}
@keyframes fall-106 {
74.843% {
transform: translate(43.3558vw, 74.843vh) scale(0.6257);
}
to {
transform: translate(46.1559vw, 100vh) scale(0.6257);
}
}
.snow:nth-child(107) {
opacity: 0.7117;
transform: translate(60.4664vw, -10px) scale(0.719);
animation: fall-107 14s -16s linear infinite;
}
@keyframes fall-107 {
73.789% {
transform: translate(68.9903vw, 73.789vh) scale(0.719);
}
to {
transform: translate(64.72835vw, 100vh) scale(0.719);
}
}
.snow:nth-child(108) {
opacity: 0.9923;
transform: translate(76.3835vw, -10px) scale(0.533);
animation: fall-108 11s -19s linear infinite;
}
@keyframes fall-108 {
38.881% {
transform: translate(67.1161vw, 38.881vh) scale(0.533);
}
to {
transform: translate(71.7498vw, 100vh) scale(0.533);
}
}
.snow:nth-child(109) {
opacity: 0.938;
transform: translate(24.5609vw, -10px) scale(0.6689);
animation: fall-109 20s -16s linear infinite;
}
@keyframes fall-109 {
60.05% {
transform: translate(23.6446vw, 60.05vh) scale(0.6689);
}
to {
transform: translate(24.10275vw, 100vh) scale(0.6689);
}
}
.snow:nth-child(110) {
opacity: 0.7739;
transform: translate(20.2434vw, -10px) scale(0.8667);
animation: fall-110 27s -7s linear infinite;
}
@keyframes fall-110 {
66.712% {
transform: translate(11.241vw, 66.712vh) scale(0.8667);
}
to {
transform: translate(15.7422vw, 100vh) scale(0.8667);
}
}
.snow:nth-child(111) {
opacity: 0.456;
transform: translate(97.0277vw, -10px) scale(0.9527);
animation: fall-111 13s -28s linear infinite;
}
@keyframes fall-111 {
42.07% {
transform: translate(100.5253vw, 42.07vh) scale(0.9527);
}
to {
transform: translate(98.7765vw, 100vh) scale(0.9527);
}
}
.snow:nth-child(112) {
opacity: 0.5007;
transform: translate(67.5078vw, -10px) scale(0.4556);
animation: fall-112 11s -28s linear infinite;
}
@keyframes fall-112 {
46.967% {
transform: translate(66.4902vw, 46.967vh) scale(0.4556);
}
to {
transform: translate(66.999vw, 100vh) scale(0.4556);
}
}
.snow:nth-child(113) {
opacity: 0.2953;
transform: translate(98.4428vw, -10px) scale(0.565);
animation: fall-113 26s -1s linear infinite;
}
@keyframes fall-113 {
57.803% {
transform: translate(108.1159vw, 57.803vh) scale(0.565);
}
to {
transform: translate(103.27935vw, 100vh) scale(0.565);
}
}
.snow:nth-child(114) {
opacity: 0.5802;
transform: translate(5.9751vw, -10px) scale(0.7747);
animation: fall-114 17s -4s linear infinite;
}
@keyframes fall-114 {
35.77% {
transform: translate(2.8215vw, 35.77vh) scale(0.7747);
}
to {
transform: translate(4.3983vw, 100vh) scale(0.7747);
}
}
.snow:nth-child(115) {
opacity: 0.4629;
transform: translate(51.326vw, -10px) scale(0.5749);
animation: fall-115 13s -11s linear infinite;
}
@keyframes fall-115 {
60.396% {
transform: translate(44.8685vw, 60.396vh) scale(0.5749);
}
to {
transform: translate(48.09725vw, 100vh) scale(0.5749);
}
}
.snow:nth-child(116) {
opacity: 0.0431;
transform: translate(41.7908vw, -10px) scale(0.0217);
animation: fall-116 27s -15s linear infinite;
}
@keyframes fall-116 {
40.787% {
transform: translate(39.8837vw, 40.787vh) scale(0.0217);
}
to {
transform: translate(40.83725vw, 100vh) scale(0.0217);
}
}
.snow:nth-child(117) {
opacity: 0.5505;
transform: translate(97.5327vw, -10px) scale(0.688);
animation: fall-117 21s -20s linear infinite;
}
@keyframes fall-117 {
49.068% {
transform: translate(99.0895vw, 49.068vh) scale(0.688);
}
to {
transform: translate(98.3111vw, 100vh) scale(0.688);
}
}
.snow:nth-child(118) {
opacity: 0.3003;
transform: translate(98.4408vw, -10px) scale(0.3721);
animation: fall-118 20s -29s linear infinite;
}
@keyframes fall-118 {
71.579% {
transform: translate(98.427vw, 71.579vh) scale(0.3721);
}
to {
transform: translate(98.4339vw, 100vh) scale(0.3721);
}
}
.snow:nth-child(119) {
opacity: 0.3578;
transform: translate(34.5773vw, -10px) scale(0.0271);
animation: fall-119 15s -13s linear infinite;
}
@keyframes fall-119 {
33.506% {
transform: translate(42.202vw, 33.506vh) scale(0.0271);
}
to {
transform: translate(38.38965vw, 100vh) scale(0.0271);
}
}
.snow:nth-child(120) {
opacity: 0.4044;
transform: translate(0.9911vw, -10px) scale(0.522);
animation: fall-120 18s -6s linear infinite;
}
@keyframes fall-120 {
39.867% {
transform: translate(1.1503vw, 39.867vh) scale(0.522);
}
to {
transform: translate(1.0707vw, 100vh) scale(0.522);
}
}
.snow:nth-child(121) {
opacity: 0.8828;
transform: translate(30.9508vw, -10px) scale(0.4427);
animation: fall-121 23s -28s linear infinite;
}
@keyframes fall-121 {
78.394% {
transform: translate(30.7548vw, 78.394vh) scale(0.4427);
}
to {
transform: translate(30.8528vw, 100vh) scale(0.4427);
}
}
.snow:nth-child(122) {
opacity: 0.9196;
transform: translate(21.4928vw, -10px) scale(0.6127);
animation: fall-122 29s -2s linear infinite;
}
@keyframes fall-122 {
74.831% {
transform: translate(26.9528vw, 74.831vh) scale(0.6127);
}
to {
transform: translate(24.2228vw, 100vh) scale(0.6127);
}
}
.snow:nth-child(123) {
opacity: 0.4765;
transform: translate(71.4398vw, -10px) scale(0.7477);
animation: fall-123 15s -17s linear infinite;
}
@keyframes fall-123 {
32.405% {
transform: translate(74.08vw, 32.405vh) scale(0.7477);
}
to {
transform: translate(72.7599vw, 100vh) scale(0.7477);
}
}
.snow:nth-child(124) {
opacity: 0.85;
transform: translate(34.4539vw, -10px) scale(0.0247);
animation: fall-124 29s -28s linear infinite;
}
@keyframes fall-124 {
38.939% {
transform: translate(26.4727vw, 38.939vh) scale(0.0247);
}
to {
transform: translate(30.4633vw, 100vh) scale(0.0247);
}
}
.snow:nth-child(125) {
opacity: 0.7232;
transform: translate(99.2162vw, -10px) scale(0.5527);
animation: fall-125 26s -20s linear infinite;
}
@keyframes fall-125 {
30.349% {
transform: translate(94.509vw, 30.349vh) scale(0.5527);
}
to {
transform: translate(96.8626vw, 100vh) scale(0.5527);
}
}
.snow:nth-child(126) {
opacity: 0.5389;
transform: translate(44.1809vw, -10px) scale(0.17);
animation: fall-126 29s -13s linear infinite;
}
@keyframes fall-126 {
31.915% {
transform: translate(51.9283vw, 31.915vh) scale(0.17);
}
to {
transform: translate(48.0546vw, 100vh) scale(0.17);
}
}
.snow:nth-child(127) {
opacity: 0.2393;
transform: translate(39.2865vw, -10px) scale(0.8303);
animation: fall-127 15s -28s linear infinite;
}
@keyframes fall-127 {
56.479% {
transform: translate(32.2424vw, 56.479vh) scale(0.8303);
}
to {
transform: translate(35.76445vw, 100vh) scale(0.8303);
}
}
.snow:nth-child(128) {
opacity: 0.637;
transform: translate(36.757vw, -10px) scale(0.8287);
animation: fall-128 11s -21s linear infinite;
}
@keyframes fall-128 {
43.381% {
transform: translate(37.7038vw, 43.381vh) scale(0.8287);
}
to {
transform: translate(37.2304vw, 100vh) scale(0.8287);
}
}
.snow:nth-child(129) {
opacity: 0.881;
transform: translate(31.316vw, -10px) scale(0.6227);
animation: fall-129 27s -30s linear infinite;
}
@keyframes fall-129 {
49.803% {
transform: translate(25.433vw, 49.803vh) scale(0.6227);
}
to {
transform: translate(28.3745vw, 100vh) scale(0.6227);
}
}
.snow:nth-child(130) {
opacity: 0.3208;
transform: translate(37.2593vw, -10px) scale(0.9665);
animation: fall-130 11s -25s linear infinite;
}
@keyframes fall-130 {
57.589% {
transform: translate(33.4458vw, 57.589vh) scale(0.9665);
}
to {
transform: translate(35.35255vw, 100vh) scale(0.9665);
}
}
.snow:nth-child(131) {
opacity: 0.3315;
transform: translate(72.9362vw, -10px) scale(0.9475);
animation: fall-131 30s -8s linear infinite;
}
@keyframes fall-131 {
57.969% {
transform: translate(66.9123vw, 57.969vh) scale(0.9475);
}
to {
transform: translate(69.92425vw, 100vh) scale(0.9475);
}
}
.snow:nth-child(132) {
opacity: 0.2666;
transform: translate(90.8788vw, -10px) scale(0.7058);
animation: fall-132 30s -25s linear infinite;
}
@keyframes fall-132 {
70.361% {
transform: translate(96.2021vw, 70.361vh) scale(0.7058);
}
to {
transform: translate(93.54045vw, 100vh) scale(0.7058);
}
}
.snow:nth-child(133) {
opacity: 0.9629;
transform: translate(61.0865vw, -10px) scale(0.5611);
animation: fall-133 29s -24s linear infinite;
}
@keyframes fall-133 {
32.811% {
transform: translate(61.8906vw, 32.811vh) scale(0.5611);
}
to {
transform: translate(61.48855vw, 100vh) scale(0.5611);
}
}
.snow:nth-child(134) {
opacity: 0.1497;
transform: translate(81.0235vw, -10px) scale(0.0753);
animation: fall-134 26s -6s linear infinite;
}
@keyframes fall-134 {
75.846% {
transform: translate(77.3167vw, 75.846vh) scale(0.0753);
}
to {
transform: translate(79.1701vw, 100vh) scale(0.0753);
}
}
.snow:nth-child(135) {
opacity: 0.6883;
transform: translate(67.9948vw, -10px) scale(0.1339);
animation: fall-135 12s -27s linear infinite;
}
@keyframes fall-135 {
56.083% {
transform: translate(63.8209vw, 56.083vh) scale(0.1339);
}
to {
transform: translate(65.90785vw, 100vh) scale(0.1339);
}
}
.snow:nth-child(136) {
opacity: 0.8707;
transform: translate(86.8681vw, -10px) scale(0.6037);
animation: fall-136 27s -26s linear infinite;
}
@keyframes fall-136 {
32.265% {
transform: translate(92.3017vw, 32.265vh) scale(0.6037);
}
to {
transform: translate(89.5849vw, 100vh) scale(0.6037);
}
}
.snow:nth-child(137) {
opacity: 0.0277;
transform: translate(69.0399vw, -10px) scale(0.2671);
animation: fall-137 14s -18s linear infinite;
}
@keyframes fall-137 {
51.326% {
transform: translate(67.6254vw, 51.326vh) scale(0.2671);
}
to {
transform: translate(68.33265vw, 100vh) scale(0.2671);
}
}
.snow:nth-child(138) {
opacity: 0.7018;
transform: translate(31.2624vw, -10px) scale(0.126);
animation: fall-138 11s -20s linear infinite;
}
@keyframes fall-138 {
49.1% {
transform: translate(30.4318vw, 49.1vh) scale(0.126);
}
to {
transform: translate(30.8471vw, 100vh) scale(0.126);
}
}
.snow:nth-child(139) {
opacity: 0.2685;
transform: translate(21.6407vw, -10px) scale(0.9443);
animation: fall-139 11s -19s linear infinite;
}
@keyframes fall-139 {
67.009% {
transform: translate(21.4027vw, 67.009vh) scale(0.9443);
}
to {
transform: translate(21.5217vw, 100vh) scale(0.9443);
}
}
.snow:nth-child(140) {
opacity: 0.2249;
transform: translate(58.3783vw, -10px) scale(0.833);
animation: fall-140 29s -27s linear infinite;
}
@keyframes fall-140 {
37.453% {
transform: translate(50.0804vw, 37.453vh) scale(0.833);
}
to {
transform: translate(54.22935vw, 100vh) scale(0.833);
}
}
.snow:nth-child(141) {
opacity: 0.5412;
transform: translate(3.6367vw, -10px) scale(0.9075);
animation: fall-141 30s -27s linear infinite;
}
@keyframes fall-141 {
54.226% {
transform: translate(-3.103vw, 54.226vh) scale(0.9075);
}
to {
transform: translate(0.26685vw, 100vh) scale(0.9075);
}
}
.snow:nth-child(142) {
opacity: 0.0561;
transform: translate(82.5615vw, -10px) scale(0.5563);
animation: fall-142 24s -22s linear infinite;
}
@keyframes fall-142 {
63.362% {
transform: translate(72.8961vw, 63.362vh) scale(0.5563);
}
to {
transform: translate(77.7288vw, 100vh) scale(0.5563);
}
}
.snow:nth-child(143) {
opacity: 0.0858;
transform: translate(74.7316vw, -10px) scale(0.9452);
animation: fall-143 13s -2s linear infinite;
}
@keyframes fall-143 {
57.297% {
transform: translate(81.0036vw, 57.297vh) scale(0.9452);
}
to {
transform: translate(77.8676vw, 100vh) scale(0.9452);
}
}
.snow:nth-child(144) {
opacity: 0.3509;
transform: translate(18.506vw, -10px) scale(0.0433);
animation: fall-144 17s -19s linear infinite;
}
@keyframes fall-144 {
48.162% {
transform: translate(20.1324vw, 48.162vh) scale(0.0433);
}
to {
transform: translate(19.3192vw, 100vh) scale(0.0433);
}
}
.snow:nth-child(145) {
opacity: 0.1436;
transform: translate(63.6979vw, -10px) scale(0.683);
animation: fall-145 30s -20s linear infinite;
}
@keyframes fall-145 {
64.146% {
transform: translate(60.7621vw, 64.146vh) scale(0.683);
}
to {
transform: translate(62.23vw, 100vh) scale(0.683);
}
}
.snow:nth-child(146) {
opacity: 0.5801;
transform: translate(43.8405vw, -10px) scale(0.7343);
animation: fall-146 21s -20s linear infinite;
}
@keyframes fall-146 {
63.804% {
transform: translate(48.2989vw, 63.804vh) scale(0.7343);
}
to {
transform: translate(46.0697vw, 100vh) scale(0.7343);
}
}
.snow:nth-child(147) {
opacity: 0.1069;
transform: translate(42.0509vw, -10px) scale(0.6613);
animation: fall-147 13s -10s linear infinite;
}
@keyframes fall-147 {
79.486% {
transform: translate(52.0476vw, 79.486vh) scale(0.6613);
}
to {
transform: translate(47.04925vw, 100vh) scale(0.6613);
}
}
.snow:nth-child(148) {
opacity: 0.8052;
transform: translate(40.1982vw, -10px) scale(0.2631);
animation: fall-148 13s -11s linear infinite;
}
@keyframes fall-148 {
43.214% {
transform: translate(48.2575vw, 43.214vh) scale(0.2631);
}
to {
transform: translate(44.22785vw, 100vh) scale(0.2631);
}
}
.snow:nth-child(149) {
opacity: 0.2674;
transform: translate(73.6926vw, -10px) scale(0.7624);
animation: fall-149 11s -21s linear infinite;
}
@keyframes fall-149 {
78.108% {
transform: translate(69.004vw, 78.108vh) scale(0.7624);
}
to {
transform: translate(71.3483vw, 100vh) scale(0.7624);
}
}
.snow:nth-child(150) {
opacity: 0.2686;
transform: translate(25.3322vw, -10px) scale(0.0328);
animation: fall-150 11s -15s linear infinite;
}
@keyframes fall-150 {
71.025% {
transform: translate(28.9927vw, 71.025vh) scale(0.0328);
}
to {
transform: translate(27.16245vw, 100vh) scale(0.0328);
}
}
.snow:nth-child(151) {
opacity: 0.5584;
transform: translate(55.0145vw, -10px) scale(0.7698);
animation: fall-151 12s -7s linear infinite;
}
@keyframes fall-151 {
54.524% {
transform: translate(48.4777vw, 54.524vh) scale(0.7698);
}
to {
transform: translate(51.7461vw, 100vh) scale(0.7698);
}
}
.snow:nth-child(152) {
opacity: 0.4178;
transform: translate(14.0038vw, -10px) scale(0.4536);
animation: fall-152 13s -25s linear infinite;
}
@keyframes fall-152 {
51.031% {
transform: translate(9.9705vw, 51.031vh) scale(0.4536);
}
to {
transform: translate(11.98715vw, 100vh) scale(0.4536);
}
}
.snow:nth-child(153) {
opacity: 0.587;
transform: translate(90.8433vw, -10px) scale(0.7547);
animation: fall-153 14s -10s linear infinite;
}
@keyframes fall-153 {
59.962% {
transform: translate(86.8731vw, 59.962vh) scale(0.7547);
}
to {
transform: translate(88.8582vw, 100vh) scale(0.7547);
}
}
.snow:nth-child(154) {
opacity: 0.3739;
transform: translate(90.3332vw, -10px) scale(0.6749);
animation: fall-154 15s -14s linear infinite;
}
@keyframes fall-154 {
79.41% {
transform: translate(82.0566vw, 79.41vh) scale(0.6749);
}
to {
transform: translate(86.1949vw, 100vh) scale(0.6749);
}
}
.snow:nth-child(155) {
opacity: 0.3479;
transform: translate(52.0586vw, -10px) scale(0.8093);
animation: fall-155 19s -25s linear infinite;
}
@keyframes fall-155 {
68.804% {
transform: translate(43.6499vw, 68.804vh) scale(0.8093);
}
to {
transform: translate(47.85425vw, 100vh) scale(0.8093);
}
}
.snow:nth-child(156) {
opacity: 0.2267;
transform: translate(26.7234vw, -10px) scale(0.9692);
animation: fall-156 29s -7s linear infinite;
}
@keyframes fall-156 {
53.198% {
transform: translate(19.0064vw, 53.198vh) scale(0.9692);
}
to {
transform: translate(22.8649vw, 100vh) scale(0.9692);
}
}
.snow:nth-child(157) {
opacity: 0.4103;
transform: translate(69.7474vw, -10px) scale(0.3455);
animation: fall-157 12s -11s linear infinite;
}
@keyframes fall-157 {
49.056% {
transform: translate(75.4992vw, 49.056vh) scale(0.3455);
}
to {
transform: translate(72.6233vw, 100vh) scale(0.3455);
}
}
.snow:nth-child(158) {
opacity: 0.1965;
transform: translate(50.5558vw, -10px) scale(0.7002);
animation: fall-158 21s -27s linear infinite;
}
@keyframes fall-158 {
77.697% {
transform: translate(41.2556vw, 77.697vh) scale(0.7002);
}
to {
transform: translate(45.9057vw, 100vh) scale(0.7002);
}
}
.snow:nth-child(159) {
opacity: 0.9519;
transform: translate(21.3657vw, -10px) scale(0.855);
animation: fall-159 12s -15s linear infinite;
}
@keyframes fall-159 {
34.79% {
transform: translate(15.2366vw, 34.79vh) scale(0.855);
}
to {
transform: translate(18.30115vw, 100vh) scale(0.855);
}
}
.snow:nth-child(160) {
opacity: 0.7614;
transform: translate(51.4549vw, -10px) scale(0.986);
animation: fall-160 19s -4s linear infinite;
}
@keyframes fall-160 {
74.362% {
transform: translate(56.3796vw, 74.362vh) scale(0.986);
}
to {
transform: translate(53.91725vw, 100vh) scale(0.986);
}
}
.snow:nth-child(161) {
opacity: 0.2837;
transform: translate(93.9335vw, -10px) scale(0.3964);
animation: fall-161 20s -6s linear infinite;
}
@keyframes fall-161 {
52.776% {
transform: translate(101.9846vw, 52.776vh) scale(0.3964);
}
to {
transform: translate(97.95905vw, 100vh) scale(0.3964);
}
}
.snow:nth-child(162) {
opacity: 0.4377;
transform: translate(87.437vw, -10px) scale(0.6759);
animation: fall-162 20s -16s linear infinite;
}
@keyframes fall-162 {
59.483% {
transform: translate(77.9609vw, 59.483vh) scale(0.6759);
}
to {
transform: translate(82.69895vw, 100vh) scale(0.6759);
}
}
.snow:nth-child(163) {
opacity: 0.0851;
transform: translate(84.8715vw, -10px) scale(0.8822);
animation: fall-163 10s -14s linear infinite;
}
@keyframes fall-163 {
51.415% {
transform: translate(92.1703vw, 51.415vh) scale(0.8822);
}
to {
transform: translate(88.5209vw, 100vh) scale(0.8822);
}
}
.snow:nth-child(164) {
opacity: 0.3293;
transform: translate(50.4986vw, -10px) scale(0.1534);
animation: fall-164 18s -10s linear infinite;
}
@keyframes fall-164 {
64.169% {
transform: translate(50.2602vw, 64.169vh) scale(0.1534);
}
to {
transform: translate(50.3794vw, 100vh) scale(0.1534);
}
}
.snow:nth-child(165) {
opacity: 0.8159;
transform: translate(70.4984vw, -10px) scale(0.5161);
animation: fall-165 20s -10s linear infinite;
}
@keyframes fall-165 {
31.465% {
transform: translate(80.3704vw, 31.465vh) scale(0.5161);
}
to {
transform: translate(75.4344vw, 100vh) scale(0.5161);
}
}
.snow:nth-child(166) {
opacity: 0.5398;
transform: translate(0.6109vw, -10px) scale(0.4271);
animation: fall-166 22s -11s linear infinite;
}
@keyframes fall-166 {
40.532% {
transform: translate(3.7272vw, 40.532vh) scale(0.4271);
}
to {
transform: translate(2.16905vw, 100vh) scale(0.4271);
}
}
.snow:nth-child(167) {
opacity: 0.2189;
transform: translate(79.8402vw, -10px) scale(0.4469);
animation: fall-167 19s -3s linear infinite;
}
@keyframes fall-167 {
53.827% {
transform: translate(84.6521vw, 53.827vh) scale(0.4469);
}
to {
transform: translate(82.24615vw, 100vh) scale(0.4469);
}
}
.snow:nth-child(168) {
opacity: 0.2517;
transform: translate(48.8757vw, -10px) scale(0.8433);
animation: fall-168 22s -24s linear infinite;
}
@keyframes fall-168 {
67.253% {
transform: translate(51.7176vw, 67.253vh) scale(0.8433);
}
to {
transform: translate(50.29665vw, 100vh) scale(0.8433);
}
}
.snow:nth-child(169) {
opacity: 0.7171;
transform: translate(86.4546vw, -10px) scale(0.8538);
animation: fall-169 29s -6s linear infinite;
}
@keyframes fall-169 {
33.785% {
transform: translate(87.6786vw, 33.785vh) scale(0.8538);
}
to {
transform: translate(87.0666vw, 100vh) scale(0.8538);
}
}
.snow:nth-child(170) {
opacity: 0.7187;
transform: translate(25.4255vw, -10px) scale(0.1182);
animation: fall-170 22s -28s linear infinite;
}
@keyframes fall-170 {
70.244% {
transform: translate(21.7554vw, 70.244vh) scale(0.1182);
}
to {
transform: translate(23.59045vw, 100vh) scale(0.1182);
}
}
.snow:nth-child(171) {
opacity: 0.3459;
transform: translate(84.7881vw, -10px) scale(0.2039);
animation: fall-171 15s -23s linear infinite;
}
@keyframes fall-171 {
44.633% {
transform: translate(75.9098vw, 44.633vh) scale(0.2039);
}
to {
transform: translate(80.34895vw, 100vh) scale(0.2039);
}
}
.snow:nth-child(172) {
opacity: 0.0311;
transform: translate(26.2513vw, -10px) scale(0.663);
animation: fall-172 17s -24s linear infinite;
}
@keyframes fall-172 {
73.95% {
transform: translate(22.4909vw, 73.95vh) scale(0.663);
}
to {
transform: translate(24.3711vw, 100vh) scale(0.663);
}
}
.snow:nth-child(173) {
opacity: 0.316;
transform: translate(7.9026vw, -10px) scale(0.5682);
animation: fall-173 17s -29s linear infinite;
}
@keyframes fall-173 {
43.684% {
transform: translate(14.8199vw, 43.684vh) scale(0.5682);
}
to {
transform: translate(11.36125vw, 100vh) scale(0.5682);
}
}
.snow:nth-child(174) {
opacity: 0.7588;
transform: translate(44.7498vw, -10px) scale(0.5251);
animation: fall-174 19s -11s linear infinite;
}
@keyframes fall-174 {
42.061% {
transform: translate(35.1992vw, 42.061vh) scale(0.5251);
}
to {
transform: translate(39.9745vw, 100vh) scale(0.5251);
}
}
.snow:nth-child(175) {
opacity: 0.4412;
transform: translate(18.4848vw, -10px) scale(0.1494);
animation: fall-175 11s -2s linear infinite;
}
@keyframes fall-175 {
64.622% {
transform: translate(28.2996vw, 64.622vh) scale(0.1494);
}
to {
transform: translate(23.3922vw, 100vh) scale(0.1494);
}
}
.snow:nth-child(176) {
opacity: 0.7598;
transform: translate(60.227vw, -10px) scale(0.1956);
animation: fall-176 26s -12s linear infinite;
}
@keyframes fall-176 {
39.481% {
transform: translate(65.3267vw, 39.481vh) scale(0.1956);
}
to {
transform: translate(62.77685vw, 100vh) scale(0.1956);
}
}
.snow:nth-child(177) {
opacity: 0.921;
transform: translate(27.4655vw, -10px) scale(0.0207);
animation: fall-177 27s -20s linear infinite;
}
@keyframes fall-177 {
34.183% {
transform: translate(37.1841vw, 34.183vh) scale(0.0207);
}
to {
transform: translate(32.3248vw, 100vh) scale(0.0207);
}
}
.snow:nth-child(178) {
opacity: 0.697;
transform: translate(7.4328vw, -10px) scale(0.9913);
animation: fall-178 10s -16s linear infinite;
}
@keyframes fall-178 {
43.158% {
transform: translate(13.1399vw, 43.158vh) scale(0.9913);
}
to {
transform: translate(10.28635vw, 100vh) scale(0.9913);
}
}
.snow:nth-child(179) {
opacity: 0.2279;
transform: translate(44.9587vw, -10px) scale(0.4207);
animation: fall-179 12s -22s linear infinite;
}
@keyframes fall-179 {
62.282% {
transform: translate(42.5914vw, 62.282vh) scale(0.4207);
}
to {
transform: translate(43.77505vw, 100vh) scale(0.4207);
}
}
.snow:nth-child(180) {
opacity: 0.4077;
transform: translate(17.2732vw, -10px) scale(0.8964);
animation: fall-180 28s -15s linear infinite;
}
@keyframes fall-180 {
47.707% {
transform: translate(15.4822vw, 47.707vh) scale(0.8964);
}
to {
transform: translate(16.3777vw, 100vh) scale(0.8964);
}
}
.snow:nth-child(181) {
opacity: 0.1073;
transform: translate(30.7785vw, -10px) scale(0.2388);
animation: fall-181 22s -24s linear infinite;
}
@keyframes fall-181 {
70.607% {
transform: translate(38.3334vw, 70.607vh) scale(0.2388);
}
to {
transform: translate(34.55595vw, 100vh) scale(0.2388);
}
}
.snow:nth-child(182) {
opacity: 0.1416;
transform: translate(1.7679vw, -10px) scale(0.7041);
animation: fall-182 25s -29s linear infinite;
}
@keyframes fall-182 {
54.181% {
transform: translate(10.192vw, 54.181vh) scale(0.7041);
}
to {
transform: translate(5.97995vw, 100vh) scale(0.7041);
}
}
.snow:nth-child(183) {
opacity: 0.0604;
transform: translate(3.7448vw, -10px) scale(0.5096);
animation: fall-183 22s -20s linear infinite;
}
@keyframes fall-183 {
48.707% {
transform: translate(-0.4458vw, 48.707vh) scale(0.5096);
}
to {
transform: translate(1.6495vw, 100vh) scale(0.5096);
}
}
.snow:nth-child(184) {
opacity: 0.3503;
transform: translate(81.6184vw, -10px) scale(0.9517);
animation: fall-184 17s -21s linear infinite;
}
@keyframes fall-184 {
62.698% {
transform: translate(85.3691vw, 62.698vh) scale(0.9517);
}
to {
transform: translate(83.49375vw, 100vh) scale(0.9517);
}
}
.snow:nth-child(185) {
opacity: 0.0055;
transform: translate(57.9093vw, -10px) scale(0.6247);
animation: fall-185 14s -4s linear infinite;
}
@keyframes fall-185 {
36.16% {
transform: translate(62.363vw, 36.16vh) scale(0.6247);
}
to {
transform: translate(60.13615vw, 100vh) scale(0.6247);
}
}
.snow:nth-child(186) {
opacity: 0.4634;
transform: translate(99.8965vw, -10px) scale(0.4429);
animation: fall-186 22s -13s linear infinite;
}
@keyframes fall-186 {
70.329% {
transform: translate(104.6726vw, 70.329vh) scale(0.4429);
}
to {
transform: translate(102.28455vw, 100vh) scale(0.4429);
}
}
.snow:nth-child(187) {
opacity: 0.3914;
transform: translate(11.709vw, -10px) scale(0.0521);
animation: fall-187 12s -11s linear infinite;
}
@keyframes fall-187 {
56.431% {
transform: translate(2.4537vw, 56.431vh) scale(0.0521);
}
to {
transform: translate(7.08135vw, 100vh) scale(0.0521);
}
}
.snow:nth-child(188) {
opacity: 0.4646;
transform: translate(50.6685vw, -10px) scale(0.5098);
animation: fall-188 13s -28s linear infinite;
}
@keyframes fall-188 {
39.312% {
transform: translate(46.9726vw, 39.312vh) scale(0.5098);
}
to {
transform: translate(48.82055vw, 100vh) scale(0.5098);
}
}
.snow:nth-child(189) {
opacity: 0.6742;
transform: translate(5.611vw, -10px) scale(0.8228);
animation: fall-189 11s -20s linear infinite;
}
@keyframes fall-189 {
51.174% {
transform: translate(9.4189vw, 51.174vh) scale(0.8228);
}
to {
transform: translate(7.51495vw, 100vh) scale(0.8228);
}
}
.snow:nth-child(190) {
opacity: 0.9472;
transform: translate(20.0242vw, -10px) scale(0.7708);
animation: fall-190 28s -26s linear infinite;
}
@keyframes fall-190 {
41.433% {
transform: translate(17.7579vw, 41.433vh) scale(0.7708);
}
to {
transform: translate(18.89105vw, 100vh) scale(0.7708);
}
}
.snow:nth-child(191) {
opacity: 0.9338;
transform: translate(11.5863vw, -10px) scale(0.8708);
animation: fall-191 13s -30s linear infinite;
}
@keyframes fall-191 {
73.654% {
transform: translate(18.4883vw, 73.654vh) scale(0.8708);
}
to {
transform: translate(15.0373vw, 100vh) scale(0.8708);
}
}
.snow:nth-child(192) {
opacity: 0.1011;
transform: translate(52.4103vw, -10px) scale(0.6903);
animation: fall-192 23s -22s linear infinite;
}
@keyframes fall-192 {
56.248% {
transform: translate(46.9921vw, 56.248vh) scale(0.6903);
}
to {
transform: translate(49.7012vw, 100vh) scale(0.6903);
}
}
.snow:nth-child(193) {
opacity: 0.118;
transform: translate(19.2158vw, -10px) scale(0.8678);
animation: fall-193 13s -6s linear infinite;
}
@keyframes fall-193 {
73.108% {
transform: translate(12.8295vw, 73.108vh) scale(0.8678);
}
to {
transform: translate(16.02265vw, 100vh) scale(0.8678);
}
}
.snow:nth-child(194) {
opacity: 0.7278;
transform: translate(54.4268vw, -10px) scale(0.6016);
animation: fall-194 22s -13s linear infinite;
}
@keyframes fall-194 {
70.808% {
transform: translate(52.7684vw, 70.808vh) scale(0.6016);
}
to {
transform: translate(53.5976vw, 100vh) scale(0.6016);
}
}
.snow:nth-child(195) {
opacity: 0.1021;
transform: translate(40.3107vw, -10px) scale(0.4216);
animation: fall-195 15s -29s linear infinite;
}
@keyframes fall-195 {
34.429% {
transform: translate(49.0824vw, 34.429vh) scale(0.4216);
}
to {
transform: translate(44.69655vw, 100vh) scale(0.4216);
}
}
.snow:nth-child(196) {
opacity: 0.5778;
transform: translate(36.5514vw, -10px) scale(0.8329);
animation: fall-196 28s -14s linear infinite;
}
@keyframes fall-196 {
54.585% {
transform: translate(32.1767vw, 54.585vh) scale(0.8329);
}
to {
transform: translate(34.36405vw, 100vh) scale(0.8329);
}
}
.snow:nth-child(197) {
opacity: 0.0432;
transform: translate(27.8177vw, -10px) scale(0.8078);
animation: fall-197 16s -21s linear infinite;
}
@keyframes fall-197 {
54.861% {
transform: translate(19.381vw, 54.861vh) scale(0.8078);
}
to {
transform: translate(23.59935vw, 100vh) scale(0.8078);
}
}
.snow:nth-child(198) {
opacity: 0.8186;
transform: translate(24.794vw, -10px) scale(0.833);
animation: fall-198 27s -28s linear infinite;
}
@keyframes fall-198 {
64.536% {
transform: translate(21.9482vw, 64.536vh) scale(0.833);
}
to {
transform: translate(23.3711vw, 100vh) scale(0.833);
}
}
.snow:nth-child(199) {
opacity: 0.1372;
transform: translate(32.1869vw, -10px) scale(0.6313);
animation: fall-199 11s -16s linear infinite;
}
@keyframes fall-199 {
48.182% {
transform: translate(26.3074vw, 48.182vh) scale(0.6313);
}
to {
transform: translate(29.24715vw, 100vh) scale(0.6313);
}
}
.snow:nth-child(200) {
opacity: 0.5502;
transform: translate(36.4113vw, -10px) scale(0.9728);
animation: fall-200 16s -10s linear infinite;
}
@keyframes fall-200 {
52.388% {
transform: translate(26.6232vw, 52.388vh) scale(0.9728);
}
to {
transform: translate(31.51725vw, 100vh) scale(0.9728);
}
}
style>
head>
<body>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
<div class="snow">div>
body>
html>