1200字范文 > HTML5七夕情人节表白网页(蓝色背景3D相册) HTML+CSS+JS 求婚 html生日快乐祝福代码

HTML5七夕情人节表白网页(蓝色背景3D相册) HTML+CSS+JS 求婚 html生日快乐祝福代码

时间：2020-11-20 19:34:24

HTML5七夕情人节表白网页❤蓝色背景-3D相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白

这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，源码已上传，演示网址如下。

🧡文章末尾-已经附上源码下载地址

🧡作者主页-更多源码

🧡100款七夕情人节告白源码-专栏文章

作品介绍

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

2.网页作品编辑：任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++）均可修改网页。

文章目录

HTML5七夕情人节表白网页❤蓝色背景-3D相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白作品介绍一、作品展示二、文件目录三、代码实现四、学习资料五、源码下载六、更多源码

一、作品展示

二、文件目录

三、代码实现

<!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>