分享一个唯美雪花界面

先看效果:

再看代码:


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>

你可能感兴趣的:(CSS,javascript,前端,css)