HTML+CSS+JS實作雪花飄揚（程式碼分享）

使用HTML CSS JS如何實現下雪特效？以下這篇文章跟大家分享一個HTML CSS JS實現雪花飄揚的範例，希望對大家有幫助。

很多南方的小夥伴可能沒怎麼見過或從來沒見過下雪，今天我給大家帶來一個小Demo，模擬了下雪場景，首先讓我們看一下運行效果

可以點擊看看在線運行：http://haiyong.site/xiaxue

#首先看看項目結構，一張雪花圖片，一個. html檔案和jquery-1.4.2.js

用到的雪花圖片我放在這裡了，或者可以直接用圖片位址：https://img.php .cn/upload/article/000/000/024/61dea8bfbe598211.png 開局一張圖，內容全靠JS。

HTML程式碼

#下面這是html 裡的內容，沒啥東西

nbsp;html>

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

JS程式碼：

#首先開啟定時器加入雪花圖片，這裡的<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/406/305/465/1641982792324192.gif" class="lazy" alt="HTML+CSS+JS實作雪花飄揚（程式碼分享）" >可以改成<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/406/305/465/1641982792324192.gif" class="lazy" alt="HTML+CSS+JS實作雪花飄揚（程式碼分享）" >

setInterval(function(){
var img = $("<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/image/406/305/465/1641982792324192.gif"  class="lazy"  src=&#39;images/snow.png&#39; alt="HTML+CSS+JS實作雪花飄揚（程式碼分享）" >");
$("body").append(img);

這裡設定雪花的尺寸為10-20px,下面的公式即表示(0-10 10)px

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

得到螢幕寬度

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

取值範圍應該是0-螢幕寬度-雪花寬度

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

把得到的隨機1eft給到圖片

r​​rreee

添加雪花移動的動畫，得到雪花移動的距離= 螢幕高度-雪花尺寸

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

下面註解中的程式碼是用來清除快取的，可加可不加。

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

取消註解就會看到落下的雪會消失，如下圖所示

#喜歡看積雪就可以把它註解掉，預覽效果像下面這樣

到這裡我們要實現的效果就完成了，如果運行時間過長可能會導致內存佔用過多造成卡頓現象，可以將html程式碼中的最後一段註釋裡的內容取消註釋，這樣到下面的積雪就會慢慢淡出並且remove刪除了，不過我覺得積雪也挺好看的，就沒讓它融化，像下面這樣：

（學習影片分享：css影片教學）

以上是HTML+CSS+JS實作雪花飄揚（程式碼分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！