html七夕情人节表白示爱网站源码制作 (程序员表白代码大全)
❤ 精彩专栏推荐
作者主页: 【进入主页—获取更多源码】
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 corner
var i2, j2, k2, l2; // The integer offsets for the third simplex corner
var 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
// 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) coords
var 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) coords
var 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) coords
var 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) coords
var 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 corners
var ii = i & 255;
var jj = j & 255;
var kk = k & 255;
var ll = l & 255;
// Calculate the contribution from the five corners
var 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;
// amd
if (typeof define !== 'undefined' && define.amd) define(function() {
return SimplexNoise;
});
// common js
if (typeof exports !== 'undefined') exports.SimplexNoise = SimplexNoise;
// browser
else if (typeof window !== 'undefined') window.SimplexNoise = SimplexNoise;
// nodejs
if (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>
五、更多源码
1.如果我的博客对你有帮助 请 “点赞” “✍️评论” “收藏” 一键三连哦！
2.【关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
以上内容技术相关问题欢迎一起交流学习