1、js動(dòng)態(tài)創(chuàng)建DIV,指定CLASS類設(shè)置不同的背景圖樣式顯示不同的雪花效果。
2、js獲取創(chuàng)建的DIV并改變其top屬性值,當(dāng)下落的高度大于屏幕高后刪除該移動(dòng)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實(shí)現(xiàn)下雪效果【實(shí)例代碼】就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com