圣诞树的雪花飘飘(结尾附源码)

写在前面:博主是一只经过实战开发历练后投身培训事业的“小山猪”,昵称取自动画片《狮子王》中的“彭彭”,总是以乐观、积极的心态对待周边的事物。本人的技术路线从Java全栈工程师一路奔向大数据开发、数据挖掘领域,如今终有小成,愿将昔日所获与大家交流一二,希望对学习路上的你有所助益。同时,博主也想通过此次尝试打造一个完善的技术图书馆,任何与文章技术点有关的异常、错误、注意事项均会在末尾列出,欢迎大家通过各种方式提供素材。

  • 对于文章中出现的任何错误请大家批评指出,一定及时修改。
  • 有任何想要讨论和学习的问题可联系我:zhuyc@vip.163.com。
  • 发布文章的风格因专栏而异,均自成体系,不足之处请大家指正。

圣诞树的雪花飘飘(结尾附源码)

本文关键字:圣诞节、雪花、圣诞树、动画、前端

一、小编碎碎念

又是一年圣诞节,刚好赶上周末,狠狠的休息了两天。节日过了之后才起来看一下有没有什么活动,还好持续周期比较长,赶上年末,好些活动的时间都重叠在了一起。作为勋章收割机,一看到活动有勋章送,那肯定是不能错过,想来写一个雪花飘落❄️配上圣诞树🎄也是极好的~

二、代码效果

由于使用前端实现,所以代码结构十分简单,参考了一些效果不错的代码,重新修饰了一下,雪中的圣诞树就出现了。

1. 运行效果

尝试画了一下圣诞树,但是感觉画来画去一直都是卡通系,最后还是直接找一张png图片来的快一点,整体效果还是不错的,顺便温习了一下前端知识,巴适的很~

2. 核心代码

雪花的飘落效果主要是由js来控制,生成一个canvas,调整好定位方式,就可以覆盖整个网页,代码如下:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>🌟🎄</title>
		<script src="js/jquery.js" type="text/javascript"></script>
		<script src="js/snowy.js" type="text/javascript"></script>
		<script src="js/Snow.js" type="text/javascript"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.snow-container {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				pointer-events: none;
				z-index: 999;

			}

			.img {
				width: 100%;
				height: 2000px;
				background-color: black;
				text-align: center;
			}

			.img img {
				margin-top: 300px;
			}
		</style>
	</head>
	<body>
		<div class="snow-container"></div>
		<div class="img">
			<img src="img/tree.png" alt="" height="500" />
		</div>
	</body>
</html>

3. 代码说明

  • js文件:需要用到3个js文件,注意次序
    • jquery放在最上面
    • 引入snowy.js
    • Snow.js放在最后
  • css样式

首先需要去掉所有的外边距内边距,否则可能会产生白边【看雪花当然是要用黑色背景啦】,但是如果你的网页使用丰富的内容进行填充可以忽略。
放置图片的div设置了很大的height值,主要原因是因为页面没有其它内容进行填充,需要把高度稍微的撑一下,自己在玩耍的时候可以去掉。

  • body内容

在body的开头设定一个class为snow-container的div,这样雪花效果就可以出来了,自定义的网页内容只需要顺次写在后面就可以了。

三、源码直达

扫描下方二维码,加入CSDN官方粉丝微信群,可以与我直接交流,还有更多福利哦~
在这里插入图片描述

  • 31
    点赞
  • 115
    收藏
    觉得还不错? 一键收藏
  • 10
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值