• 欢迎访问杨思积的博客,专注于前端资讯分享,前端技术交流!

逼真的下雪效果

精选代码 Tomy 454次浏览 已收录 0个评论 扫描二维码
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>再次推荐一款逼真的下雪效果</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	body{
		background-image:url('http://demo.lanrenzhijia.com/2016/snow0302/images/snow_bk.jpg');
		background-size:cover;
		background-repeat: no-repeat;
		background-color:#222;
		position: relative;
		width:100%;
	}
	#code{
		width:40%;
		min-width:450px;
		height:450px;
		background-color:rgba(0, 0, 0, 0.3);
		position:fixed;
		left:30%;
		top:20%;
		border-radius: 10px;
		font-size:16px;
		line-height:22px;
		font-weitht:bold;
	}
	#author{
		position: fixed;
		bottom: 10px;
		left: 48%;
	}
	#author a{
		text-decoration: none;}
	.key{
		color:orange;
		font-family:'';
	}
	.comment{
		color:#e6e6e6;
		font-weight: 800;
	}
	</style>
</head>
<body>
	<script src="http://demo.lanrenzhijia.com/2016/snow0302/js/ThreeCanvas.js"></script>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="http://demo.lanrenzhijia.com/2016/snow0302/js/Snow.js"></script>
	<script src="http://demo.lanrenzhijia.com/2016/snow0302/js/snowFall.js"></script>
	<script>
		$.snowFall({
			//创建粒子数量,密度
			particleNo: 500,
			//粒子下拉速度
			particleSpeed:30,
			//粒子在垂直(Y轴)方向运动范围
			particleY_Range:1300,
			//粒子在垂直(X轴)方向运动范围
			particleX_Range:1000,
			//是否绑定鼠标事件
		    bindMouse: false,
		    //相机离Z轴原点距离
		    zIndex:600,
		  //摄像机视野角度
		    angle:55,
		    wind_weight:0
			});
	</script>
	<canvas>
	</canvas>
	<!-- 代码部分end -->
</body>
</html>

代码演示
杨思积的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明逼真的下雪效果
喜欢 (0)
[嘿嘿,你懂的]
分享 (0)
Tomy
关于作者:
一个前端爱好者!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址