javascript實現下雪效果【實例代碼】_javascript技巧

來源：懂視網責編：小采時間：2020-11-27 21:49:57

javascript實現下雪效果【實例代碼】_javascript技巧

javascript實現下雪效果【實例代碼】_javascript技巧:原理 : 1、js動態創建DIV,指定CLASS類設置不同的背景圖樣式顯示不同的雪花效果。 2、js獲取創建的DIV并改變其top屬性值，當下落的高度大于屏幕高后刪除該移動div 3、好像不夠完善勿噴 HTML代碼：雪花飛舞 CSS代碼 *{ m

推薦度：

點擊下載本文 文檔為doc格式

導讀javascript實現下雪效果【實例代碼】_javascript技巧:原理 : 1、js動態創建DIV,指定CLASS類設置不同的背景圖樣式顯示不同的雪花效果。 2、js獲取創建的DIV并改變其top屬性值，當下落的高度大于屏幕高后刪除該移動div 3、好像不夠完善勿噴 HTML代碼：雪花飛舞 CSS代碼 *{ m

原理 :

1、js動態創建DIV,指定CLASS類設置不同的背景圖樣式顯示不同的雪花效果。

2、js獲取創建的DIV并改變其top屬性值，當下落的高度大于屏幕高后刪除該移動div

3、好像不夠完善勿噴

HTML代碼：




 
 雪花飛舞

CSS代碼

*{
 margin:0;
 padding:0;
 list-style: none;
 border: none;
}
body{
 width: 100%;
 height:600px;
 background:#000;
}
.snow_parent{
 position: relative;
 width: 100%;
 height:100%;
 overflow: hidden;
 margin: 0 auto;
}
.snow_parent div.parent{
 background-image: url(../img/snow.png);
 float: left;
 -webkit-transform: scale(.1);
 -moz-transform: scale(.1);
 -o-transform: scale(.1);
 -ms-transform: scale(.1);
 transform: scale(.1);
 position: absolute;
}
.snow_one{
 width: 180px;
 height: 180px;
 background-position:0 0;
 background-repeat: no-repeat;
 left:-70px;
 top: -95px;
}
.snow_two{
 width: 140px;
 height: 140px;
 background-position:-220px -18px;
 left:-30px;
 top: -75px;
}
.snow_three{
 width:150px;
 height: 150px;
 background-position:-400px -15px;
 left:-20px;
 top: -80px;
}
.snow_four{
 width: 160px;
 height: 160px;
 background-position:-10px -206px; 
}
.snow_four{
 left:-10px;
 top: -85px;
}

JS代碼:

以上這篇javascript實現下雪效果【實例代碼】就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com