Home
Programming

Snow Falling Effect Pure HTML and CSS

Syiainfoku make a Snow Falling Effect Pure HTML and CSS
Snow Falling Effect Pure HTML and CSS

Hello friends!

Welcome back, with me the founder of Syiainfoku. You will learn together on the Syiainfoku blog how to make a Snow Falling Effect no JavaScript pure HTML and CSS.

Ok, let's get started

Preview Snow Falling Effect

Preview Snow Falling Effect

More or less the result will be like in the picture above.

Source Code and Brief Explanation

To make this program [Snow Falling Effect]. First you need to create two Files, one HTML File and one CSS File. After creating these files, just paste the following code into your file. You can also download the source code file of this Snow Falling Effect from the given download button.

First, create an HTML file with the name index.html and paste the given code in your HTML file. Remember, you must create a file with an .html extension.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snow Falling Effect | hitoricoding</title>
    <link rel="stylesheet" href="./assets/style.css">
</head>

<body>
    <section>
        <h1>Yukinoshita Yukino</h1>
        <div class="yuuki1"></div>
        <div class="yuuki2"></div>
        <div class="yuuki3"></div>
    </section>
</body>

</html>

Finally, create a CSS file with the name style.css and paste the given code in your CSS file. Remember, you must create a file with a .css extension.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

section {
    background: url(../assets/yukinoKU.jpg);
    background-size: cover;
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 70px;
    letter-spacing: 3px;
    padding: 90px 40px;
    color: #e7efff;
}

.yuuki1 {
    background: url(../assets/snowKU.png);
    background-repeat: repeat;
    width: 100%;
    height: 638px;
    position: absolute;
    top: 0;
    left: 0;
    animation: animate1 20s linear infinite;
}

@keyframes animate1 {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: 100px 630px;
    }
}

.yuuki2 {
    background-size: 400px;
    background: url(../assets/snowKU.png);
    background-repeat: repeat;
    filter: blur(2px);
    width: 100%;
    height: 638px;
    position: absolute;
    top: 0;
    left: 0;
    animation: animate2 20s linear infinite;
}

@keyframes animate2 {
    0% {
        background-position: 0px -100px;
    }

    100% {
        background-position: 0px 630px;
    }
}

.yuuki3 {
    background-size: 200px;
    background: url(../assets/snowKU.png);
    background-repeat: repeat;
    filter: blur(4px);
    width: 100%;
    height: 638px;
    position: absolute;
    top: 0;
    left: 0;
    animation: animate3 20s linear infinite;
}

@keyframes animate3 {
    0% {
        background-position: 0px 100px;
    }

    100% {
        background-position: 100px 630px;
    }
}

@media screen and (max-width: 900px) {

    h1 {
        font-size: 40px;
        letter-spacing: 3px;
        padding: 180px 40px;
    }
}

That's it, now you have successfully created a Snow Falling Effect, If your code is not working or you are facing any error/problem, please download the source code file from the given download button. It's free and a .zip file will be downloaded then you have to extract it.

Download 

Closing

Thank you for those of you who have read and downloaded this source code, hopefully it can be useful and add to your insight.

If you found this article useful, you can share it. That's all from me, and THANK YOU

Post a Comment