Front-end special effects - complex snow, snowflakes flying (pure css)

Effect:

principle:

Because pure css is used, in order to realize many snowflakes, we need to create 200 divs (the amount is more than enough)

Then first set the common properties of the snowflake div: the background image of the snowflake is a snowflake, give the initial size width: 10px; height: 10px; and then position it absolutely to the upper left corner. (The upper left corner has no practical meaning. In short, put the snowflakes on the top of the window first, and then you can see them first)

Because the snowflakes are big and small, I used the zoom transform: scale(x), and I took a random number of 1-3: random(3)

Then the snowflake needs to move: transform: translate(x,y)

Because the x-axis movement of the snowflake will not be very large, just don’t make it move from left 0 to right 100vw, we need to control the drift difference of the snowflake’s x-axis between 10vw, so random(20) - 10 gives -10 ~ 10

But the initial positions of each snowflake are also different. If they are the same, then don't everyone start from one point? . So we need to set the initial position of the snowflake on the X axis: random(100)vw

Then it is to add animation: move from a certain point on the x-axis to a certain point on the x-axis (the drift difference is between 10vw), and then fall from a place invisible to our naked eyes (-5vh) to the ground at 100vh

Because there are 200 different snowflakes (size, speed), the time of each fluttering is also different, so we also need to give random numbers, but we can’t let one or some snowflakes finish in 1s, so we can also To set a minimum value of 8s

Finally, when we open the webpage, we can see the snowflakes falling in advance, so we use the delay -Xs, which means that the animation starts X seconds in advance. Similarly, for the effect of snowflakes, we can’t make all the snowflakes together X seconds ahead, but a random number.

After understanding the above principles, you can type the code by hand, but with 200 div styles, and then you have to think about random numbers, you will be exhausted

I used the sass of the CSS preprocessor

First VSCode installs the Easy Sass plugin

Then create complex snow.scss in the css folder (note: the suffix is scss)

Then write some css style casually, save it, and a css file with the same name will be automatically generated

Here we use a loop, using a random number function

cycle:

@for $i from 1 through 200 {
    // 第i个雪花div
    .snow:nth-child(#{$i}) {
        
    }
}

Random number function:

#{random(20) - 10}
#{random(3)
#{8 + random(20)}
-#{random(10)}

After understanding the above grammar, you can write directly

Complex Snowing.scss:

.snow {
    position: absolute;
    width: 10px;
    height: 10px;
    background-image: url("../imgs/snowitem.png");
    background-size: cover;
}

@keyframes move1{
    0%{
        // top: 0;
        // left: var(--left-ini);
        transform: translate(var(--left-ini),-5vh) scale(var(--size));
    }

    100%{
        // top: 100vh;
        // left: var(--left-end);
        transform: translate(var(--left-end),100vh);
    }
}

@for $i from 1 through 200 {
    .snow:nth-child(#{$i}) {
        --left-ini: #{random(20) - 10}vw;
        --left-end: #{random(20) - 10}vw;
        --size: #{random(3)};
        // top: -5vh; // 不用top的原因，就是为了不使初始状态时，空间的某块行区域是空白的，不好看，直接用y位移就可以根据时间的随机性，让空间的同时刻每一行都能含有雪花
        left: #{random(100)}vw; // 从原来的位置左右移动一点点距离，如果直接使用left当位移点，移动的跨幅太大了，不好看
        animation: move1 #{8 + random(20)}s linear -#{random(10)}s infinite; // 用了延时，就是为了能有一运行代码就能提前有雪花出现在页面上
    }
}

Complex Snow.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单下雪</title>
    <link rel="stylesheet" href="./css/复杂下雪.css" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: rgb(41, 43, 41);
            height: 100vh;
            overflow: hidden;
        }

        /* .snow {
            position: absolute;
            width: 10px;
            height: 10px;
            background-image: url("imgs/snowitem.png");
            background-size: cover;
        }

        .snow:nth-child(1) {
            top: -100px;
            left: 300px;
            transform: scale(3);
            animation: move1 22s linear -8s infinite;
        }

        @keyframes move1{
            30.11%{
                top: 20vh;
                left: -100px;
            }

            100%{
                top: 100vh;
                left: 500px;
            }
        } */
    </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>

Front-end special effects - complex snow, snowflakes flying (pure css)

Guess you like