这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。

文章目录

一、网页介绍
一、网页效果
二、代码展示
- 1.HTML代码
- 2.CSS代码
三、精彩专栏

一、网页介绍

1 网页简介：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用

2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

一、网页效果

二、代码展示

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~

<html><head><meta charset="utf-8" /><link type="text/css" href="./css/style.css" rel="stylesheet" /><script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script><style type="text/css">/* body {background: #000;position: relative;} */html,body {position: relative;width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}.container {width: 100%;height: 100%;margin: 0;padding: 0;z-index: 9999 !important;}#music {z-index: 999999 !important;position: fixed;top: 0;left: 0;}.canvas {bottom: 0;left: 0;position: absolute;right: 0;top: 0;}#wrapper {display: flex;height: 100vh;width: 100vw;}.content {background: rgba(0, 0, 0, 0.8);color: #f4f4f4;height: 200px;margin: auto;padding: 2rem;position: relative;overflow: hidden;width: 400px;z-index: 1;}a {color: #999;}</style></head><body><div id="wrapper"><!-- <div class="content">In photography, is the aesthetic quality of the blur produced in the out-of-focus parts of an image produced by a lens. Bokeh has been defined as "the way the lens renders out-of-focus points of light". Differences in lens aberrations and aperture shapecause some lens designs to blur the image in a way that is pleasing to the eye, while others produce blurring that is unpleasant or distracting��"good" and "bad" bokeh, respectively. Bokeh occurs for parts of the scene that lie outside thedepth of field.</div> --><audiosrc="sd.mp3"controls="controls"autoplay="autoplay"loop="loop"id="music"></audio><div id="jsi-snow-container" class="container"></div><div class="box"><ul class="minbox"><li></li><li></li><li></li><li></li><li></li><li></li></ul><ol class="maxbox"><li></li><li></li><li></li><li></li><li></li><li></li></ol></div></div></body><script>"use strict";var parentEl;var c1;var c2;var ctx1;var ctx2;var canvasWidth;var canvasHeight;var sizeBase;var count;var hue;var options;var parts = [];/*** Helper function to create a HTML5 canvas and add a class to it* @return {[canvas]}*/function createCanvas() {var canvas = document.createElement("canvas");canvas.classList.add("canvas");if (navigator.userAgent.match(/(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {var box = document.querySelectorAll(".box")[0];box.style.left = "-42%";}return canvas;}/*** Helper function to generate a random value between min and max* @param  {[int]} min [min value]* @param  {[int]} max [max value]* @return {[int]}     [random value between min and max]*/function rand(min, max) {return Math.random() * (max - min) + min;}/*** Helper function to generate hsla string for canvas 2d context* @param  {[int]} h [hue]* @param  {[int]} s [saturation]* @param  {[int]} l [lightness]* @param  {[float]} a [alpha]* @return {[string]}*/function hsla(h, s, l, a) {return "hsla(" + h + "," + s + "%," + l + "%," + a + ")";}/*** Helper function used for debouncing* @param  {[Function]} fn [function to debounce]* @param  {[int]} delay [debounce delay]*/function debounce(fn, delay) {var timer = null;return function () {var context = this;var args = arguments;clearTimeout(timer);timer = setTimeout(function () {fn.apply(context, args);}, delay);};}function createAnimation() {sizeBase = canvasWidth + canvasHeight;count = Math.floor(sizeBase * 0.3);hue = rand(0, 360);options = {radiusMin: 1,radiusMax: sizeBase * 0.04,blurMin: 10,blurMax: sizeBase * 0.04,hueMin: hue,hueMax: hue + 100,saturationMin: 10,saturationMax: 70,lightnessMin: 20,lightnessMax: 50,alphaMin: 0.1,alphaMax: 0.5,};ctx1.clearRect(0, 0, canvasWidth, canvasHeight);ctx1.globalCompositeOperation = "lighter";while (count--) {//init variables for canvas contextvar radius = rand(options.radiusMin, options.radiusMax);var blur = rand(options.blurMin, options.blurMax);var x = rand(0, canvasWidth);var y = rand(0, canvasHeight);var hue = rand(options.hueMin, options.hueMax);var saturation = rand(options.saturationMin, options.saturationMax);var lightness = rand(options.lightnessMin, options.lightnessMax);var alpha = rand(options.alphaMin, options.alphaMax);//draw on canvas contextctx1.shadowColor = hsla(hue, saturation, lightness, alpha);ctx1.shadowBlur = blur;ctx1.beginPath();ctx1.arc(x, y, radius, 0, Math.PI * 2);ctx1.closePath();ctx1.fill();}parts.length = 0; //clear parts arrayfor (var i = 0;i < Math.floor((canvasWidth + canvasHeight) * 0.03);i++) {parts.push({radius: rand(1, sizeBase * 0.03),x: rand(0, canvasWidth),y: rand(0, canvasHeight),angle: rand(0, Math.PI * 2),vel: rand(0.1, 0.5),tick: rand(0, 10000),});}}function resize() {canvasWidth = c1.width = c2.width = parentEl.offsetWidth;canvasHeight = c1.height = c2.height = parentEl.offsetHeight;}function animate() {window.requestAnimationFrame(animate);ctx2.clearRect(0, 0, canvasWidth, canvasHeight);ctx2.globalCompositeOperation = "source-over";ctx2.shadowBlur = 0;ctx2.drawImage(c1, 0, 0); //copy canvas 1 to canvas 2ctx2.globalCompositeOperation = "lighter";var i = parts.length;ctx2.shadowBlur = 15;ctx2.shadowColor = "#fff";while (i--) {var part = parts[i];part.x += Math.cos(part.angle) * part.vel;part.y += Math.sin(part.angle) * part.vel;part.angle += rand(-0.05, 0.05);ctx2.beginPath();ctx2.arc(part.x, part.y, part.radius, 0, Math.PI * 2);var alpha = 0.075 + Math.cos(part.tick * 0.02) * 0.05;ctx2.fillStyle = hsla(0, 0, 100, alpha);ctx2.fill();//make sure particles stay within canvas boundsif (part.x - part.radius > canvasWidth) {part.x = -part.radius;}if (part.x + part.radius < 0) {part.x = canvasWidth + part.radius;}if (part.y - part.radius > canvasHeight) {part.y = -part.radius;}if (part.y + part.radius < 0) {part.y = canvasHeight + part.radius;}part.tick++;}}function init() {//create canvasesc1 = createCanvas();c2 = createCanvas();ctx1 = c1.getContext("2d");ctx2 = c2.getContext("2d");parentEl = document.getElementById("wrapper");parentEl.insertBefore(c2, parentEl.firstChild);parentEl.insertBefore(c1, c2);resize();createAnimation();animate();window.addEventListener("resize",debounce(function () {resize();createAnimation();}, 250));}init();</script>
</html>

