漫天飞舞的雪花效果
Github:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: black;
}
</style>
</head>
<body>
</body>
<script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var minsize = 5,
maxsize = 50,
time1 = 100,
snowColor = "#fff";
var snow = $("<div></div>").css({
"position": "absolute",
"top": "-50px"
}).html("❄");
$(function() {
var documentWidth = $(document).width();
var documentHeight = $(document).height();
setInterval(function() {
var startPositionLeft = Math.random() * documentWidth;//起始X位置
var startOpacity = 0.7 + Math.random() * 0.3;//起始透明度
var endPositionLeft = Math.random() * documentWidth;//终止x位置
var endPositionTop = documentHeight;//终止y位置
var fallSpeed = 4000 + Math.random() * 3000;//下降速度
var snowSize = minsize + Math.random() * maxsize;//雪花随机尺寸
snow.clone().appendTo("body").css({
"left": startPositionLeft,
"font-size": snowSize,
"opacity": startOpacity,
"color": snowColor
}).animate({
"top": endPositionTop,
"left": endPositionLeft,
"opacity": 0.5,
}, fallSpeed, function() {
$(this).remove();
});
}, time1);
})
</script>
</html>
