3D炫酷雪花背景的实现

最新推荐文章于 2024-08-08 08:13:17 发布

置顶

凌晨写博客

最新推荐文章于 2024-08-08 08:13:17 发布

阅读量1.6w

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/hj12312/article/details/80547209

版权

3D炫酷雪花背景，并且雪的大小还会随时间变化。目前已经开源到码云上，源码下载地址：https://gitee.com/hj1991/snowFalling 。

效果展示（微信截动态变化背景图，效果不太好。另外，由于不会P图，雪花用的图片就是一个白色的圆，特别是近镜头的时候，效果有点搓哈，囧囧囧~，会p图的同学可以将ParticleSmoke.png P成无背景的雪花图片，要是能把P好的图片给我的话就太谢谢了！）：

代码讲解：

index.html

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">

<meta name="viewport" content="width=device-width,hight=device-hight,minimum-scale=1.0,maximum-scale=1.0,ser-scalable=none">
<title>开始下雪了</title>
<link type="text/css" rel="stylesheet" href="">

<style>
*{margin: 0;padding: 0;overflow: hidden;}
body{
	background-image:url('images/background.jpg');
	background-size:cover;
	background-repeat: no-repeat;
	position: relative;
	width:100%;
}

</style>
</head>

<body>
<audio autoplay="autoplay" loop="loop"><source src="js/网络歌手-冰海.mp3" type="audio/ogg"></audio>
</body>
<script type="text/javascript" src="./js/ThreeCanvas.js"></script>
<script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/Snow.js"></script>
<script type="text/javascript" src="./js/snowFall.js"></script>
<script type="text/javascript" src="./js/snowFalling.js"></script>
<script>
	$.snowFall