2.CSS代码


@charset "utf-8";
* {margin: 0;padding: 0;
}
body {max-width: 100%;min-width: 100%;height: 100%;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-size: 100% 100%;position: absolute;margin-left: auto;margin-right: auto;
}
li {list-style: none;
}
.box {width: 200px;height: 200px;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-size: 100% 100%;position: relative;z-index: 999999 !important;top: 45%;left: -50%;-webkit-transform-style: preserve-3d;-webkit-transform: rotateX(13deg);-webkit-animation: move 5s linear infinite;
}
.minbox {width: 100px;height: 100px;position: absolute;left: 50px;top: 30px;-webkit-transform-style: preserve-3d;
}
.minbox li {width: 100px;height: 100px;position: absolute;left: 0;top: 0;
}
.minbox li:nth-child(1) {background: url(../img/01.png) no-repeat 0 0;-webkit-transform: translateZ(50px);
}
.minbox li:nth-child(2) {background: url(../img/02.png) no-repeat 0 0;-webkit-transform: rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3) {background: url(../img/03.png) no-repeat 0 0;-webkit-transform: rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4) {background: url(../img/04.png) no-repeat 0 0;-webkit-transform: rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5) {background: url(../img/05.png) no-repeat 0 0;-webkit-transform: rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6) {background: url(../img/06.png) no-repeat 0 0;-webkit-transform: rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1) {background: url(../img/1.png) no-repeat 0 0;-webkit-transform: translateZ(50px);
}
.maxbox li:nth-child(2) {background: url(../img/2.png) no-repeat 0 0;-webkit-transform: translateZ(50px);
}
.maxbox li:nth-child(3) {background: url(../img/3.png) no-repeat 0 0;-webkit-transform: rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4) {background: url(../img/4.png) no-repeat 0 0;-webkit-transform: rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5) {background: url(../img/5.png) no-repeat 0 0;-webkit-transform: rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6) {background: url(../img/6.png) no-repeat 0 0;-webkit-transform: rotateY(90deg) translateZ(50px);
}
.maxbox {width: 800px;height: 400px;position: absolute;left: 0;top: -20px;-webkit-transform-style: preserve-3d;
}
.maxbox li {width: 200px;height: 200px;background: #fff;border: 1px solid #ccc;position: absolute;left: 0;top: 0;opacity: 0.2;-webkit-transition: all 1s ease;
}
.maxbox li:nth-child(1) {-webkit-transform: translateZ(100px);
}
.maxbox li:nth-child(2) {-webkit-transform: rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3) {-webkit-transform: rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4) {-webkit-transform: rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5) {-webkit-transform: rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6) {-webkit-transform: rotateY(90deg) translateZ(100px);
}
.box:hover ol li:nth-child(1) {-webkit-transform: translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;
}
.box:hover ol li:nth-child(2) {-webkit-transform: rotateX(180deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;
}
.box:hover ol li:nth-child(3) {-webkit-transform: rotateX(-90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;
}
.box:hover ol li:nth-child(4) {-webkit-transform: rotateX(90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;
}
.box:hover ol li:nth-child(5) {-webkit-transform: rotateY(-90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;
}
.box:hover ol li:nth-child(6) {-webkit-transform: rotateY(90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;
}
@keyframes move {0% {-webkit-transform: rotateX(13deg) rotateY(0deg);}100% {-webkit-transform: rotateX(13deg) rotateY(360deg);}
}

三、精彩专栏

看到这里了就【点赞，关注，收藏】三连支持下吧，你的支持是我创作的动力。

HTML5七夕情人节表白网页制作【幻化3D相册】HTML+CSS+JavaScript相关推荐

HTML5七夕情人节表白网页(流星动画3D相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤流星动画3D相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白这是 ...
HTML5七夕情人节表白网页(抖音-罗盘时钟) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音罗盘时钟❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白这是程序员表白系列 ...
HTML5七夕情人节表白网页一场浪漫烟花表白 HTML+CSS+JavaScript
HTML5七夕情人节表白网页一场浪漫烟花表白 HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有10 ...
HTML5七夕情人节表白网页(庆祝生日蛋糕烟花特效) HTML+CSS+JavaScript
HTML5七夕情人节表白网页❤庆祝生日蛋糕烟花特效❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共 ...
HTML5七夕情人节表白网页 ❤ 一场浪漫烟花表白 ❤ HTML+CSS+JavaScript
HTML5七夕情人节表白网页 ❤ 一场浪漫烟花表白 ❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波 ...
HTML5七夕情人节表白网页_圣诞节3d相册(含音乐)_HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤圣诞节3d相册(不含音乐开关)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css ...
HTML5七夕情人节表白网页_圣诞节3d相册(含音乐开关)_ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤圣诞节3d相册(含音乐开关)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱 ...
HTML5七夕情人节表白网页制作【3D雪花展开相册】HTML+CSS+JavaScript 程序员表白网页简单的3D相册制作
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
HTML5七夕情人节表白网页制作 __浪漫空中散落的花瓣3D相册__ HTML+CSS+JavaScript
HTML5七夕情人节表白网页制作 ❤浪漫空中散落的花瓣3D相册❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人 ...
HTML5七夕情人节表白网页制作 (蓝色主题-樱花雨3D相册)HTML+CSS+JavaScript
HTML5七夕情人节表白网页制作 ❤蓝色主题-樱花雨3D相册❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看 ...

HTML5七夕情人节表白网页制作【幻化3D相册】HTML+CSS+JavaScript