Comment obtenir l'effet de chute de flocons de neige avec CSS3-tutoriel CSS-php.cn

Comment obtenir l'effet de chute de flocons de neige avec CSS3

清浅

Libérer： 2018-12-12 09:04:14

original

6181 Les gens l'ont consulté

Utilisez l'attribut d'animation en CSS3 pour définir le nom de l'animation, la durée de l'animation, la vitesse et si l'animation boucle pour obtenir l'effet de chute de neige

Ce que je vais partager aujourd'hui, c'est utiliser l'attribut d'animation en CSS3 pour obtenir l'effet de chute de flocons de neige. Cela a un certain effet de référence et j'espère que cela sera utile à tout le monde.

[Cours recommandé : Tutoriel CSS3]

Production Image de fond

Nous pouvons utiliser le logiciel de dessin sur l'ordinateur pour dessiner le motif que vous souhaitez, comme des petites étoiles, des flocons de neige, des cœurs, etc. Dans cet exemple, dessinez un fond noir sur la toile puis dessinez des flocons de neige

Comment obtenir l'effet de chute de flocons de neige avec CSS3

Idée de programmation :

Ajoutez d'abord le corps A couleur identique à la couleur d'arrière-plan de l'image, puis utilisez position:fixed pour générer un élément positionné de manière absolue, positionnez-le par rapport à la fenêtre du navigateur, puis définissez ses valeurs supérieure, inférieure, gauche et droite sur 0 , afin que les images s'emboîtent étroitement. Enfin, utilisez l'attribut d'animation pour définir l'effet d'animation

Comment obtenir l'effet de chute de flocons de neige avec CSS3

Nous pouvons définir l'animation en fonction de l'effet d'animation souhaité, comme dans cet exemple :

Définissez le nom de l'animation sur xuehua, le temps d'achèvement de l'animation sur 15 s, la vitesse de l'animation doit être la même du début à la fin, et l'animation sera jouée dans un boucle sans fil

animation: xuehua 15s linear infinite;

Copier après la connexion

Code du programme

<!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>

Copier après la connexion

Les rendus sont les suivants :

Comment obtenir leffet de chute de flocons de neige avec CSS3

Résumé : Ce qui précède représente l'intégralité du contenu de cet article. J'espère que grâce à cet article, vous pourrez apprendre à créer des effets spéciaux de chute de flocons de neige.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!