Home >Web Front-end >CSS Tutorial >How to achieve the effect of falling snowflakes with CSS3

How to achieve the effect of falling snowflakes with CSS3

清浅Original: 2018-12-05 14:52:246219browse

Use the animation property in CSS3 to set the animation name, animation time, speed and whether the animation loops to achieve the effect of falling snowflakes

What I will share today is to use the animation attribute in CSS3 to achieve the effect of falling snowflakes. It has a certain reference effect and I hope it will be helpful to everyone.

【Recommended Course: CSS3 Tutorial】

##Production Background picture

We can use the drawing software on the computer to draw the pattern you want to draw, such as small stars, snowflakes, hearts, etc. In this example, draw a black background on the canvas and then draw snowflakes

How to achieve the effect of falling snowflakes with CSS3

Program ideas:

First add the body A color that is the same as the background color of the picture, and then use position: fixed to generate an absolutely positioned element, position it relative to the browser window, and then set its upper, lower, left and right values to 0, in order to make the pictures fit closely together. Finally, use the animation attribute to set the animation effect

How to achieve the effect of falling snowflakes with CSS3

We can set the animation according to the animation effect we want, such as in this example:

Set the animation name to xuehua, the animation completion time to 15s, the animation speed to be the same from the beginning to the end, and the animation will be played in a wireless loop

animation: xuehua 15s linear infinite;

Program code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
        body{
            background: #000;
        }
        #xuehua{
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0; 
            background: url(&#39;images/xuehua.png&#39;);
            -webkit-animation: xuehua15s linear infinite;
            animation: snow 15s linear infinite;

        }
        @keyframes xuehua{
        0% {
            background-position: 0 0, 0 0;
        }
        100% {
            background-position: 500px 1000px, 500px 500px;
            }
        }
        @-webkit-keyframes xuehua{
            0% {
                background-position: 0 0, 0 0;
            }
            100% {
                background-position: 500px 1000px, 500px 500px;
            }
        }
    </style>
</head>
<body>
    <div id="xuehua"></div>
</body>
</html>

The renderings are as follows:

How to achieve the effect of falling snowflakes with CSS3

Summary: The above is the entire content of this article. I hope that through this article you can learn to create special effects of falling snowflakes.

The above is the detailed content of How to achieve the effect of falling snowflakes with CSS3. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to set clear button in textboxNext article：How to set clear button in textbox

See more

How to achieve the effect of falling snowflakes with CSS3

Related articles