❤ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (125套) 】
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！
📂文章目录
二、📚网站介绍三、🔗网站效果▶️1.视频演示🧩 2.图片演示四、💒 网站代码🧱HTML结构代码🏠JS代码五、🎁更多源码二、📚网站介绍
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等
（3）📄 js文件包含：页面炫酷效果实现
三、🔗网站效果
▶️1.视频演示
20-爱心雨(满屏爱心飘落)
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>爱心雨</title><style>body {overflow: hidden;margin: 0 auto;background: url('img/16.jpg') no-repeat;background-attachment: fixed;background-size: cover;-moz-background-size: cover;-webkit-background-size: cover;}.snowfall-flakes:before {content: "";/*绝对定位*/position: absolute;left: 0px;top: 0px;width: 10px;height: 16px;transform: rotate(-45deg);background-color: red;border-radius: 5px 5px 1px 1px;}.snowfall-flakes:after {content: "";/*激活伪元素的必要因素*/position: absolute;left: 0px;top: 0px;width: 10px;height: 16px;transform: translateX(4.3px) rotate(45deg);background-color: red;border-radius: 5px 5px 1px 1px;}</style></head><body><div class="wrap"></div><script type="text/javascript" src="js/jquery-3.1.1.min.js"></script><script type="text/javascript" src="js/snowfall.jquery.min.js"></script><script type="text/javascript">$(document).snowfall({flakeCount: 100,maxSpeed: 5});</script></body></html>
🏠JS代码
Date.now || (Date.now = function() {return (new Date).getTime()}),function() {"use strict";for (var t = ["webkit", "moz"], e = 0; e < t.length && !window.requestAnimationFrame; ++e) {var i = t[e];window.requestAnimationFrame = window[i + "RequestAnimationFrame"], window.cancelAnimationFrame = window[i + "CancelAnimationFrame"] || window[i + "CancelRequestAnimationFrame"]}if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) || !window.requestAnimationFrame || !window.cancelAnimationFrame) {var s = 0;window.requestAnimationFrame = function(t) {var e = Date.now(),i = Math.max(s + 16, e);return setTimeout(function() {t(s = i)}, i - e)}, window.cancelAnimationFrame = clearTimeout}}(),function(t) {t.snowfall = function(e, i) {function s(s, n, a, o) {this.x = s, this.y = n, this.size = a, this.speed = o, this.step = 0, this.stepSize = h(1, 10) / 100, i.collection && (this.target = m[h(0, m.length - 1)]);var r = null;i.image ? (r = document.createElement("img"), r.src = i.image) : (r = document.createElement("div"), t(r).css({background: i.flakeColor})), t(r).attr({"class": "snowfall-flakes"}).css({width: this.size,height: this.size,position: i.flakePosition,top: this.y,left: this.x,fontSize: 0,zIndex: i.flakeIndex}), t(e).get(0).tagName === t(document).get(0).tagName ? (t("body").append(t(r)), e = t("body")) : t(e).append(t(r)), this.element = r, this.update = function() {if (this.y += this.speed, this.y > l - (this.size + 6) && this.reset(), this.element.style.top = this.y + "px", this.element.style.left = this.x + "px", this.step += this.stepSize, this.x += y === !1 ? Math.cos(this.step) : y + Math.cos(this.step), i.collection && this.x > this.target.x && this.x < this.target.width + this.target.x && this.y > this.target.y && this.y < this.target.height + this.target.y) {var t = this.target.element.getContext("2d"),e = this.x - this.target.x,s = this.y - this.target.y,n = this.target.colData;if (void 0 !== n[parseInt(e)][parseInt(s + this.speed + this.size)] || s + this.speed + this.size > this.target.height)if (s + this.speed + this.size > this.target.height) {for (; s + this.speed + this.size > this.target.height && this.speed > 0;) this.speed *= .5;t.fillStyle = "#fff", void 0 == n[parseInt(e)][parseInt(s + this.speed + this.size)] ? (n[parseInt(e)][parseInt(s + this.speed + this.size)] = 1, t.fillRect(e, s + this.speed + this.size, this.size, this.size)) : (n[parseInt(e)][parseInt(s + this.speed)] = 1, t.fillRect(e, s + this.speed, this.size, this.size)), this.reset()} else this.speed = 1, this.stepSize = 0, parseInt(e) + 1 < this.target.width && void 0 == n[parseInt(e) + 1][parseInt(s) + 1] ? this.x++ : parseInt(e) - 1 > 0 && void 0 == n[parseInt(e) - 1][parseInt(s) + 1] ? this.x-- : (t.fillStyle = "#fff", t.fillRect(e, s, this.size, this.size), n[parseInt(e)][parseInt(s)] = 1, this.reset())}(this.x + this.size > d - c || this.x < c) && this.reset()}, this.reset = function() {this.y = 0, this.x = h(c, d - c), this.stepSize = h(1, 10) / 100, this.size = h(100 * i.minSize, 100 * i.maxSize) / 100, this.element.style.width = this.size + "px", this.element.style.height = this.size + "px", this.speed = h(i.minSpeed, i.maxSpeed)}}function n() {for (r = 0; r < a.length; r += 1) a[r].update();f = requestAnimationFrame(function() {n()})}var a = [],o = {flakeCount: 35,flakeColor: "#ffffff",flakePosition: "absolute",flakeIndex: 999999,minSize: 1,maxSize: 2,minSpeed: 1,maxSpeed: 5,round: !1,shadow: !1,collection: !1,collectionHeight: 40,deviceorientation: !1},i = t.extend(o, i),h = function(t, e) {return Math.round(t + Math.random() * (e - t))};t(e).data("snowfall", this);var r = 0,l = t(e).height(),d = t(e).width(),c = 0,f = 0;if (i.collection !== !1) {var p = document.createElement("canvas");if (p.getContext && p.getContext("2d"))for (var m = [], w = t(i.collection), g = i.collectionHeight, r = 0; r < w.length; r++) {var u = w[r].getBoundingClientRect(),x = t("<canvas/>", {"class": "snowfall-canvas"}),z = [];if (u.top - g > 0) {t("body").append(x), x.css({position: i.flakePosition,left: u.left + "px",top: u.top - g + "px"}).prop({width: u.width,height: g});for (var v = 0; v < u.width; v++) z[v] = [];m.push({element: x.get(0),x: u.left,y: u.top - g,width: u.width,height: g,colData: z})}} else i.collection = !1}for (t(e).get(0).tagName === t(document).get(0).tagName && (c = 25), t(window).bind("resize", function() {l = t(e)[0].clientHeight, d = t(e)[0].offsetWidth}), r = 0; r < i.flakeCount; r += 1) a.push(new s(h(c, d - c), h(0, l), h(100 * i.minSize, 100 * i.maxSize) / 100, h(i.minSpeed, i.maxSpeed)));i.round && t(".snowfall-flakes").css({"-moz-border-radius": i.maxSize,"-webkit-border-radius": i.maxSize,"border-radius": i.maxSize}), i.shadow && t(".snowfall-flakes").css({"-moz-box-shadow": "1px 1px 1px #555","-webkit-box-shadow": "1px 1px 1px #555","box-shadow": "1px 1px 1px #555"});var y = !1;i.deviceorientation && t(window).bind("deviceorientation", function(t) {y = .1 * t.originalEvent.gamma}), n(), this.clear = function() {t(".snowfall-canvas").remove(), t(e).children(".snowfall-flakes").remove(), cancelAnimationFrame(f)}}, t.fn.snowfall = function(e) {return "object" == typeof e || void 0 == e ? this.each(function() {new t.snowfall(this, e)}) : "string" == typeof e ? this.each(function() {var e = t(this).data("snowfall");e && e.clear()}) : void 0}}(jQuery);
五、🎁更多源码
1.如果我的博客对你有帮助请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
