❤ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (125套) 】
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！
二、📚网站介绍
📒网站文件方面：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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
1009
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
