雪花飘落 css版
雪花下落的速度
snowflake.speed = [8,10];
速度为区间数值的随机数
使用setInterval定时器每80毫秒创建一个雪花
setInterval(“snowflake.snowflakeAdd()”,80);
雪花飘落的频率可以自己设置
图片路径自己替换下
<img src="images/christmas.jpg" style="width:100%;">
jq链接记得替换下
完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>雪花下落</title>
</head>
<script src="../js/jquery-1.7.2.min.js"></script>
<style>
*{padding: 0;margin: 0;}
body,html{
background:#000;
width: 100%;
height: 100%;
overflow:hidden;
}
#snowflakeBox{height:100%; position:relative;}
</style>
<div id="snowflakeBox">
<img src="images/christmas.jpg" style="width:100%;">
</div>
<script>
function snowflake(snowflakeBox)
{
var snowflakeThis = this;
this.speed = [8,10]; //雪花下落的速度
// 定义块初始位置样式
this.draw = function(odiv)
{
var startPosLeft = Math.ceil(Math.random() * $(document).width());//设置雪花随机的开始x值的大小
var oOpacity = this.getRandInt(6,10)/10; //设置透明度
var oLeft = startPosLeft+'px';
var oTop = "0px";
var oColor = "#fff";
var oFontSize = this.getRandInt(12,25)+"px";
odiv.css({"opacity":oOpacity,"left":oLeft,"color":oColor,"font-size":oFontSize,"top":oTop});
}
// 新增块
this.snowflakeAdd = function()
{
var snowflakeOne = "<div class='snowflakeItem' style='animation:snowflakeItemAnimation "+this.getRandInt(this.speed[0],this.speed[1])+"s ease-in forwards'>";
snowflakeOne += this.randIcon();
snowflakeOne += "</div>";
snowflakeBox.append(snowflakeOne); //把创建好的div放进flame中
that = snowflakeBox.children(".snowflakeItem:last-child");
this.draw(that); //执行obj的draw方法
}
// 随机雪花
this.randIcon = function()
{
var icon = ["❅","❄","❅","❄","✽"];
return icon[this.getRandInt(0,4)];
}
// 随机整数
this.getRandInt = function(start,end)
{
var rand = parseInt(Math.random() * (end - start + 1) + start);
return rand;
}
return this;
}
$(function(){
var snowflakeBox= $("#snowflakeBox");
var snowflakeFunc = snowflake(snowflakeBox);
//雪花下落的速度
snowflakeFunc.speed = [8,10];
snowflakeFunc.snowflakeAdd();
/*使用setInterval定时器每80毫秒创建一个雪花*/
setInterval(snowflakeFunc.snowflakeAdd,8);
})
</script>
<style>
.snowflakeItem{ position:absolute; /*animation:snowflakeItemAnimation 5s ease-in forwards ;*/}
@keyframes snowflakeItemAnimation
{
0% {top:unset;bottom:100%;}
1% {top:unset;bottom:100%;}
100% {top:unset;bottom:-30px;opacity:0;}
}
</style>
</html>