1000字范文 > HTML5七夕情人节表白网页制作【蓝色3D动态相册】HTML+CSS+JavaScript 程序员表白3D相

HTML5七夕情人节表白网页制作【蓝色3D动态相册】HTML+CSS+JavaScript 程序员表白3D相

时间：2024-01-13 15:13:28

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