HTML+CSS+JS réalise des flocons de neige volant (partage de code)

Comment obtenir des effets de neige en utilisant HTML+CSS+JS ? L'article suivant partagera avec vous un exemple d'utilisation de HTML+CSS+JS pour obtenir des flocons de neige volants. J'espère que cela vous sera utile.

Beaucoup d'amis du sud ne l'ont peut-être pas beaucoup vu ou n'ont jamais vu neiger. Aujourd'hui, je vous propose une petite démo qui simule une scène de neige. Tout d'abord, jetons un coup d'œil à l'effet de course

Vous pouvez cliquer pour. voir Exécuter en ligne : http://haiyong.site/xiaxue

Premier coup d'œil à la structure du projet, une image de flocon de neige, un fichier .html et l'image de flocon de neige utilisée par jquery-1.4.2.js

Je l'ai mis ici, ou vous pouvez utiliser directement l'adresse de l'image : https://img.php.cn/upload/article/000/000/024/61dea8bfbe598211.png Commencez par une image, et le contenu. dépend entièrement de JS.

Code HTML

Ce qui suit est le contenu dans le html, il n'y a rien

nbsp;html>

	
		<meta>
		<title>海拥| 雪一片一片</title>
		<meta>
		<meta>
		<meta> 
		<meta>
		<meta>
		<link>
		<style>
			body{
				background-color: #000000;
				margin: 0;/* 去掉自带的外边距 */
			}
			img{
				position: absolute;
			}
		</style>
	
	
		<script></script>		
	

Code JS :

Allumez d'abord la minuterie pour ajouter l'image du flocon de neige, ici <img src="'images/snow.png'" alt="HTML+CSS+JS réalise des flocons de neige volant (partage de code)" >可以改成<img src="'http://haiyong.site/wp-content/uploads/2021/12/snow.png'" alt="HTML+CSS+JS réalise des flocons de neige volant (partage de code)" >

setInterval(function(){
var img = $("<img  src=&#39;images/snow.png&#39; alt="HTML+CSS+JS réalise des flocons de neige volant (partage de code)" >");
$("body").append(img);

Ici, définissez la taille de le flocon de neige à 10-20px, la formule suivante signifie (0-10 + 10)px

var size = parseInt(Math.random()*11)+10;
img.css("width",size+"px");

Obtenez la largeur de l'écran

var w = $(window).width();

La plage de valeurs doit être de 0-largeur d'écran-largeur du flocon de neige

var left =parseInt(Math.random()*(w-size));

Donnez le 1 aléatoire obtenu à gauche pour l'image

img.css("left",left+"px");

Ajoutez l'animation du mouvement du flocon de neige pour obtenir la distance du mouvement du flocon de neige = hauteur de l'écran - taille du flocon de neige

var top = $(window).height()-size;

Le code dans les commentaires ci-dessous est utilisé pour vider le cache, vous pouvez l'ajouter ou non.

img.animate({"top":top+"px"},size*100)
/* .fadeOut(1000,function(){
	//当动画完成时执行此代码，清除缓存
	img.remove();
	//console.log($("img").length);
}); */
},10)

Décommentez et vous verrez que la neige qui tombe disparaîtra, comme le montre l'image ci-dessous

Si vous aimez voir la neige, vous pouvez la commenter L'effet d'aperçu est comme celui-ci

.

Ici, nous voulons implémenter L'effet est complet. Si le temps d'exécution est trop long, cela peut entraîner une utilisation excessive de la mémoire et provoquer un décalage. Vous pouvez décommenter le contenu dans le dernier commentaire du code html, afin que la neige ci-dessous le soit. Fondu lentement et supprimez-le, mais je pense que la neige est plutôt jolie, donc je ne l'ai pas laissé fondre, comme ceci :

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

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!