这是程序员表白系列中的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" /><scriptid="jqbb"src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script><!-- 播放器css --><link rel="stylesheet" href="css/common.css" /><!-- 相册css --><link type="text/css" href="./css/style.css" rel="stylesheet" /><style type="text/css">html,body {margin: 0;overflow: hidden;width: 100%;height: 100%;cursor: none;background: black;background: linear-gradient(to bottom, #000000 0%, #5788fe 100%);}.filter {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #fe5757;animation: colorChange 30s ease-in-out infinite;animation-fill-mode: both;mix-blend-mode: overlay;}@keyframes colorChange {0%,100% {opacity: 0;}50% {opacity: 0.9;}}.landscape {position: absolute;bottom: 0px;left: 0;width: 100%;height: 100%;background-image: url("./xkbg.png");background-size: 1000px 250px;background-repeat: repeat-x;background-position: center bottom;}/* 雪花颜色 */.maple {position: absolute;top: 0;color: hsl(350, 100%, 88%);/* background: linear-gradient(to bottom, #000000 0%, #5788fe 100%); */}#music {position: fixed;top: 0;left: 0;}</style><script type="text/javascript" src="js/christmassnow.js"></script><script>$(document).ready(function () {$("body").christmassnow({snowflaketype: 23, // 1 to 25 types of flakes are available change the number from 1 to 25. each one contain different images.snowflakesize: 2, //snowflakesize is 1 then it get the size of the image as random , if the snowflakesize is 2 means size of the image as customsnowflakedirection: 1, // 1 means default no wind (top to bottom), 2 means random, 3 means left to right and 4 means  right to leftsnownumberofflakes: 4, // number of flakes is user optionsnowflakespeed: 10, // falling speed of flake 10 sec is defaultflakeheightandwidth: 15, // if you are mention that option flakesize is 2 then this flakeheightandwidth should work values are in pixels 16*16.});});</script></head><body><!-- 红色雪飘落 --><div class="maplebg"></div><script>var d = "<div class='maple'>❄<div>";setInterval(function () {var f = $(document).width();var e = Math.random() * f - 300; // 雪花的定位left值var o = 0.2 + Math.random(); // 雪花的透明度var fon = 25 + Math.random() * 10; // 雪花大小var l = e - 100 + 200 * Math.random(); // 雪花的横向位移var k = 8000 + 5000 * Math.random();var deg = Math.random() * 360; // 雪花的方向$(d).clone().appendTo(".maplebg").css({left: e + "px",opacity: o,transform: "rotate(" + deg + "deg)","font-size": fon,}).animate({top: "550px",left: l + "px",opacity: 0.1,},k,"linear",function () {$(this).remove();});}, 500);</script><divstyle="text-align: center;margin: 20px 0;font: normal 14px/24px 'MicroSoft YaHei';"></div><!-- 白雪花飘落 --><div class="drop"></div><!-- 打字 --><div class="typing"><!-- 字幕 --><h2 class="header-sub-title" id="word"></h2><h2 class="header-sub-title blink">|</h2></div><!-- 星空 --><div class="landscape"></div><div class="filter"></div><canvas id="canvas"></canvas><!-- 自动播放 --><!-- <audio autoplay="autopaly"><source src="yinyue.mp3" type="audio/mp3" /></audio> --><!-- 带按钮播放 --><!-- loop循环 --><!-- <audiosrc="yinyue.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 id="app"><div class="container_player"><div class="music-box"><!-- <img src="data:images/avatar.jpg" /> --><img src="img/01.png" /><div class="mask"><div class="mplayer" onclick="play()"><i class="fa"><span class="before"></span><span class="after"> </span></i><svgclass="loadingSvg"width="25"height="25"viewBox="0,0,50,50"style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"><circle></circle></svg></div><div class="m-circle m-progress"><svg width="163" height="163" viewBox="0,0,163,163"><circlecx="81"cy="81"r="159"stroke-width="8"stroke="rgba(255, 206, 113, 0.2)"fill="rgba(0,0,0,.2)"></circle><circleclass="a"cx="81"cy="81"r="159"stroke-width="6"stroke="rgba(255, 206, 113, 1)"fill="none"stroke-dasharray="0 999"transform="matrix(0,-1,1,0,0,163)"></circle></svg></div><div class="m_time"><span class="mplayer_curtime">00:00</span><span class="m-join">/</span><span class="mplayer_durtime">00:00</span></div></div></div></div></div><!-- 音乐 --><audio id="myAudio" src="music/yinyue.mp3"></audio></body><script>function Star(id, x, y) {this.id = id;this.x = x;this.y = y;this.r = Math.floor(Math.random() * 2) + 1;var alpha = (Math.floor(Math.random() * 10) + 1) / 10 / 2;this.color = "rgba(255,255,255," + alpha + ")";}Star.prototype.draw = function () {ctx.fillStyle = this.color;ctx.shadowBlur = this.r * 2;ctx.beginPath();ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);ctx.closePath();ctx.fill();};Star.prototype.move = function () {this.y -= 0.15;if (this.y <= -10) this.y = HEIGHT + 10;this.draw();};Star.prototype.die = function () {stars[this.id] = null;delete stars[this.id];};function Dot(id, x, y, r) {this.id = id;this.x = x;this.y = y;this.r = Math.floor(Math.random() * 5) + 1;this.maxLinks = 2;this.speed = 0.5;this.a = 0.5;this.aReduction = 0.005;this.color = "rgba(255,255,255," + this.a + ")";this.linkColor = "rgba(255,255,255," + this.a / 4 + ")";this.dir = Math.floor(Math.random() * 140) + 200;}Dot.prototype.draw = function () {ctx.fillStyle = this.color;ctx.shadowBlur = this.r * 2;ctx.beginPath();ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);ctx.closePath();ctx.fill();};Dot.prototype.link = function () {if (this.id == 0) return;var previousDot1 = getPreviousDot(this.id, 1);var previousDot2 = getPreviousDot(this.id, 2);var previousDot3 = getPreviousDot(this.id, 3);if (!previousDot1) return;ctx.strokeStyle = this.linkColor;ctx.moveTo(previousDot1.x, previousDot1.y);ctx.beginPath();ctx.lineTo(this.x, this.y);if (previousDot2 != false) ctx.lineTo(previousDot2.x, previousDot2.y);if (previousDot3 != false) ctx.lineTo(previousDot3.x, previousDot3.y);ctx.stroke();ctx.closePath();};function getPreviousDot(id, stepback) {if (id == 0 || id - stepback < 0) return false;if (typeof dots[id - stepback] != "undefined") return dots[id - stepback];else return false; //getPreviousDot(id - stepback);}Dot.prototype.move = function () {this.a -= this.aReduction;if (this.a <= 0) {this.die();return;}this.color = "rgba(255,255,255," + this.a + ")";this.linkColor = "rgba(255,255,255," + this.a / 4 + ")";(this.x = this.x + Math.cos(degToRad(this.dir)) * this.speed),(this.y = this.y + Math.sin(degToRad(this.dir)) * this.speed);this.draw();this.link();};Dot.prototype.die = function () {dots[this.id] = null;delete dots[this.id];};var canvas = document.getElementById("canvas"),ctx = canvas.getContext("2d"),WIDTH,HEIGHT,mouseMoving = false,mouseMoveChecker,mouseX,mouseY,stars = [],initStarsPopulation = 80,dots = [],dotsMinDist = 2,maxDistFromCursor = 50;setCanvasSize();init();function setCanvasSize() {(WIDTH = document.documentElement.clientWidth),(HEIGHT = document.documentElement.clientHeight);canvas.setAttribute("width", WIDTH);canvas.setAttribute("height", HEIGHT);}function init() {ctx.strokeStyle = "white";ctx.shadowColor = "white";for (var i = 0; i < initStarsPopulation; i++) {stars[i] = new Star(i,Math.floor(Math.random() * WIDTH),Math.floor(Math.random() * HEIGHT));//stars[i].draw();}ctx.shadowBlur = 0;animate();}function animate() {ctx.clearRect(0, 0, WIDTH, HEIGHT);for (var i in stars) {stars[i].move();}for (var i in dots) {dots[i].move();}drawIfMouseMoving();requestAnimationFrame(animate);}window.onmousemove = function (e) {mouseMoving = true;mouseX = e.clientX;mouseY = e.clientY;clearInterval(mouseMoveChecker);mouseMoveChecker = setTimeout(function () {mouseMoving = false;}, 100);};function drawIfMouseMoving() {if (!mouseMoving) return;if (dots.length == 0) {dots[0] = new Dot(0, mouseX, mouseY);dots[0].draw();return;}var previousDot = getPreviousDot(dots.length, 1);var prevX = previousDot.x;var prevY = previousDot.y;var diffX = Math.abs(prevX - mouseX);var diffY = Math.abs(prevY - mouseY);if (diffX < dotsMinDist || diffY < dotsMinDist) return;var xVariation = Math.random() > 0.5 ? -1 : 1;xVariation =xVariation * Math.floor(Math.random() * maxDistFromCursor) + 1;var yVariation = Math.random() > 0.5 ? -1 : 1;yVariation =yVariation * Math.floor(Math.random() * maxDistFromCursor) + 1;dots[dots.length] = new Dot(dots.length,mouseX + xVariation,mouseY + yVariation);dots[dots.length - 1].draw();dots[dots.length - 1].link();}//setInterval(drawIfMouseMoving, 17);function degToRad(deg) {return deg * (Math.PI / 180);}// 打印字const words = ["❤2021新年快乐！","❉我知道现在是时候。","❉但这并不能阻止我们心存感激。","❉我很感激今年收到的所有祝福。","❉感谢一路走来的挑战。","❉我感谢所有的爱。","❉在新的一年里不要太多。","❉我只想让读这篇文章的人感到被爱。","❉愿你得到你想要的一切。","❉让你的家庭和生活充满幸福。",];let i = 0;let timer;// speed in mslet deleteDelay = 3000;let typeSpeed = 100;let delSpeed = 50;/* 开始编写文字 */function typingEffect() {let word = words[i].split("");var loopTyping = function () {if (word.length > 0) {document.getElementById("word").innerHTML += word.shift();} else {delay(function () {deletingEffect(); // do stuff}, deleteDelay); // end delay// deletingEffect();return false;}timer = setTimeout(loopTyping, typeSpeed);};loopTyping();}function deletingEffect() {let word = words[i].split("");var loopDeleting = function () {if (word.length > 0) {word.pop();document.getElementById("word").innerHTML = word.join("");} else {if (words.length > i + 1) {i++;}// else {//   i = 0;// }typingEffect();return false;}timer = setTimeout(loopDeleting, delSpeed);};loopDeleting();}var delay = (function () {var timer = 0;return function (callback, ms) {clearTimeout(timer);timer = setTimeout(callback, ms);};})();typingEffect();</script><script src="js/common.js"></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 {z-index: 999999 !important;width: 200px;height: 200px;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-size: 100% 100%;position: fixed !important;top: 42%;left: 40%;-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);}
}
/* 雪花css */
.snowLayer {position: absolute;left: -400px;top: -400px;height: 2000px !important;overflow: hidden;
}
.blink {animation: blink 0.5s infinite;animation-delay: 500ms;
}@keyframes blink {to {opacity: 0;}
}.typing {display: flex;top: 10%;left: 4%;z-index: 999999 !important;position: fixed !important;
}.header-sub-title,
h2 {font-weight: 600;font-size: 40px;color: skyblue;padding-right: 0.1em;text-transform: uppercase;
}

