程序员的浪漫：如何用HTML+JS制作圣诞节雪花特效(附带源码)
Posted stalin_
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了程序员的浪漫：如何用HTML+JS制作圣诞节雪花特效(附带源码)相关的知识，希望对你有一定的参考价值。
圣诞节马上就要到了，作为一个程序员一定得给女朋友一个不一样的惊喜（其实就是抠门）。
哈哈，那么为她做一个专属雪花特效怎么样呢~我觉得很棒！
效果如下图所示：
那么这么酷炫的操作是怎么完成的呢，其实很简单，只需要html，一张背景图和js就可以做到。
1、准备背景图（可以用我的或者自己找一个更好的）
找好背景图先创建一个资源文件目录static，然后将背景图放进去。
2、编写html
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>下雪特效</title>
<script type="text/javascript" src="static/jquery-1.8.3.js"></script>
<script src="static/jq.js"></script>
<!--下面是调用方法和参数说明-->
<script>
$(function()
$.fn.snow(
//Container:'.aixin',//这里是你想在哪个元素处出现雪花，这里可以是class也可以是id
minSize: 5, //雪花的最小尺寸
maxSize: 50, //雪花的最大尺寸
newOn: 30 //雪花出现的频率 这个数值越小雪花越多
//content:<img src="./001_240.jpg" style="width:100%">,//这里是你想用的图片，如果不写这行代码，则默认为雪花
//documentHeight :$(".aixin").height(),
//documentWidth :$(".aixin").width(),
//flakeColor : "#ff2727"
);
);
</script>
</head>
<body >
<div class="all" >
<!--<img src="./圣诞节.jpg" alt=""> -->
<div class = "word">Wish You Merry Christmas~</div>
</div>
</body>
<style>
.all
display:flex;
justify-content:space-around;
text-align:center;
height:675px;
width:1200px;
background-image:url(static/圣诞节.jpg);
.word
color:green;
text-align: center;
width: inherit;
height:inherit;
font-size: 50px;
position: absolute;/*设为绝对定位*/
</style>
</html>
3、编写js文件，引入jquery库文件，将这两个文件也放入static文件夹下。
编写js文件：
(function($)
$.fn.snow = function(options)
var $flake = $('<div id="snowbox" />').css('position': 'absolute', 'top': '-50px').html('❄'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults =
minSize : 10, //雪花的最小尺寸
maxSize : 20, //雪花的最大尺寸
newOn : 1000, //雪花出现的频率
flakeColor : "#FFFFFF"
,
options = $.extend(, defaults, options);
var interval = setInterval( function()
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - 100,
endPositionLeft = startPositionLeft - 100 + Math.random() * 100,
durationFall = documentHeight * 10 + Math.random() * 5000;
$flake.clone().appendTo('body').css(
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake,
color: options.flakeColor
).animate(
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
,durationFall,'linear',function()
$(this).remove()
);
, options.newOn);
;
)(jQuery);
jquery库文件可已经为大家提供好了，当然也可以自己去找：
链接：https://pan.baidu.com/s/1a6oAqm-nr8GuyX0vUFArig
提取码：su9g
4、最后用浏览器打开html文件即可。
这效果，那叫一个地道~ 等着女朋友对你深沉的爱吧（手动狗头）~
不开玩笑了，虽然给女朋友用处不大，但是这个技术还是值得掌握的~
喜欢的朋友欢迎点赞，评论，关注哦~~
以上是关于程序员的浪漫：如何用HTML+JS制作圣诞节雪花特效(附带源码)的主要内容，如果未能解决你的问题，请参考以下文章