时间：2021-07-01 10:21:17 帮助过：16人阅读
原理:
1、js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果。
2、js获取创建的DIV并改变其top属性值，当下落的高度大于屏幕高后删除该移动div
3、好像不够完善勿喷
效果预览:http://wjf444128852.github.io/demo02/snow/index.html
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程序设计有所帮助。