三、精彩专栏推荐：

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

HTML5七夕情人节表白网页制作【满天星空3D相册】HTML+CSS+JavaScript 3D动态相册网页代码相关推荐

HTML5七夕情人节表白网页制作【星空萤火虫】HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
HTML5七夕情人节表白网页制作【结婚倒计时】HTML+CSS+JavaScript html生日快乐祝福网页制作
这是程序员表白系列中的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
HTML5七夕情人节表白网页制作 ❤蓝色主题-樱花雨3D相册❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看 ...
HTML5七夕情人节表白网页(星空萤火虫) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页(星空萤火虫) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白这是程序员 ...
HTML5七夕情人节表白网页制作——蓝色梦幻海洋3D相册—— HTML+CSS+JavaScript
HTML5七夕情人节表白网页制作❤蓝色梦幻海洋3D相册❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此 ...
HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript)
HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript) 520七夕节告白,也就是中国的情人节,你除了送花你还会什么?? 快来制作高端大气上档次的表白网页吧尽管没有深情的告白, ...
HTML5七夕情人节表白网页_浪漫星空-爱心相册_ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤浪漫星空-爱心相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白这是程 ...
HTML5七夕情人节表白网页(爱心雨-满屏爱心飘落)HTML+CSS+JavaScript
HTML5七夕情人节表白网页❤(爱心雨-满屏爱心飘落)❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此 ...

HTML5七夕情人节表白网页制作【满天星空3D相册】HTML+CSS+JavaScript 3D动态相册网页代码