这是程序员表白系列中的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代码

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


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>入我相思门，知我相思苦</title><link rel="icon" href="./image/ax.png" type="image/x-icon" /><link rel="stylesheet" href="./css/iconfont.css" /><link rel="stylesheet" href="./css/t.css" /></head><body><canvas id="c"> </canvas><div class="snowback"><div class="ziti" id="ziti"><span id="world">山有木兮木有枝，心悦君兮君不知</span></div><div class="main"><div class="box"><ul class="zhoxian1"><li class="small idv1"><img src="./image/img/111.jpg" alt="" /></li><li class="small idv2"><img src="./image/img/222.jpg" alt="" /></li><li class="small idv3"><img src="./image/img/333.jpg" alt="" /></li><li class="small idv4"><img src="./image/img/444.jpg" alt="" /></li><li class="small idv5"><img src="./image/img/555.jpg" alt="" /></li><li class="small idv6"><img src="./image/img/666.jpg" alt="" /></li></ul></div><div class="box-biger"><ul class="zhoxian2"><li class="biger idv7"><img src="./image/img/111.jpg" alt="" /></li><li class="biger idv2"><img src="./image/img/222.jpg" alt="" /></li><li class="biger idv3"><img src="./image/img/333.jpg" alt="" /></li><li class="biger idv4"><img src="./image/img/444.jpg" alt="" /></li><li class="biger idv5"><img src="./image/img/555.jpg" alt="" /></li><li class="biger idv12"><img src="./image/img/666.jpg" alt="" /></li></ul></div></div></div><div class="btn btnonlond" onClick="biggen()"><img class="btnimg" src="./image/mypic.gif" alt="" /><div class="hiddenbox"><div class="audiobox"><audioclass="myaudio"src="./music/mp3/pygh.mp3"autoplaycontrolsloop></audio></div><input type="text" placeholder="请输入音乐名称" /><div class="btn inpbtn" onClick="inpbtnc()">放这个</div></div></div></body><script src="./js/jquery.min.js"></script><script src="./js/TweenMax.min.js"></script><script src="./js/script.js"></script><script src="./js/snow.js"></script><script>var zhoxian = document.querySelector(".zhoxian1");var zhoxian2 = document.querySelector(".zhoxian2");var yesno = 1;setInterval(function xuanzhuan() {if (yesno > 2) {var ss = Math.random();if (ss < 0.5) {leftbut();} else {rigthtop();}} else {yesno++;}}, 500);var ysize1 = 0,xsize2 = 0;rigthtop();function rigthtop() {var suiji = Math.random();ysize1 += 1 * (suiji * 20).toFixed(0) + 20;xsize2 += 1 * (suiji * 10).toFixed(0) + 10;var world = `rotateY(${ysize1}deg) rotateX(${xsize2}deg)`;zhoxian.style.transform = world;zhoxian2.style.transform = world;yesno = 0;}function leftbut() {var suiji1 = Math.random();ysize1 -= 1 * (suiji1 * 20).toFixed(0) + 20;xsize2 -= 1 * (suiji1 * 10).toFixed(0) + 10;var world = `rotateY(${ysize1}deg) rotateX(${xsize2}deg)`;zhoxian.style.transform = world;zhoxian2.style.transform = world;yesno = 0;}function onlyleft() {var suiji1 = Math.random();ysize1 -= 1 * (suiji1 * 20).toFixed(0) + 20;var world = `rotateY(${ysize1}deg) rotateX(${xsize2}deg)`;zhoxian.style.transform = world;zhoxian2.style.transform = world;yesno = 0;}function onlyright() {var suiji = Math.random();ysize1 += 1 * (suiji * 20).toFixed(0) + 20;var world = `rotateY(${ysize1}deg) rotateX(${xsize2}deg)`;zhoxian.style.transform = world;zhoxian2.style.transform = world;yesno = 0;}function onlytop() {var suiji1 = Math.random();xsize2 -= 1 * (suiji1 * 10).toFixed(0) + 10;var world = `rotateY(${ysize1}deg) rotateX(${xsize2}deg)`;zhoxian.style.transform = world;zhoxian2.style.transform = world;yesno = 0;}function onlybtn() {var suiji = Math.random();xsize2 += 1 * (suiji * 10).toFixed(0) + 10;var world = `rotateY(${ysize1}deg) rotateX(${xsize2}deg)`;zhoxian.style.transform = world;zhoxian2.style.transform = world;yesno = 0;}document.querySelector(".box-biger").onmousedown = function (evt) {var oevent = evt || event;var disx = oevent.clientX;var disy = oevent.clientY;document.onmousemove = function (evt) {var oevent = evt || event;evt.preventDefault();tuozhuaiX = oevent.clientX - disx + "px";tuozhuaiY = oevent.clientY - disy + "px";};document.onmouseup = function () {if (parseInt(tuozhuaiX) * parseInt(tuozhuaiX) >parseInt(tuozhuaiY) * parseInt(tuozhuaiY)) {if (tuozhuaiX[0] == "-") {onlyleft();} else {onlyright();}} else {if (tuozhuaiY[0] == "-") {onlybtn();} else {onlytop();}}document.onmousemove = null;document.onmouseup = null;};};var moustime = 0;document.getElementById("ziti").addEventListener("mouseenter", moveon);function moveon() {moustime++;setTimeout(function () {if (moustime == 1) {document.getElementById("world").innerHTML ="曾经沧海难为水，除却巫山不是云";moveon();} else if (moustime == 2) {document.getElementById("world").innerHTML = `<span class="iconfont icon-bqxin">人生自是有情痴，此恨不关风与月。<span class="iconfont icon-bqxin">`;moveon();} else if (moustime == 5) {document.getElementById("world").innerHTML = `<span class="iconfont icon-bqxin">身无彩凤双飞翼，心有灵犀一点通<span class="iconfont icon-bqxin">`;} else {moveon();}}, 2000);}document.getElementById("ziti").addEventListener("mouseleave", function () {moustime = 0;document.getElementById("world").innerHTML = `<span class="iconfont icon-bqxin">人生若只如初见，何事秋风悲画扇<span class="iconfont icon-bqxin">`;});</script><script>var myaudio = document.querySelector(".myaudio");var btnimg = document.querySelector(".btnimg");var inpbtn = document.querySelector(".inpbtn");var input = document.querySelector("input");var isgo = 0;function biggen() {if (isgo == 0) {myaudio.play();btnimg.src = "./image/666.gif";isgo = 1;} else {myaudio.pause();btnimg.src = "./image/mypic.gif";isgo = 0;}}function inpbtnc() {var name = input.value;if (name == "") {alert("请输入名称");return;}var musicname = `./music/${name}.mp3`;try {myaudio.src = musicname;} catch (err) {console.log(111);alert("请输入的名称不存在!");}}</script>
</html>

