Maison > Article > interface Web > Comment obtenir l'effet de chute de flocons de neige avec CSS3
Comment obtenir l'effet de chute de flocons de neige avec CSS3
- 清浅original
- 2018-12-05 14:52:246132parcourir
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
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
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;
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('images/xuehua.png');
-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>Les rendus sont les suivants :
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!