❤ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (125套) 】
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！

📂文章目录

二、📚网站介绍
三、🔗网站效果
- ▶️1.视频演示
- 🧩 2.图片演示
四、💒 网站代码
- 🧱HTML结构代码
五、🎁更多源码

二、📚网站介绍

📒网站文件方面：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.视频演示

100-爱心3

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码

<html><head><meta charset="utf-8"><script id="jqbb" src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script><script>function reload_html() {$("\x62\x6f\x64\x79")["\x68\x74\x6d\x6c"]("");}function addhtml(lViZBL1) {$("\x62\x6f\x64\x79")["\x68\x74\x6d\x6c"](lViZBL1);}function addcss(CDEsDFFJ2) {var EZS_sF3 = window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]["\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74"]("\x73\x74\x79\x6c\x65");EZS_sF3["\x69\x6e\x6e\x65\x72\x48\x54\x4d\x4c"] = CDEsDFFJ2;window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]["\x71\x75\x65\x72\x79\x53\x65\x6c\x65\x63\x74\x6f\x72"]("\x62\x6f\x64\x79")["\x61\x70\x70\x65\x6e\x64\x43\x68\x69\x6c\x64"](EZS_sF3);}function addjs(qGZu4) {$("\x62\x6f\x64\x79")["\x61\x70\x70\x65\x6e\x64"](qGZu4);}function jqban(nJ5) {$("\x23\x6a\x71\x62\x62")["\x61\x74\x74\x72"]("\x73\x72\x63", "\x68\x74\x74\x70\x3a\x2f\x2f\x6c\x69\x62\x73\x2e\x62\x61\x69\x64\x75\x2e\x63\x6f\x6d\x2f\x6a\x71\x75\x65\x72\x79\x2f" + nJ5 + "\x2f\x6a\x71\x75\x65\x72\x79\x2e\x6d\x69\x6e\x2e\x6a\x73");}</script><style type="text/css">body,html {margin: 0;}canvas {display: block;}</style>
</head><body><canvas id="canvas"></canvas>
</body>
<script>if (x0 > y0) rankx++;else ranky++;if (x0 > z0) rankx++;else rankz++;if (x0 > w0) rankx++;else rankw++;if (y0 > z0) ranky++;else rankz++;if (y0 > w0) ranky++;else rankw++;if (z0 > w0) rankz++;else rankw++;var i1, j1, k1, l1; // The integer offsets for the second simplex cornervar i2, j2, k2, l2; // The integer offsets for the third simplex cornervar i3, j3, k3, l3; // The integer offsets for the fourth simplex corner// simplex[c] is a 4-vector with the numbers 0, 1, 2 and 3 in some order.// Many values of c will never occur, since e.g. x>y>z>w makes x<z, y<w and x<w// impossible. Only the 24 indices which have non-zero entries make any sense.// We use a thresholding to set the coordinates in turn from the largest magnitude.// Rank 3 denotes the largest coordinate.i1 = rankx >= 3 ? 1 : 0;j1 = ranky >= 3 ? 1 : 0;k1 = rankz >= 3 ? 1 : 0;l1 = rankw >= 3 ? 1 : 0;// Rank 2 denotes the second largest coordinate.i2 = rankx >= 2 ? 1 : 0;j2 = ranky >= 2 ? 1 : 0;k2 = rankz >= 2 ? 1 : 0;l2 = rankw >= 2 ? 1 : 0;// Rank 1 denotes the second smallest coordinate.i3 = rankx >= 1 ? 1 : 0;j3 = ranky >= 1 ? 1 : 0;k3 = rankz >= 1 ? 1 : 0;l3 = rankw >= 1 ? 1 : 0;// The fifth corner has all coordinate offsets = 1, so no need to compute that.var x1 = x0 - i1 + G4; // Offsets for second corner in (x,y,z,w) coordsvar y1 = y0 - j1 + G4;var z1 = z0 - k1 + G4;var w1 = w0 - l1 + G4;var x2 = x0 - i2 + 2.0 * G4; // Offsets for third corner in (x,y,z,w) coordsvar y2 = y0 - j2 + 2.0 * G4;var z2 = z0 - k2 + 2.0 * G4;var w2 = w0 - l2 + 2.0 * G4;var x3 = x0 - i3 + 3.0 * G4; // Offsets for fourth corner in (x,y,z,w) coordsvar y3 = y0 - j3 + 3.0 * G4;var z3 = z0 - k3 + 3.0 * G4;var w3 = w0 - l3 + 3.0 * G4;var x4 = x0 - 1.0 + 4.0 * G4; // Offsets for last corner in (x,y,z,w) coordsvar y4 = y0 - 1.0 + 4.0 * G4;var z4 = z0 - 1.0 + 4.0 * G4;var w4 = w0 - 1.0 + 4.0 * G4;// Work out the hashed gradient indices of the five simplex cornersvar ii = i & 255;var jj = j & 255;var kk = k & 255;var ll = l & 255;// Calculate the contribution from the five cornersvar t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0 - w0 * w0;if (t0 < 0) n0 = 0.0;else {var gi0 = (perm[ii + perm[jj + perm[kk + perm[ll]]]] % 32) * 4;t0 *= t0;n0 = t0 * t0 * (grad4[gi0] * x0 + grad4[gi0 + 1] * y0 + grad4[gi0 + 2] * z0 + grad4[gi0 + 3] * w0);}var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1 - w1 * w1;if (t1 < 0) n1 = 0.0;else {var gi1 = (perm[ii + i1 + perm[jj + j1 + perm[kk + k1 + perm[ll + l1]]]] % 32) * 4;t1 *= t1;n1 = t1 * t1 * (grad4[gi1] * x1 + grad4[gi1 + 1] * y1 + grad4[gi1 + 2] * z1 + grad4[gi1 + 3] * w1);}var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2 - w2 * w2;if (t2 < 0) n2 = 0.0;else {var gi2 = (perm[ii + i2 + perm[jj + j2 + perm[kk + k2 + perm[ll + l2]]]] % 32) * 4;t2 *= t2;n2 = t2 * t2 * (grad4[gi2] * x2 + grad4[gi2 + 1] * y2 + grad4[gi2 + 2] * z2 + grad4[gi2 + 3] * w2);}var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3 - w3 * w3;if (t3 < 0) n3 = 0.0;else {var gi3 = (perm[ii + i3 + perm[jj + j3 + perm[kk + k3 + perm[ll + l3]]]] % 32) * 4;t3 *= t3;n3 = t3 * t3 * (grad4[gi3] * x3 + grad4[gi3 + 1] * y3 + grad4[gi3 + 2] * z3 + grad4[gi3 + 3] * w3);}var t4 = 0.6 - x4 * x4 - y4 * y4 - z4 * z4 - w4 * w4;if (t4 < 0) n4 = 0.0;else {var gi4 = (perm[ii + 1 + perm[jj + 1 + perm[kk + 1 + perm[ll + 1]]]] % 32) * 4;t4 *= t4;n4 = t4 * t4 * (grad4[gi4] * x4 + grad4[gi4 + 1] * y4 + grad4[gi4 + 2] * z4 + grad4[gi4 + 3] * w4);}// Sum up and scale the result to cover the range [-1,1]return 27.0 * (n0 + n1 + n2 + n3 + n4);}};function buildPermutationTable(random) {var i;var p = new Uint8Array(256);for (i = 0; i < 256; i++) {p[i] = i;}for (i = 0; i < 255; i++) {var r = i + ~~(random() * (256 - i));var aux = p[i];p[i] = p[r];p[r] = aux;}return p;}SimplexNoise._buildPermutationTable = buildPermutationTable;// amdif (typeof define !== 'undefined' && define.amd) define(function() {return SimplexNoise;});// common jsif (typeof exports !== 'undefined') exports.SimplexNoise = SimplexNoise;// browserelse if (typeof window !== 'undefined') window.SimplexNoise = SimplexNoise;// nodejsif (typeof module !== 'undefined') {module.exports = SimplexNoise;}})();var canvas = void 0;var ctx = void 0;var simplex = void 0;var ticker = void 0;function setup() {ticker = 0;simplex = new SimplexNoise();canvas = document.querySelector("#canvas");ctx = canvas.getContext("2d");reset();window.addEventListener("resize", reset);}function reset() {w = canvas.width = window.innerWidth;h = canvas.height = window.innerHeight;ctx.fillRect(0, 0, w, h);ctx.fillStyle = "rgba(0, 0, 0, 0.02)";ctx.strokeStyle = "red";ctx.lineWidth = 2;}function draw() {requestAnimationFrame(draw);ctx.fillRect(0, 0, w, h);for (var i = 1; i < 7; i++) {var size = Math.min(w, h) * 0.004 * i;drawHeart(w / 2, h / 2, size);}ticker += 0.01;}function drawHeart(x0, y0, size) {ctx.beginPath();var zoom = 0.03;var noiseFactor = 0.08 * size;for (var angle = 0; angle < Math.PI * 2; angle += 0.01) {var xc = Math.cos(angle);var yc = Math.sin(angle);var n = simplex.noise3D(xc / zoom, yc / zoom, ticker + size * 100) * noiseFactor;var r = size + n;var x = r * 16 * Math.pow(Math.sin(angle), 3);var y = -r * (13 * Math.cos(angle) - 5 * Math.cos(2 * angle) - 2 * Math.cos(3 * angle) - Math.cos(4 * angle));ctx.lineTo(x0 + x, y0 + y);}ctx.stroke();}setup();draw();
</script></html>