这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用网页告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。
文章目录
一、网页介绍一、网页效果二、代码展示1.HTML代码三、精彩专栏一、网页介绍
1 网页简介：基于HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用
2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。
一、网页效果
二、代码展示
1.HTML代码
代码如下（示例）：以下仅展示部分代码供参考~
<html><head><meta charset="utf-8"><script id="jqbb" src="/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>(function() {'use strict';var F2 = 0.5 * (Math.sqrt(3.0) - 1.0);var G2 = (3.0 - Math.sqrt(3.0)) / 6.0;var F3 = 1.0 / 3.0;var G3 = 1.0 / 6.0;var F4 = (Math.sqrt(5.0) - 1.0) / 4.0;var G4 = (5.0 - Math.sqrt(5.0)) / 20.0;function SimplexNoise(random) {if (!random) random = Math.random;this.p = buildPermutationTable(random);this.perm = new Uint8Array(512);this.permMod12 = new Uint8Array(512);for (var i = 0; i < 512; i++) {this.perm[i] = this.p[i & 255];this.permMod12[i] = this.perm[i] % 12;}}SimplexNoise.prototype = {grad3: new Float32Array([1, 1, 0, -1, 1, 0,1, -1, 0,-1, -1, 0,1, 0, 1, -1, 0, 1,1, 0, -1, -1, 0, -1,0, 1, 1,0, -1, 1,0, 1, -1,0, -1, -1]),grad4: new Float32Array([0, 1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1,0, -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1,1, 0, 1, 1, 1, 0, 1, -1, 1, 0, -1, 1, 1, 0, -1, -1, -1, 0, 1, 1, -1, 0, 1, -1, -1, 0, -1, 1, -1, 0, -1, -1,1, 1, 0, 1, 1, 1, 0, -1, 1, -1, 0, 1, 1, -1, 0, -1, -1, 1, 0, 1, -1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, -1,1, 1, 1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, -1, -1, 0, -1, 1, 1, 0, -1, 1, -1, 0, -1, -1, 1, 0, -1, -1, -1, 0]),noise2D: function(xin, yin) {var permMod12 = this.permMod12;var perm = this.perm;var grad3 = this.grad3;var n0 = 0; // Noise contributions from the three cornersvar n1 = 0;var n2 = 0;// Skew the input space to determine which simplex cell we're invar s = (xin + yin) * F2; // Hairy factor for 2Dvar i = Math.floor(xin + s);var j = Math.floor(yin + s);var t = (i + j) * G2;var X0 = i - t; // Unskew the cell origin back to (x,y) spacevar Y0 = j - t;var x0 = xin - X0; // The x,y distances from the cell originvar y0 = yin - Y0;// For the 2D case, the simplex shape is an equilateral triangle.// Determine which simplex we are in.var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coordsif (x0 > y0) {i1 = 1;j1 = 0;} // lower triangle, XY order: (0,0)->(1,0)->(1,1)else {i1 = 0;j1 = 1;} // upper triangle, YX order: (0,0)->(0,1)->(1,1)// A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and// a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where// c = (3-sqrt(3))/6var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coordsvar y1 = y0 - j1 + G2;var x2 = x0 - 1.0 + 2.0 * G2; // Offsets for last corner in (x,y) unskewed coordsvar y2 = y0 - 1.0 + 2.0 * G2;// Work out the hashed gradient indices of the three simplex cornersvar ii = i & 255;var jj = j & 255;// Calculate the contribution from the three cornersvar t0 = 0.5 - x0 * x0 - y0 * y0;if (t0 >= 0) {var gi0 = permMod12[ii + perm[jj]] * 3;t0 *= t0;n0 = t0 * t0 * (grad3[gi0] * x0 + grad3[gi0 + 1] * y0); // (x,y) of grad3 used for 2D gradient}var t1 = 0.5 - x1 * x1 - y1 * y1;if (t1 >= 0) {var gi1 = permMod12[ii + i1 + perm[jj + j1]] * 3;t1 *= t1;n1 = t1 * t1 * (grad3[gi1] * x1 + grad3[gi1 + 1] * y1);}var t2 = 0.5 - x2 * x2 - y2 * y2;if (t2 >= 0) {var gi2 = permMod12[ii + 1 + perm[jj + 1]] * 3;t2 *= t2;n2 = t2 * t2 * (grad3[gi2] * x2 + grad3[gi2 + 1] * y2);}// Add contributions from each corner to get the final noise value.// The result is scaled to return values in the interval [-1,1].return 70.0 * (n0 + n1 + n2);},// 3D simplex noisenoise3D: function(xin, yin, zin) {var permMod12 = this.permMod12;var perm = this.perm;var grad3 = this.grad3;var n0, n1, n2, n3; // Noise contributions from the four corners// Skew the input space to determine which simplex cell we're invar s = (xin + yin + zin) * F3; // Very nice and simple skew factor for 3Dvar i = Math.floor(xin + s);var j = Math.floor(yin + s);var k = Math.floor(zin + s);var t = (i + j + k) * G3;var X0 = i - t; // Unskew the cell origin back to (x,y,z) spacevar Y0 = j - t;var Z0 = k - t;var x0 = xin - X0; // The x,y,z distances from the cell originvar y0 = yin - Y0;var z0 = zin - Z0;// For the 3D case, the simplex shape is a slightly irregular tetrahedron.// Determine which simplex we are in.var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coordsvar i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coordsif (x0 >= y0) {if (y0 >= z0) {i1 = 1;j1 = 0;k1 = 0;i2 = 1;j2 = 1;k2 = 0;} // X Y Z orderelse if (x0 >= z0) {i1 = 1;j1 = 0;k1 = 0;i2 = 1;j2 = 0;k2 = 1;} // X Z Y orderelse {i1 = 0;j1 = 0;k1 = 1;i2 = 1;j2 = 0;k2 = 1;} // Z X Y order} else {// x0<y0if (y0 < z0) {i1 = 0;j1 = 0;k1 = 1;i2 = 0;j2 = 1;k2 = 1;} // Z Y X orderelse if (x0 < z0) {i1 = 0;j1 = 1;k1 = 0;i2 = 0;j2 = 1;k2 = 1;} // Y Z X orderelse {i1 = 0;j1 = 1;k1 = 0;i2 = 1;j2 = 1;k2 = 0;} // Y X Z order}// A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z),// a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and// a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where// c = 1/6.var x1 = x0 - i1 + G3; // Offsets for second corner in (x,y,z) coordsvar y1 = y0 - j1 + G3;var z1 = z0 - k1 + G3;var x2 = x0 - i2 + 2.0 * G3; // Offsets for third corner in (x,y,z) coordsvar y2 = y0 - j2 + 2.0 * G3;var z2 = z0 - k2 + 2.0 * G3;var x3 = x0 - 1.0 + 3.0 * G3; // Offsets for last corner in (x,y,z) coordsvar y3 = y0 - 1.0 + 3.0 * G3;var z3 = z0 - 1.0 + 3.0 * G3;// Work out the hashed gradient indices of the four simplex cornersvar ii = i & 255;var jj = j & 255;var kk = k & 255;// Calculate the contribution from the four cornersvar t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0;if (t0 < 0) n0 = 0.0;else {var gi0 = permMod12[ii + perm[jj + perm[kk]]] * 3;t0 *= t0;n0 = t0 * t0 * (grad3[gi0] * x0 + grad3[gi0 + 1] * y0 + grad3[gi0 + 2] * z0);}var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1;if (t1 < 0) n1 = 0.0;else {var gi1 = permMod12[ii + i1 + perm[jj + j1 + perm[kk + k1]]] * 3;t1 *= t1;n1 = t1 * t1 * (grad3[gi1] * x1 + grad3[gi1 + 1] * y1 + grad3[gi1 + 2] * z1);}var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2;if (t2 < 0) n2 = 0.0;else {var gi2 = permMod12[ii + i2 + perm[jj + j2 + perm[kk + k2]]] * 3;t2 *= t2;n2 = t2 * t2 * (grad3[gi2] * x2 + grad3[gi2 + 1] * y2 + grad3[gi2 + 2] * z2);}var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3;if (t3 < 0) n3 = 0.0;else {var gi3 = permMod12[ii + 1 + perm[jj + 1 + perm[kk + 1]]] * 3;t3 *= t3;n3 = t3 * t3 * (grad3[gi3] * x3 + grad3[gi3 + 1] * y3 + grad3[gi3 + 2] * z3);}// Add contributions from each corner to get the final noise value.// The result is scaled to stay just inside [-1,1]return 32.0 * (n0 + n1 + n2 + n3);},// 4D simplex noise, better simplex rank ordering method -03-09noise4D: function(x, y, z, w) {var permMod12 = this.permMod12;var perm = this.perm;var grad4 = this.grad4;var n0, n1, n2, n3, n4; // Noise contributions from the five corners// Skew the (x,y,z,w) space to determine which cell of 24 simplices we're invar s = (x + y + z + w) * F4; // Factor for 4D skewingvar i = Math.floor(x + s);var j = Math.floor(y + s);var k = Math.floor(z + s);var l = Math.floor(w + s);var t = (i + j + k + l) * G4; // Factor for 4D unskewingvar X0 = i - t; // Unskew the cell origin back to (x,y,z,w) spacevar Y0 = j - t;var Z0 = k - t;var W0 = l - t;var x0 = x - X0; // The x,y,z,w distances from the cell originvar y0 = y - Y0;var z0 = z - Z0;var w0 = w - W0;// For the 4D case, the simplex is a 4D shape I won't even try to describe.// To find out which of the 24 possible simplices we're in, we need to// determine the magnitude ordering of x0, y0, z0 and w0.// Six pair-wise comparisons are performed between each possible pair// of the four coordinates, and the results are used to rank the numbers.var rankx = 0;var ranky = 0;var rankz = 0;var rankw = 0;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);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>
三、精彩专栏
看到这里了就 【点赞，关注，收藏】 三连 支持下吧，你的支持是我创作的动力。
