下雪了javascript实现雪花飞舞_javascript技巧

来源：懂视网责编：小OO 时间：2020-11-27 20:53:44

下雪了javascript实现雪花飞舞_javascript技巧

原理。1、js动态创建DIV，指定CLASS类设置不同的背景图样式显示不同的雪花效果。2、js获取创建的DIV并改变其top属性值，当下落的高度大于屏幕高后删除该移动div。3、好像不够完善勿喷。效果预览：http：//wjf444128852.github.io/demo02/snow/index.html。HTML代码。雪花飞舞。CSS代码；

推荐度：

点击下载本文 文档为doc格式

导读原理。1、js动态创建DIV，指定CLASS类设置不同的背景图样式显示不同的雪花效果。2、js获取创建的DIV并改变其top属性值，当下落的高度大于屏幕高后删除该移动div。3、好像不够完善勿喷。效果预览：http：//wjf444128852.github.io/demo02/snow/index.html。HTML代码。雪花飞舞。CSS代码；

本文实例为大家分享了雪花飞舞效果javascript实现，供大家参考，具体内容如下

原理:

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代码:

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

下雪了javascript实现雪花飞舞_javascript技巧

推荐度：

点击下载本文 文档为doc格式

标签：技巧雪花 js

热门焦点

下雪了javascript实现雪花飞舞_javascript技巧

下雪了javascript实现雪花飞舞_javascript技巧

下雪了javascript实现雪花飞舞_javascript技巧

最新推荐

猜你喜欢

热门推荐