前端杂谈 · Web

我写CSS的常用套路(附demo的效果实现与源码)

•̀.̫•́✧ · 1月16日 · 2020年本文66219字 · 阅读166分钟658

前言

本文是笔者写CSS时常用的套路。不论效果再怎么华丽,万变不离其宗。

1、交错动画

我写CSS的常用套路(附demo的效果实现与源码)-字节智造

有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇。

那么如何将动画变得稍微有趣一点呢?很简单,既然它们都是同一时刻开始运动的,那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢?注意到CSS动画有延迟delay这一属性。

举个栗子,比如有十个元素播放十个动画,将第二个元素的动画播放时间设定为比第一个元素晚0.5秒(也就是将延迟设为0.5秒),其他元素以此类推,这样它们就会错开来,形成一种独特的视觉效果。

我写CSS的常用套路(附demo的效果实现与源码)-字节智造

这就是所谓的交错动画:通过设置不同的延迟时间,达到动画交错播放的效果。

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
            background: #222;
        }

        .loading {
            display: flex;
            animation-delay: 1s;
        }

        .loading .dot {
            position: relative;
            width: 2em;
            height: 2em;
            margin: 0.8em;
            border-radius: 50%;
        }

        .loading .dot::before {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            background: inherit;
            border-radius: inherit;
            animation: wave 2s ease-out infinite;
        }

        .loading .dot:nth-child(1) {
            background: #7ef9ff;
        }

        .loading .dot:nth-child(1)::before {
            animation-delay: 0.2s;
        }

        .loading .dot:nth-child(2) {
            background: #89cff0;
        }

        .loading .dot:nth-child(2)::before {
            animation-delay: 0.4s;
        }

        .loading .dot:nth-child(3) {
            background: #4682b4;
        }

        .loading .dot:nth-child(3)::before {
            animation-delay: 0.6s;
        }

        .loading .dot:nth-child(4) {
            background: #0f52ba;
        }

        .loading .dot:nth-child(4)::before {
            animation-delay: 0.8s;
        }

        .loading .dot:nth-child(5) {
            background: #000080;
        }

        .loading .dot:nth-child(5)::before {
            animation-delay: 1s;
        }

        @keyframes wave {

            50%,
            75% {
                transform: scale(2.5);
            }

            80%,
            100% {
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="loading">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
</body>

</html>

2、用JS分割文本

还有一种经常用到的玩法:用JS将句子或单词分割成字母,并给每个字母加上不同延时的动画,同样也很华丽。

我写CSS的常用套路(附demo的效果实现与源码)-字节智造
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");

        body {
            display: flex;
            flex-direction: column;
            height: 100vh;
            justify-content: center;
            align-items: center;
            background-image: linear-gradient(rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8)), url(https://i.loli.net/2019/10/18/buDT4YS6zUMfHst.jpg);
            background-size: cover;
        }

        p {
            margin: 0 9em;
            font-size: 2em;
            font-weight: 600;
        }

        .landIn {
            display: flex;
            flex-wrap: wrap;
            line-height: 1.8;
            color: white;
            font-family: Lora, serif;
            white-space: pre;
        }

        .landIn span {
            animation: landIn 0.8s ease-out both;
        }

        @keyframes landIn {
            from {
                opacity: 0;
                transform: translateY(-20%);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>

<body>
    <p class="landIn">Ano hi watashitachi mada shiranai no Fushigi no monogatari desu.</p>
    <script>
        var landInTexts = document.querySelectorAll(".landIn");
        landInTexts.forEach(function (landInText) {
            var letters = landInText.textContent.split("");
            landInText.textContent = "";
            letters.forEach(function (letter, i) {
                var span = document.createElement("span");
                span.textContent = letter;
                span.style.animationDelay = i * 0.05 + "s";
                landInText.append(span);
            });
        });</script>
</body>

</html>

一般我们都是从第一个元素开始交错的。但如果要从中间元素开始交错的话,就要给当前元素的延时各加上一个值,这个值就是中间元素的下标到当前元素的下标的距离(也就是下标之差的绝对值)与步长的乘积,即:delay + Math.abs(i – middle) * step,其中中间元素的下标middle = letters.filter(e => e !== "").length / 2

我写CSS的常用套路(附demo的效果实现与源码)-字节智造
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");

        body {
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
            text-align: center;
            background: #222;
        }

        .reveal {
            position: relative;
            display: flex;
            color: #6ee1f5;
            font-size: 2em;
            font-family: Raleway, sans-serif;
            letter-spacing: 3px;
            text-transform: uppercase;
            white-space: pre;
        }

        .reveal span {
            opacity: 0;
            transform: scale(0);
            animation: fadeIn 2.4s forwards;
        }

        .reveal::before,
        .reveal::after {
            position: absolute;
            content: "";
            top: 0;
            bottom: 0;
            width: 2px;
            height: 100%;
            background: white;
            opacity: 0;
            transform: scale(0);
        }

        .reveal::before {
            left: 50%;
            animation: slideLeft 1.5s cubic-bezier(0.7, -0.6, 0.3, 1.5) forwards;
        }

        .reveal::after {
            right: 50%;
            animation: slideRight 1.5s cubic-bezier(0.7, -0.6, 0.3, 1.5) forwards;
        }

        @keyframes fadeIn {
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes slideLeft {
            to {
                left: -6%;
                opacity: 1;
                transform: scale(0.9);
            }
        }

        @keyframes slideRight {
            to {
                right: -6%;
                opacity: 1;
                transform: scale(0.9);
            }
        }
    </style>
</head>

<body>
    <div class="reveal">sword art online</div>
    <script>
        var duration = 0.8;
        var delay = 0.3;
        var revealText = document.querySelector(".reveal");
        var letters = revealText.textContent.split("");
        revealText.textContent = "";
        var middle = letters.filter(function (e) { return e !== " "; }).length / 2;
        letters.forEach(function (letter, i) {
            var span = document.createElement("span");
            span.textContent = letter;
            span.style.animationDelay = delay + Math.abs(i - middle) * 0.1 + "s";
            revealText.append(span);
        });
    </script>
</body>

</html>

所有有交错特性的动画都在这儿

3、随机粒子动画

说到随机性,我们可以实现一种更疯狂的效果:给几百个粒子添加交错动画,并且交错时间随机,位置大小也都是随机。如此一来我们就能用纯CSS模拟出下雪的效果。

又到了白色相簿的季节呢~为什么你写CSS这么熟练啊?

我写CSS的常用套路(附demo的效果实现与源码)-字节智造
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <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.6621;
            transform: translate(43.0379vw, -10px) scale(0.2978);
            animation: fall-1 11s -11s linear infinite;
        }

        @keyframes fall-1 {
            37.725% {
                transform: translate(48.8238vw, 37.725vh) scale(0.2978);
            }

            to {
                transform: translate(45.93085vw, 100vh) scale(0.2978);
            }
        }

        .snow:nth-child(2) {
            opacity: 0.2795;
            transform: translate(17.276vw, -10px) scale(0.1726);
            animation: fall-2 21s -11s linear infinite;
        }

        @keyframes fall-2 {
            58.058% {
                transform: translate(14.6649vw, 58.058vh) scale(0.1726);
            }

            to {
                transform: translate(15.97045vw, 100vh) scale(0.1726);
            }
        }

        .snow:nth-child(3) {
            opacity: 0.1615;
            transform: translate(65.6559vw, -10px) scale(0.2701);
            animation: fall-3 13s -23s linear infinite;
        }

        @keyframes fall-3 {
            62.309% {
                transform: translate(55.8253vw, 62.309vh) scale(0.2701);
            }

            to {
                transform: translate(60.7406vw, 100vh) scale(0.2701);
            }
        }

        .snow:nth-child(4) {
            opacity: 0.5718;
            transform: translate(71.0377vw, -10px) scale(0.8411);
            animation: fall-4 14s -1s linear infinite;
        }

        @keyframes fall-4 {
            75.112% {
                transform: translate(69.5615vw, 75.112vh) scale(0.8411);
            }

            to {
                transform: translate(70.2996vw, 100vh) scale(0.8411);
            }
        }

        .snow:nth-child(5) {
            opacity: 0.631;
            transform: translate(57.6828vw, -10px) scale(0.3243);
            animation: fall-5 21s -23s linear infinite;
        }

        @keyframes fall-5 {
            58.701% {
                transform: translate(53.1075vw, 58.701vh) scale(0.3243);
            }

            to {
                transform: translate(55.39515vw, 100vh) scale(0.3243);
            }
        }

        .snow:nth-child(6) {
            opacity: 0.3483;
            transform: translate(55.4957vw, -10px) scale(0.8037);
            animation: fall-6 14s -7s linear infinite;
        }

        @keyframes fall-6 {
            75.352% {
                transform: translate(54.9388vw, 75.352vh) scale(0.8037);
            }

            to {
                transform: translate(55.21725vw, 100vh) scale(0.8037);
            }
        }

        .snow:nth-child(7) {
            opacity: 0.4275;
            transform: translate(99.4778vw, -10px) scale(0.5927);
            animation: fall-7 21s -20s linear infinite;
        }

        @keyframes fall-7 {
            47.175% {
                transform: translate(90.0957vw, 47.175vh) scale(0.5927);
            }

            to {
                transform: translate(94.78675vw, 100vh) scale(0.5927);
            }
        }

        .snow:nth-child(8) {
            opacity: 0.2207;
            transform: translate(18.5668vw, -10px) scale(0.0858);
            animation: fall-8 12s -23s linear infinite;
        }

        @keyframes fall-8 {
            46.667% {
                transform: translate(10.9775vw, 46.667vh) scale(0.0858);
            }

            to {
                transform: translate(14.77215vw, 100vh) scale(0.0858);
            }
        }

        .snow:nth-child(9) {
            opacity: 0.877;
            transform: translate(87.8984vw, -10px) scale(0.771);
            animation: fall-9 11s -26s linear infinite;
        }

        @keyframes fall-9 {
            68.629% {
                transform: translate(97.6631vw, 68.629vh) scale(0.771);
            }

            to {
                transform: translate(92.78075vw, 100vh) scale(0.771);
            }
        }

        .snow:nth-child(10) {
            opacity: 0.9665;
            transform: translate(50.9038vw, -10px) scale(0.0751);
            animation: fall-10 28s -23s linear infinite;
        }

        @keyframes fall-10 {
            43.505% {
                transform: translate(59.7685vw, 43.505vh) scale(0.0751);
            }

            to {
                transform: translate(55.33615vw, 100vh) scale(0.0751);
            }
        }

        .snow:nth-child(11) {
            opacity: 0.0856;
            transform: translate(36.3064vw, -10px) scale(0.2248);
            animation: fall-11 21s -4s linear infinite;
        }

        @keyframes fall-11 {
            51.309% {
                transform: translate(42.6383vw, 51.309vh) scale(0.2248);
            }

            to {
                transform: translate(39.47235vw, 100vh) scale(0.2248);
            }
        }

        .snow:nth-child(12) {
            opacity: 0.6734;
            transform: translate(97.633vw, -10px) scale(0.5847);
            animation: fall-12 14s -2s linear infinite;
        }

        @keyframes fall-12 {
            65.269% {
                transform: translate(88.2275vw, 65.269vh) scale(0.5847);
            }

            to {
                transform: translate(92.93025vw, 100vh) scale(0.5847);
            }
        }

        .snow:nth-child(13) {
            opacity: 0.3159;
            transform: translate(89.472vw, -10px) scale(0.9599);
            animation: fall-13 13s -29s linear infinite;
        }

        @keyframes fall-13 {
            72.377% {
                transform: translate(82.8716vw, 72.377vh) scale(0.9599);
            }

            to {
                transform: translate(86.1718vw, 100vh) scale(0.9599);
            }
        }

        .snow:nth-child(14) {
            opacity: 0.333;
            transform: translate(22.9281vw, -10px) scale(0.4042);
            animation: fall-14 13s -24s linear infinite;
        }

        @keyframes fall-14 {
            53.712% {
                transform: translate(18.3428vw, 53.712vh) scale(0.4042);
            }

            to {
                transform: translate(20.63545vw, 100vh) scale(0.4042);
            }
        }

        .snow:nth-child(15) {
            opacity: 0.5999;
            transform: translate(16.8078vw, -10px) scale(0.8765);
            animation: fall-15 15s -12s linear infinite;
        }

        @keyframes fall-15 {
            30.495% {
                transform: translate(10.3336vw, 30.495vh) scale(0.8765);
            }

            to {
                transform: translate(13.5707vw, 100vh) scale(0.8765);
            }
        }

        .snow:nth-child(16) {
            opacity: 0.5734;
            transform: translate(13.4941vw, -10px) scale(0.5822);
            animation: fall-16 18s -2s linear infinite;
        }

        @keyframes fall-16 {
            44.128% {
                transform: translate(20.1489vw, 44.128vh) scale(0.5822);
            }

            to {
                transform: translate(16.8215vw, 100vh) scale(0.5822);
            }
        }

        .snow:nth-child(17) {
            opacity: 0.0018;
            transform: translate(24.8206vw, -10px) scale(0.1275);
            animation: fall-17 25s -5s linear infinite;
        }

        @keyframes fall-17 {
            54.47% {
                transform: translate(23.0891vw, 54.47vh) scale(0.1275);
            }

            to {
                transform: translate(23.95485vw, 100vh) scale(0.1275);
            }
        }

        .snow:nth-child(18) {
            opacity: 0.4925;
            transform: translate(38.5932vw, -10px) scale(0.1504);
            animation: fall-18 13s -28s linear infinite;
        }

        @keyframes fall-18 {
            38.316% {
                transform: translate(32.9632vw, 38.316vh) scale(0.1504);
            }

            to {
                transform: translate(35.7782vw, 100vh) scale(0.1504);
            }
        }

        .snow:nth-child(19) {
            opacity: 0.4296;
            transform: translate(51.0592vw, -10px) scale(0.7871);
            animation: fall-19 14s -6s linear infinite;
        }

        @keyframes fall-19 {
            76.22% {
                transform: translate(49.0436vw, 76.22vh) scale(0.7871);
            }

            to {
                transform: translate(50.0514vw, 100vh) scale(0.7871);
            }
        }

        .snow:nth-child(20) {
            opacity: 0.7278;
            transform: translate(94.8955vw, -10px) scale(0.1421);
            animation: fall-20 26s -29s linear infinite;
        }

        @keyframes fall-20 {
            38.934% {
                transform: translate(103.2587vw, 38.934vh) scale(0.1421);
            }

            to {
                transform: translate(99.0771vw, 100vh) scale(0.1421);
            }
        }

        .snow:nth-child(21) {
            opacity: 0.9197;
            transform: translate(38.669vw, -10px) scale(0.3106);
            animation: fall-21 17s -27s linear infinite;
        }

        @keyframes fall-21 {
            42.273% {
                transform: translate(42.005vw, 42.273vh) scale(0.3106);
            }

            to {
                transform: translate(40.337vw, 100vh) scale(0.3106);
            }
        }

        .snow:nth-child(22) {
            opacity: 0.1099;
            transform: translate(60.0334vw, -10px) scale(0.8627);
            animation: fall-22 26s -29s linear infinite;
        }

        @keyframes fall-22 {
            39.593% {
                transform: translate(57.2401vw, 39.593vh) scale(0.8627);
            }

            to {
                transform: translate(58.63675vw, 100vh) scale(0.8627);
            }
        }

        .snow:nth-child(23) {
            opacity: 0.211;
            transform: translate(14.803vw, -10px) scale(0.583);
            animation: fall-23 23s -2s linear infinite;
        }

        @keyframes fall-23 {
            38.315% {
                transform: translate(5.9476vw, 38.315vh) scale(0.583);
            }

            to {
                transform: translate(10.3753vw, 100vh) scale(0.583);
            }
        }

        .snow:nth-child(24) {
            opacity: 0.4449;
            transform: translate(52.1343vw, -10px) scale(0.6949);
            animation: fall-24 24s -8s linear infinite;
        }

        @keyframes fall-24 {
            58.547% {
                transform: translate(59.5037vw, 58.547vh) scale(0.6949);
            }

            to {
                transform: translate(55.819vw, 100vh) scale(0.6949);
            }
        }

        .snow:nth-child(25) {
            opacity: 0.9591;
            transform: translate(84.9135vw, -10px) scale(0.7988);
            animation: fall-25 14s -23s linear infinite;
        }

        @keyframes fall-25 {
            50.256% {
                transform: translate(82.0647vw, 50.256vh) scale(0.7988);
            }

            to {
                transform: translate(83.4891vw, 100vh) scale(0.7988);
            }
        }

        .snow:nth-child(26) {
            opacity: 0.3636;
            transform: translate(38.7748vw, -10px) scale(0.3001);
            animation: fall-26 13s -18s linear infinite;
        }

        @keyframes fall-26 {
            69.721% {
                transform: translate(45.2438vw, 69.721vh) scale(0.3001);
            }

            to {
                transform: translate(42.0093vw, 100vh) scale(0.3001);
            }
        }

        .snow:nth-child(27) {
            opacity: 0.2001;
            transform: translate(41.6252vw, -10px) scale(0.1809);
            animation: fall-27 23s -15s linear infinite;
        }

        @keyframes fall-27 {
            35.344% {
                transform: translate(47.316vw, 35.344vh) scale(0.1809);
            }

            to {
                transform: translate(44.4706vw, 100vh) scale(0.1809);
            }
        }

        .snow:nth-child(28) {
            opacity: 0.2789;
            transform: translate(31.3817vw, -10px) scale(0.7127);
            animation: fall-28 21s -27s linear infinite;
        }

        @keyframes fall-28 {
            75.727% {
                transform: translate(36.0695vw, 75.727vh) scale(0.7127);
            }

            to {
                transform: translate(33.7256vw, 100vh) scale(0.7127);
            }
        }

        .snow:nth-child(29) {
            opacity: 0.1083;
            transform: translate(73.8568vw, -10px) scale(0.198);
            animation: fall-29 23s -20s linear infinite;
        }

        @keyframes fall-29 {
            43.71% {
                transform: translate(83.247vw, 43.71vh) scale(0.198);
            }

            to {
                transform: translate(78.5519vw, 100vh) scale(0.198);
            }
        }

        .snow:nth-child(30) {
            opacity: 0.8926;
            transform: translate(0.4104vw, -10px) scale(0.0315);
            animation: fall-30 27s -11s linear infinite;
        }

        @keyframes fall-30 {
            55.864% {
                transform: translate(-0.8816vw, 55.864vh) scale(0.0315);
            }

            to {
                transform: translate(-0.2356vw, 100vh) scale(0.0315);
            }
        }

        .snow:nth-child(31) {
            opacity: 0.7728;
            transform: translate(91.9763vw, -10px) scale(0.3066);
            animation: fall-31 27s -21s linear infinite;
        }

        @keyframes fall-31 {
            79.993% {
                transform: translate(99.0867vw, 79.993vh) scale(0.3066);
            }

            to {
                transform: translate(95.5315vw, 100vh) scale(0.3066);
            }
        }

        .snow:nth-child(32) {
            opacity: 0.7882;
            transform: translate(82.9524vw, -10px) scale(0.9236);
            animation: fall-32 30s -19s linear infinite;
        }

        @keyframes fall-32 {
            46.082% {
                transform: translate(79.624vw, 46.082vh) scale(0.9236);
            }

            to {
                transform: translate(81.2882vw, 100vh) scale(0.9236);
            }
        }

        .snow:nth-child(33) {
            opacity: 0.4401;
            transform: translate(98.6364vw, -10px) scale(0.5874);
            animation: fall-33 25s -24s linear infinite;
        }

        @keyframes fall-33 {
            37.384% {
                transform: translate(95.2668vw, 37.384vh) scale(0.5874);
            }

            to {
                transform: translate(96.9516vw, 100vh) scale(0.5874);
            }
        }

        .snow:nth-child(34) {
            opacity: 0.6073;
            transform: translate(49.9265vw, -10px) scale(0.4498);
            animation: fall-34 14s -21s linear infinite;
        }

        @keyframes fall-34 {
            58.841% {
                transform: translate(56.5336vw, 58.841vh) scale(0.4498);
            }

            to {
                transform: translate(53.23005vw, 100vh) scale(0.4498);
            }
        }

        .snow:nth-child(35) {
            opacity: 0.7231;
            transform: translate(2.9716vw, -10px) scale(0.6776);
            animation: fall-35 13s -15s linear infinite;
        }

        @keyframes fall-35 {
            76.523% {
                transform: translate(-5.6724vw, 76.523vh) scale(0.6776);
            }

            to {
                transform: translate(-1.3504vw, 100vh) scale(0.6776);
            }
        }

        .snow:nth-child(36) {
            opacity: 0.659;
            transform: translate(79.1684vw, -10px) scale(0.9272);
            animation: fall-36 14s -3s linear infinite;
        }

        @keyframes fall-36 {
            47.901% {
                transform: translate(73.8061vw, 47.901vh) scale(0.9272);
            }

            to {
                transform: translate(76.48725vw, 100vh) scale(0.9272);
            }
        }

        .snow:nth-child(37) {
            opacity: 0.0399;
            transform: translate(89.5291vw, -10px) scale(0.251);
            animation: fall-37 14s -26s linear infinite;
        }

        @keyframes fall-37 {
            73.184% {
                transform: translate(82.0334vw, 73.184vh) scale(0.251);
            }

            to {
                transform: translate(85.78125vw, 100vh) scale(0.251);
            }
        }

        .snow:nth-child(38) {
            opacity: 0.1435;
            transform: translate(67.9357vw, -10px) scale(0.2208);
            animation: fall-38 19s -2s linear infinite;
        }

        @keyframes fall-38 {
            32.091% {
                transform: translate(65.5842vw, 32.091vh) scale(0.2208);
            }

            to {
                transform: translate(66.75995vw, 100vh) scale(0.2208);
            }
        }

        .snow:nth-child(39) {
            opacity: 0.7079;
            transform: translate(70.4801vw, -10px) scale(0.4014);
            animation: fall-39 14s -18s linear infinite;
        }

        @keyframes fall-39 {
            69.508% {
                transform: translate(66.4111vw, 69.508vh) scale(0.4014);
            }

            to {
                transform: translate(68.4456vw, 100vh) scale(0.4014);
            }
        }

        .snow:nth-child(40) {
            opacity: 0.7484;
            transform: translate(33.946vw, -10px) scale(0.7525);
            animation: fall-40 27s -15s linear infinite;
        }

        @keyframes fall-40 {
            78.168% {
                transform: translate(41.3082vw, 78.168vh) scale(0.7525);
            }

            to {
                transform: translate(37.6271vw, 100vh) scale(0.7525);
            }
        }

        .snow:nth-child(41) {
            opacity: 0.2543;
            transform: translate(9.9878vw, -10px) scale(0.4013);
            animation: fall-41 13s -16s linear infinite;
        }

        @keyframes fall-41 {
            36.725% {
                transform: translate(13.6659vw, 36.725vh) scale(0.4013);
            }

            to {
                transform: translate(11.82685vw, 100vh) scale(0.4013);
            }
        }

        .snow:nth-child(42) {
            opacity: 0.5897;
            transform: translate(68.8565vw, -10px) scale(0.9433);
            animation: fall-42 24s -28s linear infinite;
        }

        @keyframes fall-42 {
            69.986% {
                transform: translate(63.6374vw, 69.986vh) scale(0.9433);
            }

            to {
                transform: translate(66.24695vw, 100vh) scale(0.9433);
            }
        }

        .snow:nth-child(43) {
            opacity: 0.0115;
            transform: translate(17.2564vw, -10px) scale(0.1682);
            animation: fall-43 19s -20s linear infinite;
        }

        @keyframes fall-43 {
            56.541% {
                transform: translate(26.7374vw, 56.541vh) scale(0.1682);
            }

            to {
                transform: translate(21.9969vw, 100vh) scale(0.1682);
            }
        }

        .snow:nth-child(44) {
            opacity: 0.6805;
            transform: translate(13.086vw, -10px) scale(0.4874);
            animation: fall-44 23s -15s linear infinite;
        }

        @keyframes fall-44 {
            38.957% {
                transform: translate(11.3304vw, 38.957vh) scale(0.4874);
            }

            to {
                transform: translate(12.2082vw, 100vh) scale(0.4874);
            }
        }

        .snow:nth-child(45) {
            opacity: 0.4282;
            transform: translate(61.7258vw, -10px) scale(0.6229);
            animation: fall-45 18s -24s linear infinite;
        }

        @keyframes fall-45 {
            31.116% {
                transform: translate(51.7463vw, 31.116vh) scale(0.6229);
            }

            to {
                transform: translate(56.73605vw, 100vh) scale(0.6229);
            }
        }

        .snow:nth-child(46) {
            opacity: 0.1397;
            transform: translate(58.651vw, -10px) scale(0.7652);
            animation: fall-46 13s -3s linear infinite;
        }

        @keyframes fall-46 {
            74.061% {
                transform: translate(51.4087vw, 74.061vh) scale(0.7652);
            }

            to {
                transform: translate(55.02985vw, 100vh) scale(0.7652);
            }
        }

        .snow:nth-child(47) {
            opacity: 0.6227;
            transform: translate(74.8589vw, -10px) scale(0.8737);
            animation: fall-47 16s -29s linear infinite;
        }

        @keyframes fall-47 {
            36.595% {
                transform: translate(79.1727vw, 36.595vh) scale(0.8737);
            }

            to {
                transform: translate(77.0158vw, 100vh) scale(0.8737);
            }
        }

        .snow:nth-child(48) {
            opacity: 0.0687;
            transform: translate(35.234vw, -10px) scale(0.4187);
            animation: fall-48 26s -27s linear infinite;
        }

        @keyframes fall-48 {
            30.397% {
                transform: translate(31.1905vw, 30.397vh) scale(0.4187);
            }

            to {
                transform: translate(33.21225vw, 100vh) scale(0.4187);
            }
        }

        .snow:nth-child(49) {
            opacity: 0.9597;
            transform: translate(29.7121vw, -10px) scale(0.9483);
            animation: fall-49 24s -14s linear infinite;
        }

        @keyframes fall-49 {
            36.747% {
                transform: translate(25.1676vw, 36.747vh) scale(0.9483);
            }

            to {
                transform: translate(27.43985vw, 100vh) scale(0.9483);
            }
        }

        .snow:nth-child(50) {
            opacity: 0.6702;
            transform: translate(8.3477vw, -10px) scale(0.3474);
            animation: fall-50 25s -29s linear infinite;
        }

        @keyframes fall-50 {
            62.994% {
                transform: translate(13.8879vw, 62.994vh) scale(0.3474);
            }

            to {
                transform: translate(11.1178vw, 100vh) scale(0.3474);
            }
        }

        .snow:nth-child(51) {
            opacity: 0.5037;
            transform: translate(79.8168vw, -10px) scale(0.6183);
            animation: fall-51 15s -20s linear infinite;
        }

        @keyframes fall-51 {
            72.232% {
                transform: translate(84.553vw, 72.232vh) scale(0.6183);
            }

            to {
                transform: translate(82.1849vw, 100vh) scale(0.6183);
            }
        }

        .snow:nth-child(52) {
            opacity: 0.9085;
            transform: translate(89.072vw, -10px) scale(0.9721);
            animation: fall-52 14s -16s linear infinite;
        }

        @keyframes fall-52 {
            67.106% {
                transform: translate(85.1024vw, 67.106vh) scale(0.9721);
            }

            to {
                transform: translate(87.0872vw, 100vh) scale(0.9721);
            }
        }

        .snow:nth-child(53) {
            opacity: 0.1939;
            transform: translate(59.3331vw, -10px) scale(0.1683);
            animation: fall-53 12s -27s linear infinite;
        }

        @keyframes fall-53 {
            55.882% {
                transform: translate(56.702vw, 55.882vh) scale(0.1683);
            }

            to {
                transform: translate(58.01755vw, 100vh) scale(0.1683);
            }
        }

        .snow:nth-child(54) {
            opacity: 0.828;
            transform: translate(53.3175vw, -10px) scale(0.1754);
            animation: fall-54 13s -22s linear infinite;
        }

        @keyframes fall-54 {
            37.685% {
                transform: translate(51.0041vw, 37.685vh) scale(0.1754);
            }

            to {
                transform: translate(52.1608vw, 100vh) scale(0.1754);
            }
        }

        .snow:nth-child(55) {
            opacity: 0.0225;
            transform: translate(21.2991vw, -10px) scale(0.5879);
            animation: fall-55 30s -29s linear infinite;
        }

        @keyframes fall-55 {
            44.1% {
                transform: translate(26.0725vw, 44.1vh) scale(0.5879);
            }

            to {
                transform: translate(23.6858vw, 100vh) scale(0.5879);
            }
        }

        .snow:nth-child(56) {
            opacity: 0.1228;
            transform: translate(99.4797vw, -10px) scale(0.1941);
            animation: fall-56 27s -14s linear infinite;
        }

        @keyframes fall-56 {
            50.191% {
                transform: translate(99.9598vw, 50.191vh) scale(0.1941);
            }

            to {
                transform: translate(99.71975vw, 100vh) scale(0.1941);
            }
        }

        .snow:nth-child(57) {
            opacity: 0.8979;
            transform: translate(62.8636vw, -10px) scale(0.1916);
            animation: fall-57 23s -13s linear infinite;
        }

        @keyframes fall-57 {
            55.733% {
                transform: translate(67.4681vw, 55.733vh) scale(0.1916);
            }

            to {
                transform: translate(65.16585vw, 100vh) scale(0.1916);
            }
        }

        .snow:nth-child(58) {
            opacity: 0.7576;
            transform: translate(51.4178vw, -10px) scale(0.9596);
            animation: fall-58 28s -15s linear infinite;
        }

        @keyframes fall-58 {
            39.771% {
                transform: translate(48.9096vw, 39.771vh) scale(0.9596);
            }

            to {
                transform: translate(50.1637vw, 100vh) scale(0.9596);
            }
        }

        .snow:nth-child(59) {
            opacity: 0.9646;
            transform: translate(97.3987vw, -10px) scale(0.2857);
            animation: fall-59 16s -2s linear infinite;
        }

        @keyframes fall-59 {
            69.828% {
                transform: translate(90.7334vw, 69.828vh) scale(0.2857);
            }

            to {
                transform: translate(94.06605vw, 100vh) scale(0.2857);
            }
        }

        .snow:nth-child(60) {
            opacity: 0.7083;
            transform: translate(18.9843vw, -10px) scale(0.603);
            animation: fall-60 12s -28s linear infinite;
        }

        @keyframes fall-60 {
            59.106% {
                transform: translate(28.9489vw, 59.106vh) scale(0.603);
            }

            to {
                transform: translate(23.9666vw, 100vh) scale(0.603);
            }
        }

        .snow:nth-child(61) {
            opacity: 0.3225;
            transform: translate(69.2613vw, -10px) scale(0.8992);
            animation: fall-61 15s -25s linear infinite;
        }

        @keyframes fall-61 {
            54.894% {
                transform: translate(59.9186vw, 54.894vh) scale(0.8992);
            }

            to {
                transform: translate(64.58995vw, 100vh) scale(0.8992);
            }
        }

        .snow:nth-child(62) {
            opacity: 0.3369;
            transform: translate(52.1139vw, -10px) scale(0.0529);
            animation: fall-62 27s -29s linear infinite;
        }

        @keyframes fall-62 {
            39.755% {
                transform: translate(60.2748vw, 39.755vh) scale(0.0529);
            }

            to {
                transform: translate(56.19435vw, 100vh) scale(0.0529);
            }
        }

        .snow:nth-child(63) {
            opacity: 0.6627;
            transform: translate(86.8842vw, -10px) scale(0.1051);
            animation: fall-63 16s -12s linear infinite;
        }

        @keyframes fall-63 {
            38.877% {
                transform: translate(80.0524vw, 38.877vh) scale(0.1051);
            }

            to {
                transform: translate(83.4683vw, 100vh) scale(0.1051);
            }
        }

        .snow:nth-child(64) {
            opacity: 0.533;
            transform: translate(8.1887vw, -10px) scale(0.4503);
            animation: fall-64 25s -11s linear infinite;
        }

        @keyframes fall-64 {
            69.335% {
                transform: translate(6.5249vw, 69.335vh) scale(0.4503);
            }

            to {
                transform: translate(7.3568vw, 100vh) scale(0.4503);
            }
        }

        .snow:nth-child(65) {
            opacity: 0.0183;
            transform: translate(79.5912vw, -10px) scale(0.505);
            animation: fall-65 16s -4s linear infinite;
        }

        @keyframes fall-65 {
            71.838% {
                transform: translate(81.5582vw, 71.838vh) scale(0.505);
            }

            to {
                transform: translate(80.5747vw, 100vh) scale(0.505);
            }
        }

        .snow:nth-child(66) {
            opacity: 0.6807;
            transform: translate(27.1372vw, -10px) scale(0.206);
            animation: fall-66 14s -19s linear infinite;
        }

        @keyframes fall-66 {
            65.844% {
                transform: translate(29.0641vw, 65.844vh) scale(0.206);
            }

            to {
                transform: translate(28.10065vw, 100vh) scale(0.206);
            }
        }

        .snow:nth-child(67) {
            opacity: 0.6075;
            transform: translate(60.9274vw, -10px) scale(0.7755);
            animation: fall-67 26s -5s linear infinite;
        }

        @keyframes fall-67 {
            50.141% {
                transform: translate(68.2839vw, 50.141vh) scale(0.7755);
            }

            to {
                transform: translate(64.60565vw, 100vh) scale(0.7755);
            }
        }

        .snow:nth-child(68) {
            opacity: 0.9158;
            transform: translate(61.0379vw, -10px) scale(0.43);
            animation: fall-68 30s -21s linear infinite;
        }

        @keyframes fall-68 {
            38.972% {
                transform: translate(54.6723vw, 38.972vh) scale(0.43);
            }

            to {
                transform: translate(57.8551vw, 100vh) scale(0.43);
            }
        }

        .snow:nth-child(69) {
            opacity: 0.6737;
            transform: translate(60.795vw, -10px) scale(0.6368);
            animation: fall-69 16s -22s linear infinite;
        }

        @keyframes fall-69 {
            43.271% {
                transform: translate(68.2492vw, 43.271vh) scale(0.6368);
            }

            to {
                transform: translate(64.5221vw, 100vh) scale(0.6368);
            }
        }

        .snow:nth-child(70) {
            opacity: 0.669;
            transform: translate(17.0028vw, -10px) scale(0.2811);
            animation: fall-70 21s -16s linear infinite;
        }

        @keyframes fall-70 {
            34.955% {
                transform: translate(24.456vw, 34.955vh) scale(0.2811);
            }

            to {
                transform: translate(20.7294vw, 100vh) scale(0.2811);
            }
        }

        .snow:nth-child(71) {
            opacity: 0.4462;
            transform: translate(87.3744vw, -10px) scale(0.2225);
            animation: fall-71 15s -10s linear infinite;
        }

        @keyframes fall-71 {
            74.72% {
                transform: translate(86.5936vw, 74.72vh) scale(0.2225);
            }

            to {
                transform: translate(86.984vw, 100vh) scale(0.2225);
            }
        }

        .snow:nth-child(72) {
            opacity: 0.9265;
            transform: translate(49.8377vw, -10px) scale(0.0405);
            animation: fall-72 19s -21s linear infinite;
        }

        @keyframes fall-72 {
            35.322% {
                transform: translate(46.3951vw, 35.322vh) scale(0.0405);
            }

            to {
                transform: translate(48.1164vw, 100vh) scale(0.0405);
            }
        }

        .snow:nth-child(73) {
            opacity: 0.2768;
            transform: translate(24.577vw, -10px) scale(0.5205);
            animation: fall-73 10s -6s linear infinite;
        }

        @keyframes fall-73 {
            60.112% {
                transform: translate(33.0685vw, 60.112vh) scale(0.5205);
            }

            to {
                transform: translate(28.82275vw, 100vh) scale(0.5205);
            }
        }

        .snow:nth-child(74) {
            opacity: 0.9124;
            transform: translate(5.5325vw, -10px) scale(0.7605);
            animation: fall-74 10s -29s linear infinite;
        }

        @keyframes fall-74 {
            73.574% {
                transform: translate(-4.412vw, 73.574vh) scale(0.7605);
            }

            to {
                transform: translate(0.56025vw, 100vh) scale(0.7605);
            }
        }

        .snow:nth-child(75) {
            opacity: 0.1776;
            transform: translate(69.5844vw, -10px) scale(0.4797);
            animation: fall-75 20s -14s linear infinite;
        }

        @keyframes fall-75 {
            52.131% {
                transform: translate(71.5793vw, 52.131vh) scale(0.4797);
            }

            to {
                transform: translate(70.58185vw, 100vh) scale(0.4797);
            }
        }

        .snow:nth-child(76) {
            opacity: 0.7843;
            transform: translate(50.0768vw, -10px) scale(0.1243);
            animation: fall-76 18s -7s linear infinite;
        }

        @keyframes fall-76 {
            37.814% {
                transform: translate(49.5028vw, 37.814vh) scale(0.1243);
            }

            to {
                transform: translate(49.7898vw, 100vh) scale(0.1243);
            }
        }

        .snow:nth-child(77) {
            opacity: 0.5105;
            transform: translate(77.2644vw, -10px) scale(0.2423);
            animation: fall-77 17s -2s linear infinite;
        }

        @keyframes fall-77 {
            77.206% {
                transform: translate(77.2474vw, 77.206vh) scale(0.2423);
            }

            to {
                transform: translate(77.2559vw, 100vh) scale(0.2423);
            }
        }

        .snow:nth-child(78) {
            opacity: 0.6212;
            transform: translate(32.8573vw, -10px) scale(0.3518);
            animation: fall-78 23s -15s linear infinite;
        }

        @keyframes fall-78 {
            78.862% {
                transform: translate(29.4171vw, 78.862vh) scale(0.3518);
            }

            to {
                transform: translate(31.1372vw, 100vh) scale(0.3518);
            }
        }

        .snow:nth-child(79) {
            opacity: 0.2642;
            transform: translate(47.2086vw, -10px) scale(0.1922);
            animation: fall-79 28s -12s linear infinite;
        }

        @keyframes fall-79 {
            65.447% {
                transform: translate(40.0025vw, 65.447vh) scale(0.1922);
            }

            to {
                transform: translate(43.60555vw, 100vh) scale(0.1922);
            }
        }

        .snow:nth-child(80) {
            opacity: 0.0466;
            transform: translate(50.2078vw, -10px) scale(0.9117);
            animation: fall-80 28s -26s linear infinite;
        }

        @keyframes fall-80 {
            51.754% {
                transform: translate(42.8848vw, 51.754vh) scale(0.9117);
            }

            to {
                transform: translate(46.5463vw, 100vh) scale(0.9117);
            }
        }

        .snow:nth-child(81) {
            opacity: 0.7581;
            transform: translate(86.4193vw, -10px) scale(0.8939);
            animation: fall-81 27s -8s linear infinite;
        }

        @keyframes fall-81 {
            78.685% {
                transform: translate(77.4869vw, 78.685vh) scale(0.8939);
            }

            to {
                transform: translate(81.9531vw, 100vh) scale(0.8939);
            }
        }

        .snow:nth-child(82) {
            opacity: 0.3691;
            transform: translate(19.5338vw, -10px) scale(0.1502);
            animation: fall-82 13s -9s linear infinite;
        }

        @keyframes fall-82 {
            43.523% {
                transform: translate(21.8149vw, 43.523vh) scale(0.1502);
            }

            to {
                transform: translate(20.67435vw, 100vh) scale(0.1502);
            }
        }

        .snow:nth-child(83) {
            opacity: 0.0664;
            transform: translate(49.9972vw, -10px) scale(0.9395);
            animation: fall-83 26s -3s linear infinite;
        }

        @keyframes fall-83 {
            52.244% {
                transform: translate(55.2988vw, 52.244vh) scale(0.9395);
            }

            to {
                transform: translate(52.648vw, 100vh) scale(0.9395);
            }
        }

        .snow:nth-child(84) {
            opacity: 0.1633;
            transform: translate(94.7739vw, -10px) scale(0.1944);
            animation: fall-84 27s -2s linear infinite;
        }

        @keyframes fall-84 {
            48.799% {
                transform: translate(98.5078vw, 48.799vh) scale(0.1944);
            }

            to {
                transform: translate(96.64085vw, 100vh) scale(0.1944);
            }
        }

        .snow:nth-child(85) {
            opacity: 0.7454;
            transform: translate(90.2258vw, -10px) scale(0.4714);
            animation: fall-85 18s -16s linear infinite;
        }

        @keyframes fall-85 {
            36.6% {
                transform: translate(93.098vw, 36.6vh) scale(0.4714);
            }

            to {
                transform: translate(91.6619vw, 100vh) scale(0.4714);
            }
        }

        .snow:nth-child(86) {
            opacity: 0.5237;
            transform: translate(83.6927vw, -10px) scale(0.7168);
            animation: fall-86 28s -10s linear infinite;
        }

        @keyframes fall-86 {
            33.148% {
                transform: translate(81.6137vw, 33.148vh) scale(0.7168);
            }

            to {
                transform: translate(82.6532vw, 100vh) scale(0.7168);
            }
        }

        .snow:nth-child(87) {
            opacity: 0.2123;
            transform: translate(94.7333vw, -10px) scale(0.3411);
            animation: fall-87 29s -25s linear infinite;
        }

        @keyframes fall-87 {
            75.675% {
                transform: translate(94.1165vw, 75.675vh) scale(0.3411);
            }

            to {
                transform: translate(94.4249vw, 100vh) scale(0.3411);
            }
        }

        .snow:nth-child(88) {
            opacity: 0.2405;
            transform: translate(33.4726vw, -10px) scale(0.0629);
            animation: fall-88 16s -10s linear infinite;
        }

        @keyframes fall-88 {
            62.371% {
                transform: translate(30.1223vw, 62.371vh) scale(0.0629);
            }

            to {
                transform: translate(31.79745vw, 100vh) scale(0.0629);
            }
        }

        .snow:nth-child(89) {
            opacity: 0.355;
            transform: translate(8.1022vw, -10px) scale(0.8278);
            animation: fall-89 25s -26s linear infinite;
        }

        @keyframes fall-89 {
            69.946% {
                transform: translate(6.9452vw, 69.946vh) scale(0.8278);
            }

            to {
                transform: translate(7.5237vw, 100vh) scale(0.8278);
            }
        }

        .snow:nth-child(90) {
            opacity: 0.2396;
            transform: translate(99.973vw, -10px) scale(0.3284);
            animation: fall-90 23s -24s linear infinite;
        }

        @keyframes fall-90 {
            51.853% {
                transform: translate(103.2128vw, 51.853vh) scale(0.3284);
            }

            to {
                transform: translate(101.5929vw, 100vh) scale(0.3284);
            }
        }

        .snow:nth-child(91) {
            opacity: 0.7873;
            transform: translate(55.8365vw, -10px) scale(0.3918);
            animation: fall-91 18s -12s linear infinite;
        }

        @keyframes fall-91 {
            30.482% {
                transform: translate(64.5725vw, 30.482vh) scale(0.3918);
            }

            to {
                transform: translate(60.2045vw, 100vh) scale(0.3918);
            }
        }

        .snow:nth-child(92) {
            opacity: 0.8948;
            transform: translate(26.168vw, -10px) scale(0.1649);
            animation: fall-92 21s -18s linear infinite;
        }

        @keyframes fall-92 {
            69.867% {
                transform: translate(18.7967vw, 69.867vh) scale(0.1649);
            }

            to {
                transform: translate(22.48235vw, 100vh) scale(0.1649);
            }
        }

        .snow:nth-child(93) {
            opacity: 0.4821;
            transform: translate(7.3083vw, -10px) scale(0.0653);
            animation: fall-93 10s -15s linear infinite;
        }

        @keyframes fall-93 {
            42.54% {
                transform: translate(1.3919vw, 42.54vh) scale(0.0653);
            }

            to {
                transform: translate(4.3501vw, 100vh) scale(0.0653);
            }
        }

        .snow:nth-child(94) {
            opacity: 0.5404;
            transform: translate(46.2907vw, -10px) scale(0.3996);
            animation: fall-94 28s -7s linear infinite;
        }

        @keyframes fall-94 {
            50.308% {
                transform: translate(55.4656vw, 50.308vh) scale(0.3996);
            }

            to {
                transform: translate(50.87815vw, 100vh) scale(0.3996);
            }
        }

        .snow:nth-child(95) {
            opacity: 0.7942;
            transform: translate(47.4447vw, -10px) scale(0.8444);
            animation: fall-95 21s -18s linear infinite;
        }

        @keyframes fall-95 {
            32.245% {
                transform: translate(56.5111vw, 32.245vh) scale(0.8444);
            }

            to {
                transform: translate(51.9779vw, 100vh) scale(0.8444);
            }
        }

        .snow:nth-child(96) {
            opacity: 0.3273;
            transform: translate(25.7766vw, -10px) scale(0.1546);
            animation: fall-96 19s -27s linear infinite;
        }

        @keyframes fall-96 {
            39.137% {
                transform: translate(32.856vw, 39.137vh) scale(0.1546);
            }

            to {
                transform: translate(29.3163vw, 100vh) scale(0.1546);
            }
        }

        .snow:nth-child(97) {
            opacity: 0.4213;
            transform: translate(17.8237vw, -10px) scale(0.7686);
            animation: fall-97 21s -1s linear infinite;
        }

        @keyframes fall-97 {
            55.066% {
                transform: translate(19.9236vw, 55.066vh) scale(0.7686);
            }

            to {
                transform: translate(18.87365vw, 100vh) scale(0.7686);
            }
        }

        .snow:nth-child(98) {
            opacity: 0.545;
            transform: translate(69.363vw, -10px) scale(0.0906);
            animation: fall-98 29s -10s linear infinite;
        }

        @keyframes fall-98 {
            41.789% {
                transform: translate(70.0663vw, 41.789vh) scale(0.0906);
            }

            to {
                transform: translate(69.71465vw, 100vh) scale(0.0906);
            }
        }

        .snow:nth-child(99) {
            opacity: 0.5684;
            transform: translate(75.2252vw, -10px) scale(0.3095);
            animation: fall-99 20s -6s linear infinite;
        }

        @keyframes fall-99 {
            77.261% {
                transform: translate(67.8784vw, 77.261vh) scale(0.3095);
            }

            to {
                transform: translate(71.5518vw, 100vh) scale(0.3095);
            }
        }

        .snow:nth-child(100) {
            opacity: 0.68;
            transform: translate(55.0443vw, -10px) scale(0.5702);
            animation: fall-100 16s -26s linear infinite;
        }

        @keyframes fall-100 {
            66.924% {
                transform: translate(47.1015vw, 66.924vh) scale(0.5702);
            }

            to {
                transform: translate(51.0729vw, 100vh) scale(0.5702);
            }
        }

        .snow:nth-child(101) {
            opacity: 0.728;
            transform: translate(7.1497vw, -10px) scale(0.9474);
            animation: fall-101 16s -15s linear infinite;
        }

        @keyframes fall-101 {
            53.453% {
                transform: translate(7.0444vw, 53.453vh) scale(0.9474);
            }

            to {
                transform: translate(7.09705vw, 100vh) scale(0.9474);
            }
        }

        .snow:nth-child(102) {
            opacity: 0.0136;
            transform: translate(0.8542vw, -10px) scale(0.8107);
            animation: fall-102 25s -19s linear infinite;
        }

        @keyframes fall-102 {
            46.211% {
                transform: translate(5.3656vw, 46.211vh) scale(0.8107);
            }

            to {
                transform: translate(3.1099vw, 100vh) scale(0.8107);
            }
        }

        .snow:nth-child(103) {
            opacity: 0.4118;
            transform: translate(3.7278vw, -10px) scale(0.6604);
            animation: fall-103 27s -14s linear infinite;
        }

        @keyframes fall-103 {
            62.6% {
                transform: translate(-4.7629vw, 62.6vh) scale(0.6604);
            }

            to {
                transform: translate(-0.51755vw, 100vh) scale(0.6604);
            }
        }

        .snow:nth-child(104) {
            opacity: 0.5646;
            transform: translate(75.8068vw, -10px) scale(0.6625);
            animation: fall-104 15s -9s linear infinite;
        }

        @keyframes fall-104 {
            61.699% {
                transform: translate(74.5617vw, 61.699vh) scale(0.6625);
            }

            to {
                transform: translate(75.18425vw, 100vh) scale(0.6625);
            }
        }

        .snow:nth-child(105) {
            opacity: 0.4249;
            transform: translate(9.537vw, -10px) scale(0.0392);
            animation: fall-105 30s -30s linear infinite;
        }

        @keyframes fall-105 {
            32.859% {
                transform: translate(8.5029vw, 32.859vh) scale(0.0392);
            }

            to {
                transform: translate(9.01995vw, 100vh) scale(0.0392);
            }
        }

        .snow:nth-child(106) {
            opacity: 0.2676;
            transform: translate(2.0782vw, -10px) scale(0.815);
            animation: fall-106 13s -26s linear infinite;
        }

        @keyframes fall-106 {
            32.91% {
                transform: translate(-6.5765vw, 32.91vh) scale(0.815);
            }

            to {
                transform: translate(-2.24915vw, 100vh) scale(0.815);
            }
        }

        .snow:nth-child(107) {
            opacity: 0.4252;
            transform: translate(40.8688vw, -10px) scale(0.7859);
            animation: fall-107 17s -22s linear infinite;
        }

        @keyframes fall-107 {
            56.21% {
                transform: translate(45.675vw, 56.21vh) scale(0.7859);
            }

            to {
                transform: translate(43.2719vw, 100vh) scale(0.7859);
            }
        }

        .snow:nth-child(108) {
            opacity: 0.9851;
            transform: translate(23.8341vw, -10px) scale(0.0268);
            animation: fall-108 20s -8s linear infinite;
        }

        @keyframes fall-108 {
            76.557% {
                transform: translate(21.0382vw, 76.557vh) scale(0.0268);
            }

            to {
                transform: translate(22.43615vw, 100vh) scale(0.0268);
            }
        }

        .snow:nth-child(109) {
            opacity: 0.4193;
            transform: translate(7.0609vw, -10px) scale(0.2132);
            animation: fall-109 14s -28s linear infinite;
        }

        @keyframes fall-109 {
            50.586% {
                transform: translate(-2.3578vw, 50.586vh) scale(0.2132);
            }

            to {
                transform: translate(2.35155vw, 100vh) scale(0.2132);
            }
        }

        .snow:nth-child(110) {
            opacity: 0.5564;
            transform: translate(79.3877vw, -10px) scale(0.7549);
            animation: fall-110 26s -23s linear infinite;
        }

        @keyframes fall-110 {
            70.429% {
                transform: translate(84.1722vw, 70.429vh) scale(0.7549);
            }

            to {
                transform: translate(81.77995vw, 100vh) scale(0.7549);
            }
        }

        .snow:nth-child(111) {
            opacity: 0.4711;
            transform: translate(83.3573vw, -10px) scale(0.3464);
            animation: fall-111 15s -22s linear infinite;
        }

        @keyframes fall-111 {
            53.898% {
                transform: translate(74.578vw, 53.898vh) scale(0.3464);
            }

            to {
                transform: translate(78.96765vw, 100vh) scale(0.3464);
            }
        }

        .snow:nth-child(112) {
            opacity: 0.092;
            transform: translate(92.8619vw, -10px) scale(0.5917);
            animation: fall-112 18s -20s linear infinite;
        }

        @keyframes fall-112 {
            54.103% {
                transform: translate(93.296vw, 54.103vh) scale(0.5917);
            }

            to {
                transform: translate(93.07895vw, 100vh) scale(0.5917);
            }
        }

        .snow:nth-child(113) {
            opacity: 0.3532;
            transform: translate(0.1842vw, -10px) scale(0.5068);
            animation: fall-113 25s -25s linear infinite;
        }

        @keyframes fall-113 {
            64.09% {
                transform: translate(-5.6534vw, 64.09vh) scale(0.5068);
            }

            to {
                transform: translate(-2.7346vw, 100vh) scale(0.5068);
            }
        }

        .snow:nth-child(114) {
            opacity: 0.2209;
            transform: translate(39.0226vw, -10px) scale(0.954);
            animation: fall-114 13s -28s linear infinite;
        }

        @keyframes fall-114 {
            47.191% {
                transform: translate(30.0576vw, 47.191vh) scale(0.954);
            }

            to {
                transform: translate(34.5401vw, 100vh) scale(0.954);
            }
        }

        .snow:nth-child(115) {
            opacity: 0.3811;
            transform: translate(99.3147vw, -10px) scale(0.6812);
            animation: fall-115 14s -18s linear infinite;
        }

        @keyframes fall-115 {
            72.3% {
                transform: translate(90.8071vw, 72.3vh) scale(0.6812);
            }

            to {
                transform: translate(95.0609vw, 100vh) scale(0.6812);
            }
        }

        .snow:nth-child(116) {
            opacity: 0.7523;
            transform: translate(65.9684vw, -10px) scale(0.9377);
            animation: fall-116 18s -18s linear infinite;
        }

        @keyframes fall-116 {
            74.734% {
                transform: translate(68.3613vw, 74.734vh) scale(0.9377);
            }

            to {
                transform: translate(67.16485vw, 100vh) scale(0.9377);
            }
        }

        .snow:nth-child(117) {
            opacity: 0.4593;
            transform: translate(30.9104vw, -10px) scale(0.9904);
            animation: fall-117 29s -16s linear infinite;
        }

        @keyframes fall-117 {
            31.042% {
                transform: translate(22.2634vw, 31.042vh) scale(0.9904);
            }

            to {
                transform: translate(26.5869vw, 100vh) scale(0.9904);
            }
        }

        .snow:nth-child(118) {
            opacity: 0.6805;
            transform: translate(98.0067vw, -10px) scale(0.6499);
            animation: fall-118 30s -24s linear infinite;
        }

        @keyframes fall-118 {
            51.202% {
                transform: translate(93.113vw, 51.202vh) scale(0.6499);
            }

            to {
                transform: translate(95.55985vw, 100vh) scale(0.6499);
            }
        }

        .snow:nth-child(119) {
            opacity: 0.8155;
            transform: translate(23.7588vw, -10px) scale(0.4556);
            animation: fall-119 20s -8s linear infinite;
        }

        @keyframes fall-119 {
            34.548% {
                transform: translate(23.2162vw, 34.548vh) scale(0.4556);
            }

            to {
                transform: translate(23.4875vw, 100vh) scale(0.4556);
            }
        }

        .snow:nth-child(120) {
            opacity: 0.6291;
            transform: translate(27.8009vw, -10px) scale(0.5844);
            animation: fall-120 22s -27s linear infinite;
        }

        @keyframes fall-120 {
            50.865% {
                transform: translate(29.809vw, 50.865vh) scale(0.5844);
            }

            to {
                transform: translate(28.80495vw, 100vh) scale(0.5844);
            }
        }

        .snow:nth-child(121) {
            opacity: 0.5407;
            transform: translate(82.9006vw, -10px) scale(0.4467);
            animation: fall-121 25s -13s linear infinite;
        }

        @keyframes fall-121 {
            64.848% {
                transform: translate(80.8688vw, 64.848vh) scale(0.4467);
            }

            to {
                transform: translate(81.8847vw, 100vh) scale(0.4467);
            }
        }

        .snow:nth-child(122) {
            opacity: 0.1685;
            transform: translate(42.4908vw, -10px) scale(0.9201);
            animation: fall-122 22s -19s linear infinite;
        }

        @keyframes fall-122 {
            66.927% {
                transform: translate(39.7242vw, 66.927vh) scale(0.9201);
            }

            to {
                transform: translate(41.1075vw, 100vh) scale(0.9201);
            }
        }

        .snow:nth-child(123) {
            opacity: 0.3496;
            transform: translate(94.1227vw, -10px) scale(0.2412);
            animation: fall-123 10s -4s linear infinite;
        }

        @keyframes fall-123 {
            44.709% {
                transform: translate(84.9508vw, 44.709vh) scale(0.2412);
            }

            to {
                transform: translate(89.53675vw, 100vh) scale(0.2412);
            }
        }

        .snow:nth-child(124) {
            opacity: 0.2778;
            transform: translate(97.624vw, -10px) scale(0.3911);
            animation: fall-124 26s -16s linear infinite;
        }

        @keyframes fall-124 {
            70.387% {
                transform: translate(100.639vw, 70.387vh) scale(0.3911);
            }

            to {
                transform: translate(99.1315vw, 100vh) scale(0.3911);
            }
        }

        .snow:nth-child(125) {
            opacity: 0.8844;
            transform: translate(8.5916vw, -10px) scale(0.5043);
            animation: fall-125 13s -18s linear infinite;
        }

        @keyframes fall-125 {
            41.798% {
                transform: translate(15.1782vw, 41.798vh) scale(0.5043);
            }

            to {
                transform: translate(11.8849vw, 100vh) scale(0.5043);
            }
        }

        .snow:nth-child(126) {
            opacity: 0.4164;
            transform: translate(29.8823vw, -10px) scale(0.3923);
            animation: fall-126 28s -4s linear infinite;
        }

        @keyframes fall-126 {
            50.921% {
                transform: translate(20.5156vw, 50.921vh) scale(0.3923);
            }

            to {
                transform: translate(25.19895vw, 100vh) scale(0.3923);
            }
        }

        .snow:nth-child(127) {
            opacity: 0.4286;
            transform: translate(77.8638vw, -10px) scale(0.4605);
            animation: fall-127 16s -5s linear infinite;
        }

        @keyframes fall-127 {
            59.525% {
                transform: translate(71.6812vw, 59.525vh) scale(0.4605);
            }

            to {
                transform: translate(74.7725vw, 100vh) scale(0.4605);
            }
        }

        .snow:nth-child(128) {
            opacity: 0.1666;
            transform: translate(95.0023vw, -10px) scale(0.7442);
            animation: fall-128 19s -15s linear infinite;
        }

        @keyframes fall-128 {
            50.76% {
                transform: translate(100.6046vw, 50.76vh) scale(0.7442);
            }

            to {
                transform: translate(97.80345vw, 100vh) scale(0.7442);
            }
        }

        .snow:nth-child(129) {
            opacity: 0.6356;
            transform: translate(56.7549vw, -10px) scale(0.0165);
            animation: fall-129 30s -27s linear infinite;
        }

        @keyframes fall-129 {
            37.78% {
                transform: translate(52.803vw, 37.78vh) scale(0.0165);
            }

            to {
                transform: translate(54.77895vw, 100vh) scale(0.0165);
            }
        }

        .snow:nth-child(130) {
            opacity: 0.0807;
            transform: translate(23.8144vw, -10px) scale(0.6303);
            animation: fall-130 18s -13s linear infinite;
        }

        @keyframes fall-130 {
            59.986% {
                transform: translate(18.9614vw, 59.986vh) scale(0.6303);
            }

            to {
                transform: translate(21.3879vw, 100vh) scale(0.6303);
            }
        }

        .snow:nth-child(131) {
            opacity: 0.0108;
            transform: translate(26.7073vw, -10px) scale(0.9961);
            animation: fall-131 25s -19s linear infinite;
        }

        @keyframes fall-131 {
            39.363% {
                transform: translate(36.0034vw, 39.363vh) scale(0.9961);
            }

            to {
                transform: translate(31.35535vw, 100vh) scale(0.9961);
            }
        }

        .snow:nth-child(132) {
            opacity: 0.1789;
            transform: translate(58.3813vw, -10px) scale(0.2698);
            animation: fall-132 10s -16s linear infinite;
        }

        @keyframes fall-132 {
            66.053% {
                transform: translate(53.5454vw, 66.053vh) scale(0.2698);
            }

            to {
                transform: translate(55.96335vw, 100vh) scale(0.2698);
            }
        }

        .snow:nth-child(133) {
            opacity: 0.5255;
            transform: translate(56.3896vw, -10px) scale(0.012);
            animation: fall-133 13s -2s linear infinite;
        }

        @keyframes fall-133 {
            54.823% {
                transform: translate(54.0488vw, 54.823vh) scale(0.012);
            }

            to {
                transform: translate(55.2192vw, 100vh) scale(0.012);
            }
        }

        .snow:nth-child(134) {
            opacity: 0.5919;
            transform: translate(38.524vw, -10px) scale(0.9496);
            animation: fall-134 14s -8s linear infinite;
        }

        @keyframes fall-134 {
            48.684% {
                transform: translate(37.7501vw, 48.684vh) scale(0.9496);
            }

            to {
                transform: translate(38.13705vw, 100vh) scale(0.9496);
            }
        }

        .snow:nth-child(135) {
            opacity: 0.8231;
            transform: translate(91.3179vw, -10px) scale(0.0323);
            animation: fall-135 10s -5s linear infinite;
        }

        @keyframes fall-135 {
            37.372% {
                transform: translate(85.3848vw, 37.372vh) scale(0.0323);
            }

            to {
                transform: translate(88.35135vw, 100vh) scale(0.0323);
            }
        }

        .snow:nth-child(136) {
            opacity: 0.9186;
            transform: translate(24.2006vw, -10px) scale(0.5746);
            animation: fall-136 17s -7s linear infinite;
        }

        @keyframes fall-136 {
            42.99% {
                transform: translate(24.2062vw, 42.99vh) scale(0.5746);
            }

            to {
                transform: translate(24.2034vw, 100vh) scale(0.5746);
            }
        }

        .snow:nth-child(137) {
            opacity: 0.3908;
            transform: translate(3.2746vw, -10px) scale(0.5078);
            animation: fall-137 11s -8s linear infinite;
        }

        @keyframes fall-137 {
            44.787% {
                transform: translate(13.0844vw, 44.787vh) scale(0.5078);
            }

            to {
                transform: translate(8.1795vw, 100vh) scale(0.5078);
            }
        }

        .snow:nth-child(138) {
            opacity: 0.8879;
            transform: translate(91.6703vw, -10px) scale(0.313);
            animation: fall-138 30s -16s linear infinite;
        }

        @keyframes fall-138 {
            57.053% {
                transform: translate(100.3267vw, 57.053vh) scale(0.313);
            }

            to {
                transform: translate(95.9985vw, 100vh) scale(0.313);
            }
        }

        .snow:nth-child(139) {
            opacity: 0.5233;
            transform: translate(12.6446vw, -10px) scale(0.5428);
            animation: fall-139 21s -10s linear infinite;
        }

        @keyframes fall-139 {
            48.892% {
                transform: translate(16.1148vw, 48.892vh) scale(0.5428);
            }

            to {
                transform: translate(14.3797vw, 100vh) scale(0.5428);
            }
        }

        .snow:nth-child(140) {
            opacity: 0.1065;
            transform: translate(11.5281vw, -10px) scale(0.963);
            animation: fall-140 15s -14s linear infinite;
        }

        @keyframes fall-140 {
            31.357% {
                transform: translate(9.7894vw, 31.357vh) scale(0.963);
            }

            to {
                transform: translate(10.65875vw, 100vh) scale(0.963);
            }
        }

        .snow:nth-child(141) {
            opacity: 0.0998;
            transform: translate(72.8877vw, -10px) scale(0.2443);
            animation: fall-141 23s -27s linear infinite;
        }

        @keyframes fall-141 {
            37.131% {
                transform: translate(79.1743vw, 37.131vh) scale(0.2443);
            }

            to {
                transform: translate(76.031vw, 100vh) scale(0.2443);
            }
        }

        .snow:nth-child(142) {
            opacity: 0.0836;
            transform: translate(30.301vw, -10px) scale(0.6409);
            animation: fall-142 30s -21s linear infinite;
        }

        @keyframes fall-142 {
            50.822% {
                transform: translate(33.9907vw, 50.822vh) scale(0.6409);
            }

            to {
                transform: translate(32.14585vw, 100vh) scale(0.6409);
            }
        }

        .snow:nth-child(143) {
            opacity: 0.7322;
            transform: translate(94.5775vw, -10px) scale(0.7108);
            animation: fall-143 11s -19s linear infinite;
        }

        @keyframes fall-143 {
            33.047% {
                transform: translate(90.3406vw, 33.047vh) scale(0.7108);
            }

            to {
                transform: translate(92.45905vw, 100vh) scale(0.7108);
            }
        }

        .snow:nth-child(144) {
            opacity: 0.0832;
            transform: translate(84.3181vw, -10px) scale(0.3549);
            animation: fall-144 27s -6s linear infinite;
        }

        @keyframes fall-144 {
            61.906% {
                transform: translate(84.1464vw, 61.906vh) scale(0.3549);
            }

            to {
                transform: translate(84.23225vw, 100vh) scale(0.3549);
            }
        }

        .snow:nth-child(145) {
            opacity: 0.3541;
            transform: translate(95.1943vw, -10px) scale(0.2401);
            animation: fall-145 15s -1s linear infinite;
        }

        @keyframes fall-145 {
            59.711% {
                transform: translate(104.9135vw, 59.711vh) scale(0.2401);
            }

            to {
                transform: translate(100.0539vw, 100vh) scale(0.2401);
            }
        }

        .snow:nth-child(146) {
            opacity: 0.393;
            transform: translate(38.4951vw, -10px) scale(0.5799);
            animation: fall-146 17s -19s linear infinite;
        }

        @keyframes fall-146 {
            40.905% {
                transform: translate(46.6169vw, 40.905vh) scale(0.5799);
            }

            to {
                transform: translate(42.556vw, 100vh) scale(0.5799);
            }
        }

        .snow:nth-child(147) {
            opacity: 0.3084;
            transform: translate(39.1066vw, -10px) scale(0.2121);
            animation: fall-147 30s -13s linear infinite;
        }

        @keyframes fall-147 {
            33.949% {
                transform: translate(43.2307vw, 33.949vh) scale(0.2121);
            }

            to {
                transform: translate(41.16865vw, 100vh) scale(0.2121);
            }
        }

        .snow:nth-child(148) {
            opacity: 0.4842;
            transform: translate(37.9617vw, -10px) scale(0.5881);
            animation: fall-148 21s -27s linear infinite;
        }

        @keyframes fall-148 {
            43.613% {
                transform: translate(29.7221vw, 43.613vh) scale(0.5881);
            }

            to {
                transform: translate(33.8419vw, 100vh) scale(0.5881);
            }
        }

        .snow:nth-child(149) {
            opacity: 0.3126;
            transform: translate(37.7707vw, -10px) scale(0.194);
            animation: fall-149 26s -13s linear infinite;
        }

        @keyframes fall-149 {
            32.885% {
                transform: translate(42.4799vw, 32.885vh) scale(0.194);
            }

            to {
                transform: translate(40.1253vw, 100vh) scale(0.194);
            }
        }

        .snow:nth-child(150) {
            opacity: 0.9904;
            transform: translate(28.1352vw, -10px) scale(0.2424);
            animation: fall-150 14s -16s linear infinite;
        }

        @keyframes fall-150 {
            79.762% {
                transform: translate(36.7091vw, 79.762vh) scale(0.2424);
            }

            to {
                transform: translate(32.42215vw, 100vh) scale(0.2424);
            }
        }

        .snow:nth-child(151) {
            opacity: 0.5965;
            transform: translate(53.6682vw, -10px) scale(0.1397);
            animation: fall-151 23s -7s linear infinite;
        }

        @keyframes fall-151 {
            34.39% {
                transform: translate(60.6132vw, 34.39vh) scale(0.1397);
            }

            to {
                transform: translate(57.1407vw, 100vh) scale(0.1397);
            }
        }

        .snow:nth-child(152) {
            opacity: 0.0709;
            transform: translate(6.9743vw, -10px) scale(0.3543);
            animation: fall-152 23s -25s linear infinite;
        }

        @keyframes fall-152 {
            68.682% {
                transform: translate(8.4014vw, 68.682vh) scale(0.3543);
            }

            to {
                transform: translate(7.68785vw, 100vh) scale(0.3543);
            }
        }

        .snow:nth-child(153) {
            opacity: 0.4982;
            transform: translate(89.7799vw, -10px) scale(0.3269);
            animation: fall-153 27s -24s linear infinite;
        }

        @keyframes fall-153 {
            48.737% {
                transform: translate(81.2114vw, 48.737vh) scale(0.3269);
            }

            to {
                transform: translate(85.49565vw, 100vh) scale(0.3269);
            }
        }

        .snow:nth-child(154) {
            opacity: 0.3677;
            transform: translate(36.2667vw, -10px) scale(0.5452);
            animation: fall-154 10s -3s linear infinite;
        }

        @keyframes fall-154 {
            45.861% {
                transform: translate(41.8839vw, 45.861vh) scale(0.5452);
            }

            to {
                transform: translate(39.0753vw, 100vh) scale(0.5452);
            }
        }

        .snow:nth-child(155) {
            opacity: 0.8058;
            transform: translate(46.5393vw, -10px) scale(0.1968);
            animation: fall-155 20s -10s linear infinite;
        }

        @keyframes fall-155 {
            46.758% {
                transform: translate(42.7829vw, 46.758vh) scale(0.1968);
            }

            to {
                transform: translate(44.6611vw, 100vh) scale(0.1968);
            }
        }

        .snow:nth-child(156) {
            opacity: 0.1638;
            transform: translate(61.9694vw, -10px) scale(0.3648);
            animation: fall-156 29s -10s linear infinite;
        }

        @keyframes fall-156 {
            66.575% {
                transform: translate(60.3797vw, 66.575vh) scale(0.3648);
            }

            to {
                transform: translate(61.17455vw, 100vh) scale(0.3648);
            }
        }

        .snow:nth-child(157) {
            opacity: 0.0538;
            transform: translate(9.5109vw, -10px) scale(0.8548);
            animation: fall-157 30s -21s linear infinite;
        }

        @keyframes fall-157 {
            71.829% {
                transform: translate(1.0533vw, 71.829vh) scale(0.8548);
            }

            to {
                transform: translate(5.2821vw, 100vh) scale(0.8548);
            }
        }

        .snow:nth-child(158) {
            opacity: 0.6901;
            transform: translate(30.5318vw, -10px) scale(0.4707);
            animation: fall-158 12s -17s linear infinite;
        }

        @keyframes fall-158 {
            66.331% {
                transform: translate(26.2651vw, 66.331vh) scale(0.4707);
            }

            to {
                transform: translate(28.39845vw, 100vh) scale(0.4707);
            }
        }

        .snow:nth-child(159) {
            opacity: 0.2677;
            transform: translate(4.4959vw, -10px) scale(0.1882);
            animation: fall-159 10s -8s linear infinite;
        }

        @keyframes fall-159 {
            52.968% {
                transform: translate(-3.3137vw, 52.968vh) scale(0.1882);
            }

            to {
                transform: translate(0.5911vw, 100vh) scale(0.1882);
            }
        }

        .snow:nth-child(160) {
            opacity: 0.4163;
            transform: translate(49.3438vw, -10px) scale(0.159);
            animation: fall-160 17s -19s linear infinite;
        }

        @keyframes fall-160 {
            41.077% {
                transform: translate(48.3686vw, 41.077vh) scale(0.159);
            }

            to {
                transform: translate(48.8562vw, 100vh) scale(0.159);
            }
        }

        .snow:nth-child(161) {
            opacity: 0.5995;
            transform: translate(55.0524vw, -10px) scale(0.9318);
            animation: fall-161 22s -23s linear infinite;
        }

        @keyframes fall-161 {
            45.809% {
                transform: translate(48.4242vw, 45.809vh) scale(0.9318);
            }

            to {
                transform: translate(51.7383vw, 100vh) scale(0.9318);
            }
        }

        .snow:nth-child(162) {
            opacity: 0.599;
            transform: translate(86.7136vw, -10px) scale(0.3663);
            animation: fall-162 27s -21s linear infinite;
        }

        @keyframes fall-162 {
            79.197% {
                transform: translate(87.0787vw, 79.197vh) scale(0.3663);
            }

            to {
                transform: translate(86.89615vw, 100vh) scale(0.3663);
            }
        }

        .snow:nth-child(163) {
            opacity: 0.5628;
            transform: translate(95.1809vw, -10px) scale(0.1884);
            animation: fall-163 29s -9s linear infinite;
        }

        @keyframes fall-163 {
            68.012% {
                transform: translate(102.3298vw, 68.012vh) scale(0.1884);
            }

            to {
                transform: translate(98.75535vw, 100vh) scale(0.1884);
            }
        }

        .snow:nth-child(164) {
            opacity: 0.1345;
            transform: translate(55.8176vw, -10px) scale(0.7898);
            animation: fall-164 17s -30s linear infinite;
        }

        @keyframes fall-164 {
            79.163% {
                transform: translate(47.9184vw, 79.163vh) scale(0.7898);
            }

            to {
                transform: translate(51.868vw, 100vh) scale(0.7898);
            }
        }

        .snow:nth-child(165) {
            opacity: 0.0249;
            transform: translate(73.1533vw, -10px) scale(0.6727);
            animation: fall-165 16s -3s linear infinite;
        }

        @keyframes fall-165 {
            58.426% {
                transform: translate(66.2696vw, 58.426vh) scale(0.6727);
            }

            to {
                transform: translate(69.71145vw, 100vh) scale(0.6727);
            }
        }

        .snow:nth-child(166) {
            opacity: 0.2907;
            transform: translate(90.4366vw, -10px) scale(0.4582);
            animation: fall-166 29s -25s linear infinite;
        }

        @keyframes fall-166 {
            55.119% {
                transform: translate(94.8215vw, 55.119vh) scale(0.4582);
            }

            to {
                transform: translate(92.62905vw, 100vh) scale(0.4582);
            }
        }

        .snow:nth-child(167) {
            opacity: 0.6711;
            transform: translate(64.1012vw, -10px) scale(0.6432);
            animation: fall-167 18s -23s linear infinite;
        }

        @keyframes fall-167 {
            37.216% {
                transform: translate(60.0468vw, 37.216vh) scale(0.6432);
            }

            to {
                transform: translate(62.074vw, 100vh) scale(0.6432);
            }
        }

        .snow:nth-child(168) {
            opacity: 0.3078;
            transform: translate(41.5909vw, -10px) scale(0.4461);
            animation: fall-168 19s -4s linear infinite;
        }

        @keyframes fall-168 {
            64.039% {
                transform: translate(32.7062vw, 64.039vh) scale(0.4461);
            }

            to {
                transform: translate(37.14855vw, 100vh) scale(0.4461);
            }
        }

        .snow:nth-child(169) {
            opacity: 0.2492;
            transform: translate(15.6298vw, -10px) scale(0.8168);
            animation: fall-169 24s -2s linear infinite;
        }

        @keyframes fall-169 {
            64.261% {
                transform: translate(17.2777vw, 64.261vh) scale(0.8168);
            }

            to {
                transform: translate(16.45375vw, 100vh) scale(0.8168);
            }
        }

        .snow:nth-child(170) {
            opacity: 0.3808;
            transform: translate(64.8625vw, -10px) scale(0.2005);
            animation: fall-170 23s -24s linear infinite;
        }

        @keyframes fall-170 {
            44.036% {
                transform: translate(59.276vw, 44.036vh) scale(0.2005);
            }

            to {
                transform: translate(62.06925vw, 100vh) scale(0.2005);
            }
        }

        .snow:nth-child(171) {
            opacity: 0.322;
            transform: translate(18.7824vw, -10px) scale(0.8142);
            animation: fall-171 30s -9s linear infinite;
        }

        @keyframes fall-171 {
            72.372% {
                transform: translate(22.8362vw, 72.372vh) scale(0.8142);
            }

            to {
                transform: translate(20.8093vw, 100vh) scale(0.8142);
            }
        }

        .snow:nth-child(172) {
            opacity: 0.1455;
            transform: translate(32.4341vw, -10px) scale(0.0889);
            animation: fall-172 20s -11s linear infinite;
        }

        @keyframes fall-172 {
            43.055% {
                transform: translate(36.2103vw, 43.055vh) scale(0.0889);
            }

            to {
                transform: translate(34.3222vw, 100vh) scale(0.0889);
            }
        }

        .snow:nth-child(173) {
            opacity: 0.526;
            transform: translate(35.1739vw, -10px) scale(0.7692);
            animation: fall-173 12s -28s linear infinite;
        }

        @keyframes fall-173 {
            37.239% {
                transform: translate(27.2261vw, 37.239vh) scale(0.7692);
            }

            to {
                transform: translate(31.2vw, 100vh) scale(0.7692);
            }
        }

        .snow:nth-child(174) {
            opacity: 0.8796;
            transform: translate(6.371vw, -10px) scale(0.4251);
            animation: fall-174 29s -24s linear infinite;
        }

        @keyframes fall-174 {
            42.365% {
                transform: translate(8.0313vw, 42.365vh) scale(0.4251);
            }

            to {
                transform: translate(7.20115vw, 100vh) scale(0.4251);
            }
        }

        .snow:nth-child(175) {
            opacity: 0.4068;
            transform: translate(34.1783vw, -10px) scale(0.8755);
            animation: fall-175 24s -11s linear infinite;
        }

        @keyframes fall-175 {
            70.003% {
                transform: translate(31.2679vw, 70.003vh) scale(0.8755);
            }

            to {
                transform: translate(32.7231vw, 100vh) scale(0.8755);
            }
        }

        .snow:nth-child(176) {
            opacity: 0.46;
            transform: translate(93.3663vw, -10px) scale(0.51);
            animation: fall-176 22s -8s linear infinite;
        }

        @keyframes fall-176 {
            49.979% {
                transform: translate(91.0472vw, 49.979vh) scale(0.51);
            }

            to {
                transform: translate(92.20675vw, 100vh) scale(0.51);
            }
        }

        .snow:nth-child(177) {
            opacity: 0.056;
            transform: translate(56.2422vw, -10px) scale(0.6688);
            animation: fall-177 14s -14s linear infinite;
        }

        @keyframes fall-177 {
            70.733% {
                transform: translate(47.5983vw, 70.733vh) scale(0.6688);
            }

            to {
                transform: translate(51.92025vw, 100vh) scale(0.6688);
            }
        }

        .snow:nth-child(178) {
            opacity: 0.6798;
            transform: translate(88.3525vw, -10px) scale(0.4154);
            animation: fall-178 13s -21s linear infinite;
        }

        @keyframes fall-178 {
            43.452% {
                transform: translate(97.7105vw, 43.452vh) scale(0.4154);
            }

            to {
                transform: translate(93.0315vw, 100vh) scale(0.4154);
            }
        }

        .snow:nth-child(179) {
            opacity: 0.8587;
            transform: translate(91.7405vw, -10px) scale(0.7427);
            animation: fall-179 28s -16s linear infinite;
        }

        @keyframes fall-179 {
            73.448% {
                transform: translate(98.89vw, 73.448vh) scale(0.7427);
            }

            to {
                transform: translate(95.31525vw, 100vh) scale(0.7427);
            }
        }

        .snow:nth-child(180) {
            opacity: 0.8337;
            transform: translate(6.9036vw, -10px) scale(0.3296);
            animation: fall-180 22s -24s linear infinite;
        }

        @keyframes fall-180 {
            32.537% {
                transform: translate(9.4031vw, 32.537vh) scale(0.3296);
            }

            to {
                transform: translate(8.15335vw, 100vh) scale(0.3296);
            }
        }

        .snow:nth-child(181) {
            opacity: 0.2254;
            transform: translate(99.9027vw, -10px) scale(0.5088);
            animation: fall-181 10s -4s linear infinite;
        }

        @keyframes fall-181 {
            38.815% {
                transform: translate(99.9583vw, 38.815vh) scale(0.5088);
            }

            to {
                transform: translate(99.9305vw, 100vh) scale(0.5088);
            }
        }

        .snow:nth-child(182) {
            opacity: 0.9051;
            transform: translate(92.4789vw, -10px) scale(0.7353);
            animation: fall-182 28s -5s linear infinite;
        }

        @keyframes fall-182 {
            30.786% {
                transform: translate(99.5195vw, 30.786vh) scale(0.7353);
            }

            to {
                transform: translate(95.9992vw, 100vh) scale(0.7353);
            }
        }

        .snow:nth-child(183) {
            opacity: 0.1404;
            transform: translate(48.3069vw, -10px) scale(0.8861);
            animation: fall-183 19s -30s linear infinite;
        }

        @keyframes fall-183 {
            73.901% {
                transform: translate(57.67vw, 73.901vh) scale(0.8861);
            }

            to {
                transform: translate(52.98845vw, 100vh) scale(0.8861);
            }
        }

        .snow:nth-child(184) {
            opacity: 0.5916;
            transform: translate(99.2259vw, -10px) scale(0.2453);
            animation: fall-184 11s -15s linear infinite;
        }

        @keyframes fall-184 {
            67.515% {
                transform: translate(103.2978vw, 67.515vh) scale(0.2453);
            }

            to {
                transform: translate(101.26185vw, 100vh) scale(0.2453);
            }
        }

        .snow:nth-child(185) {
            opacity: 0.9659;
            transform: translate(23.7035vw, -10px) scale(0.5984);
            animation: fall-185 12s -1s linear infinite;
        }

        @keyframes fall-185 {
            63.349% {
                transform: translate(29.259vw, 63.349vh) scale(0.5984);
            }

            to {
                transform: translate(26.48125vw, 100vh) scale(0.5984);
            }
        }

        .snow:nth-child(186) {
            opacity: 0.5489;
            transform: translate(53.6342vw, -10px) scale(0.4937);
            animation: fall-186 15s -16s linear infinite;
        }

        @keyframes fall-186 {
            56.705% {
                transform: translate(51.4253vw, 56.705vh) scale(0.4937);
            }

            to {
                transform: translate(52.52975vw, 100vh) scale(0.4937);
            }
        }

        .snow:nth-child(187) {
            opacity: 0.5169;
            transform: translate(8.4231vw, -10px) scale(0.9776);
            animation: fall-187 18s -6s linear infinite;
        }

        @keyframes fall-187 {
            71.532% {
                transform: translate(17.3601vw, 71.532vh) scale(0.9776);
            }

            to {
                transform: translate(12.8916vw, 100vh) scale(0.9776);
            }
        }

        .snow:nth-child(188) {
            opacity: 0.2011;
            transform: translate(29.6166vw, -10px) scale(0.7029);
            animation: fall-188 28s -9s linear infinite;
        }

        @keyframes fall-188 {
            36.012% {
                transform: translate(31.9822vw, 36.012vh) scale(0.7029);
            }

            to {
                transform: translate(30.7994vw, 100vh) scale(0.7029);
            }
        }

        .snow:nth-child(189) {
            opacity: 0.2943;
            transform: translate(14.0724vw, -10px) scale(0.592);
            animation: fall-189 26s -15s linear infinite;
        }

        @keyframes fall-189 {
            39.727% {
                transform: translate(22.2044vw, 39.727vh) scale(0.592);
            }

            to {
                transform: translate(18.1384vw, 100vh) scale(0.592);
            }
        }

        .snow:nth-child(190) {
            opacity: 0.9789;
            transform: translate(51.7581vw, -10px) scale(0.0287);
            animation: fall-190 14s -27s linear infinite;
        }

        @keyframes fall-190 {
            68.49% {
                transform: translate(56.6233vw, 68.49vh) scale(0.0287);
            }

            to {
                transform: translate(54.1907vw, 100vh) scale(0.0287);
            }
        }

        .snow:nth-child(191) {
            opacity: 0.5925;
            transform: translate(90.054vw, -10px) scale(0.3182);
            animation: fall-191 18s -13s linear infinite;
        }

        @keyframes fall-191 {
            46.154% {
                transform: translate(98.1936vw, 46.154vh) scale(0.3182);
            }

            to {
                transform: translate(94.1238vw, 100vh) scale(0.3182);
            }
        }

        .snow:nth-child(192) {
            opacity: 0.425;
            transform: translate(40.347vw, -10px) scale(0.7559);
            animation: fall-192 17s -29s linear infinite;
        }

        @keyframes fall-192 {
            57.013% {
                transform: translate(44.7134vw, 57.013vh) scale(0.7559);
            }

            to {
                transform: translate(42.5302vw, 100vh) scale(0.7559);
            }
        }

        .snow:nth-child(193) {
            opacity: 0.9156;
            transform: translate(62.2179vw, -10px) scale(0.2904);
            animation: fall-193 24s -15s linear infinite;
        }

        @keyframes fall-193 {
            76.626% {
                transform: translate(71.0886vw, 76.626vh) scale(0.2904);
            }

            to {
                transform: translate(66.65325vw, 100vh) scale(0.2904);
            }
        }

        .snow:nth-child(194) {
            opacity: 0.3712;
            transform: translate(50.2986vw, -10px) scale(0.9203);
            animation: fall-194 15s -30s linear infinite;
        }

        @keyframes fall-194 {
            36.208% {
                transform: translate(43.5004vw, 36.208vh) scale(0.9203);
            }

            to {
                transform: translate(46.8995vw, 100vh) scale(0.9203);
            }
        }

        .snow:nth-child(195) {
            opacity: 0.2654;
            transform: translate(97.7509vw, -10px) scale(0.1301);
            animation: fall-195 25s -30s linear infinite;
        }

        @keyframes fall-195 {
            49.889% {
                transform: translate(97.8587vw, 49.889vh) scale(0.1301);
            }

            to {
                transform: translate(97.8048vw, 100vh) scale(0.1301);
            }
        }

        .snow:nth-child(196) {
            opacity: 0.3511;
            transform: translate(79.4929vw, -10px) scale(0.2666);
            animation: fall-196 28s -4s linear infinite;
        }

        @keyframes fall-196 {
            65.697% {
                transform: translate(87.7481vw, 65.697vh) scale(0.2666);
            }

            to {
                transform: translate(83.6205vw, 100vh) scale(0.2666);
            }
        }

        .snow:nth-child(197) {
            opacity: 0.7701;
            transform: translate(54.5733vw, -10px) scale(0.714);
            animation: fall-197 14s -26s linear infinite;
        }

        @keyframes fall-197 {
            59.171% {
                transform: translate(58.5215vw, 59.171vh) scale(0.714);
            }

            to {
                transform: translate(56.5474vw, 100vh) scale(0.714);
            }
        }

        .snow:nth-child(198) {
            opacity: 0.3649;
            transform: translate(50.2569vw, -10px) scale(0.1623);
            animation: fall-198 26s -20s linear infinite;
        }

        @keyframes fall-198 {
            69.919% {
                transform: translate(47.0221vw, 69.919vh) scale(0.1623);
            }

            to {
                transform: translate(48.6395vw, 100vh) scale(0.1623);
            }
        }

        .snow:nth-child(199) {
            opacity: 0.0707;
            transform: translate(47.5378vw, -10px) scale(0.8476);
            animation: fall-199 18s -29s linear infinite;
        }

        @keyframes fall-199 {
            33.91% {
                transform: translate(39.9981vw, 33.91vh) scale(0.8476);
            }

            to {
                transform: translate(43.76795vw, 100vh) scale(0.8476);
            }
        }

        .snow:nth-child(200) {
            opacity: 0.6635;
            transform: translate(35.0074vw, -10px) scale(0.8696);
            animation: fall-200 12s -20s linear infinite;
        }

        @keyframes fall-200 {
            43.358% {
                transform: translate(25.6071vw, 43.358vh) scale(0.8696);
            }

            to {
                transform: translate(30.30725vw, 100vh) scale(0.8696);
            }
        }
    </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>

伪类和伪元素

4、伪类

我写CSS的常用套路(附demo的效果实现与源码)-字节智造

HTML元素的状态是可以动态变化的。举个栗子,当你的鼠标悬浮到一个按钮上时,按钮就会变成“悬浮”状态,这时我们就可以利用伪类:hover来选中这一状态的按钮,并对其样式进行改变。

:hover是笔者最最常用的一个伪类。还有一个很常用的伪类是:nth-child,用于选中元素的某一个子元素。其他的类似:focus:focus-within等也有一定的使用。

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @import url(https://fonts.googleapis.com/css?family=Lato);

        body {
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
            text-align: center;
            background: #222;
        }

        .btn {
            --hue: 190;
            --ease-in-duration: 0.25s;
            --ease-out-duration: 0.65s;
            --ease-out-delay: var(--ease-in-duration);
            position: relative;
            padding: 1rem 3rem;
            font-size: 1rem;
            line-height: 1.5;
            color: white;
            text-decoration: none;
            background-color: hsl(var(--hue), 100%, 41%);
            border: 1px solid hsl(var(--hue), 100%, 41%);
            outline: transparent;
            overflow: hidden;
            cursor: pointer;
            user-select: none;
            white-space: nowrap;
            transition: 0.25s;
        }

        .btn:hover {
            background: hsl(var(--hue), 100%, 31%);
        }

        .btn-primary {
            --hue: 171;
        }

        .btn-ghost {
            color: hsl(var(--hue), 100%, 41%);
            background-color: transparent;
            border-color: hsl(var(--hue), 100%, 41%);
        }

        .btn-ghost:hover {
            color: white;
        }

        .btn-border-stroke {
            border-color: hsla(var(--hue), 100%, 41%, 0.35);
        }

        .btn-border-stroke .btn-borders {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .btn-border-stroke .btn-borders .border-top {
            position: absolute;
            top: 0;
            width: 100%;
            height: 1px;
            background: hsl(var(--hue), 100%, 41%);
            transform: scaleX(0);
            transform-origin: left;
        }

        .btn-border-stroke .btn-borders .border-right {
            position: absolute;
            right: 0;
            width: 1px;
            height: 100%;
            background: hsl(var(--hue), 100%, 41%);
            transform: scaleY(0);
            transform-origin: bottom;
        }

        .btn-border-stroke .btn-borders .border-bottom {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: hsl(var(--hue), 100%, 41%);
            transform: scaleX(0);
            transform-origin: left;
        }

        .btn-border-stroke .btn-borders .border-left {
            position: absolute;
            left: 0;
            width: 1px;
            height: 100%;
            background: hsl(var(--hue), 100%, 41%);
            transform: scaleY(0);
            transform-origin: bottom;
        }

        .btn-border-stroke .btn-borders .border-left {
            transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1);
        }

        .btn-border-stroke .btn-borders .border-bottom {
            transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1);
        }

        .btn-border-stroke .btn-borders .border-right {
            transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0);
        }

        .btn-border-stroke .btn-borders .border-top {
            transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0);
        }

        .btn-border-stroke:hover {
            color: hsl(var(--hue), 100%, 41%);
            background: transparent;
        }

        .btn-border-stroke:hover .border-top,
        .btn-border-stroke:hover .border-bottom {
            transform: scaleX(1);
        }

        .btn-border-stroke:hover .border-left,
        .btn-border-stroke:hover .border-right {
            transform: scaleY(1);
        }

        .btn-border-stroke:hover .border-left {
            transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0);
        }

        .btn-border-stroke:hover .border-bottom {
            transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0);
        }

        .btn-border-stroke:hover .border-right {
            transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1);
        }

        .btn-border-stroke:hover .border-top {
            transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1);
        }

        .btn-text-float-up::after {
            position: absolute;
            content: attr(data-text);
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transform: translateY(35%);
            transition: 0.25s ease-out;
        }

        .btn-text-float-up .btn-text {
            display: block;
            transition: 0.75s 0.1s cubic-bezier(0.2, 1, 0.2, 1);
        }

        .btn-text-float-up:hover .btn-text {
            opacity: 0;
            transform: translateY(-25%);
            transition: 0.25s ease-out;
        }

        .btn-text-float-up:hover::after {
            opacity: 1;
            transform: translateY(0);
            transition: 0.75s 0.1s cubic-bezier(0.2, 1, 0.2, 1);
        }
    </style>
</head>

<body>
    <button data-text="Start" class="btn btn-primary btn-ghost btn-border-stroke  btn-text-float-up">
        <div class="btn-borders">
            <div class="border-top"></div>
            <div class="border-right"></div>
            <div class="border-bottom"></div>
            <div class="border-left"></div>
        </div>
        <span class="btn-text">Start</span>
    </button>
</body>

</html>

最后:
恭喜你将本文读完了。不论是过了一场视觉盛宴也好,还是学到了不少东西也好,还是直接从书签那导航到这里也好(笑),CSS的力量始终超乎你的想象。只要敢于创作,你就是这个世界的神。

0 条回应