2.CSS代码

* {margin: 0;padding: 0;
}html,
body {width: 100%;height: 100%;overflow: hidden;
}canvas {display: block;position: absolute;z-index: -2;
}.snowback {height: 100%;width: 100%;overflow: hidden;position: absolute;z-index: 1;
}.ziti {height: 50px;width: 100%;font-size: 60px;text-align: center;position: absolute;margin-top: 100px;z-index: 11;
}.ziti span {height: 30px;width: 100%;font-size: 25px;font-family: "å¾®è½¯é›…é»‘";text-align: center;line-height: 30px;/*å…³é”®ä»£ç */background-image: -webkit-linear-gradient(left, rgb(20, 26, 150), #E6D205 25%, rgb(196, 30, 30) 50%, rgb(41, 197, 111) 75%, rgb(175, 23, 221));-webkit-text-fill-color: transparent;-webkit-background-clip: text;-webkit-background-size: 200% 100%;animation: masked-animation 4s infinite linear;
}/*å…³é”®ä»£ç */@keyframes masked-animation {0% {background-position: 0 0;}100% {background-position: -100% 0;}
}.main {width: 200px;height: 200px;top: calc(calc(50% - 100px));margin-left: calc(50% - 100px);position: absolute;
}.box {width: 200px;height: 200px;opacity: 1;position: absolute;transform: scale(0.8);
}.box-biger:hover+.box {transform: scale(0.8);
}.box-biger {width: 200px;height: 200px;opacity: 0;transition: all 1s;position: absolute;z-index: 10;
}.box-biger:hover {width: 600px;height: 600px;opacity: 1;margin-top: calc(50% - 300px);margin-left: calc(50% - 300px);
}.box ul {width: 100%;height: 100%;transform-style: preserve-3d;background-color: transparent;list-style: none;position: absolute;transition: all 1s;transform-origin: 50% 50% 0;
}.box-biger ul {width: 100%;height: 100%;transform-style: preserve-3d;background-color: transparent;list-style: none;position: absolute;transition: all 1s;
}.small {font-size: 60px;text-align: center;display: inline-block;width: 100%;height: 100%;position: absolute;box-sizing: border-box;
}.biger {font-size: 60px;text-align: center;display: inline-block;width: 100%;height: 100%;position: absolute;box-sizing: border-box;
}.small img {height: 100%;width: 100%;opacity: 1;
}.biger img {height: 70%;width: 70%;margin-top: 15%;margin-left: 15%;opacity: 0.3;
}.idv1 {background-size: cover;left: 0;top: 100%;transform: translateZ(-100px) rotateY(180deg) rotate(180deg);transform-origin: top;
}.idv2 {background-size: cover;top: 0;margin-left: 50%;transform: rotateY(90deg);
}.idv3 {background-size: cover;left: 0;top: 0;margin-left: -50%;transform: rotateY(90deg);
}.idv4 {transform: rotateX(90deg);top: -50%;
}.idv5 {transform: rotateX(270deg);top: 50%;
}.idv6 {background-size: cover;left: 0;top: 0;transform: translateZ(100px);
}.idv7 {background-size: cover;left: 0;top: 100%;transform: translateZ(-100px) rotateY(180deg) rotate(180deg);transform-origin: top;transition: all 1s;
}.idv12 {background-size: cover;left: 0;top: 0;transform: translateZ(100px);transition: all 1s;
}.box-biger:hover>ul>.idv7 {transform: translateZ(-300px) rotateY(180deg) rotate(180deg);
}.box-biger:hover>ul>.idv12 {transform: translateZ(300px);
}.btn {height: 60px;text-align: center;line-height: 60px;width: 90px;margin-left: 20px;float: left;box-sizing: border-box;position: absolute;border-radius: 30px;z-index: 30;
}.btn img {height: 100%;width: 100%;
}.btn:hover {cursor: pointer;
}.inpbtn {height: 40px;float: right;line-height: 40px;margin-left: 200px;background-color: pink;color: white;border-radius: 30px;
}input {height: 40px;width: 180px;float: left;border-radius: 20px;font-size: 15px;
}audio {height: 40px;width: 350px;margin-left: -40px;margin-top: -1px;
}.audiobox {height: 40px;width: 300px;border-radius: 20px;overflow: hidden;
}.btnonlond:hover>.hiddenbox {visibility: inherit;
}.hiddenbox {margin-top: -60px;margin-left: 100px;height: 80px;width: 300px;transition: all 2s;visibility: hidden;position: absolute;z-index: 30;
}

三、精彩专栏

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

HTML5七夕情人节表白网页制作【蓝色3D动态相册】HTML+CSS+JavaScript 程序员表白3D相册代码 html生日快乐祝福网页制作相关推荐

HTML5七夕情人节表白网页制作【3D雪花展开相册】HTML+CSS+JavaScript 程序员表白网页简单的3D相册制作
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
抖音程序员HTML相册,快手抖音程序员表白女朋友3D立体相册源码html网页相册代码...
前几天分享了一套源码,今天又为大家带来一套类似的源码,希望大家喜欢! 快手抖音很火的程序员女朋友3D立体相册源码html网页相册代码,经测试在IE8浏览器下无法预览,建议使用支持HTML5与css3效 ...
web网页设计期末课程大作业 HTML+CSS+JavaScript 美食餐饮文化主题网站设计学生DW静态网页设计
程序员表白简短html代码,【杂谈】2018浪漫七夕：7款程序员必备表白源码（超炫酷）...
2018七夕将要来临,ki4网给大家准备了七款程序员表白专用源码,让你可以一举俘获美人心,下面就来看一看这七款表白代码大全,包含html.html5.CSS.JQ编写的一些非常简单实用的表白代码,非常 ...
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实现3D动态相册-蓝色海洋】HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
HTML5七夕情人节表白网页制作【空中散落的花瓣3D相册】HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
HTML5七夕情人节表白网页制作【幻化3D相册】HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...

HTML5七夕情人节表白网页制作【蓝色3D动态相册】HTML+CSS+JavaScript 程序员表白3D相册代码 html生日快乐祝福网页制作