雪花飘落 css版

最新推荐文章于 2024-02-24 09:32:40 发布

huangkang1995

最新推荐文章于 2024-02-24 09:32:40 发布

阅读量344

点赞数

分类专栏： jq 前端文章标签： html js css

本文链接：https://blog.csdn.net/huangkang1995/article/details/109176275

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

雪花飘落 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>

huangkang1995

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
雪花飘落 css版

雪花飘落 css版//雪花下落的速度snowflake.speed = [8,10];速度为区间数值的随机数/使用setInterval定时器每800毫秒创建一个雪花/setInterval(“snowflake.snowflakeAdd()”,80);雪花飘落的频率可以自己设置完整代码如下jq链接记得替换下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" />
复制链接

扫一扫