900字范文 > HTML5七夕情人节表白网页(抖音3D立方体图像库) HTML+CSS+JavaScript 求婚示爱代码

HTML5七夕情人节表白网页(抖音3D立方体图像库) HTML+CSS+JavaScript 求婚示爱代码

时间：2019-04-27 02:26:38

HTML5七夕情人节表白网页❤抖音❤3D立方体图像库❤ HTML+CSS+JavaScript 求婚示爱代码 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+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白作品介绍一、作品展示二、文件目录三、代码实现四、学习资料五、源码下载六、更多源码

一、作品展示

二、文件目录

三、代码实现

<html><head><meta charset="utf-8"><script id="jqbb" src="/jquery/1.11.1/jquery.min.js"></script><style type="text/css">:root {/* Base font size */font-size: 10px;/* Border color variable */--border-color: #e70;}* {box-sizing: border-box;}body {font-family: "Montserrat", Arial, sans-serif;font-weight: 500;line-height: 1.5;text-align: center;min-height: 100vh;padding: 4rem 2rem;color: #fafafa;background-color: #080808;}h1 {font-size: 4rem;}h2 {font-size: 2rem;margin-bottom: 2.5rem;}.cube-container {position: relative;width: 30rem;height: 30rem;margin: 18rem auto 6rem;perspective: 100rem;}.cube {position: absolute;width: 100%;height: 100%;transform-style: preserve-3d;transition: transform 1s cubic-bezier(0.32, 0.05, 0.35, 1.6);}.cube-face-image {display: block;position: absolute;/* opacity: 0.95; *//* border: 0.2rem solid #fafafa; */box-shadow: 0 0 0.5rem #fff, 0 0 1.5rem var(--border-color), 0 0 3rem var(--border-color);}.image-buttons {display: grid;grid-template-columns: repeat(3, auto);grid-gap: 1.5rem;justify-content: center;}.image-buttons input {border: 0.2rem solid #fafafa;}.image-buttons input:focus {outline: none;border: 0.2rem solid var(--border-color);}/* Transform images to create cube */.image-1 {transform: translateZ(15rem);}.image-2 {transform: rotateX(-180deg) translateZ(15rem);}.image-3 {transform: rotateY(90deg) translateZ(15rem);}.image-4 {transform: rotateY(-90deg) translateZ(15rem);}.image-5 {transform: rotateX(90deg) translateZ(15rem);}.image-6 {transform: rotateX(-90deg) translateZ(15rem);}/* Transform cube to show correct image */.cube.initial-position {transform: translateZ(-15rem) translateY(-2rem) rotateX(-15deg) rotateY(18deg) rotateZ(2deg);}.cube.show-image-1 {transform: translateZ(-15rem);}.cube.show-image-2 {transform: translateZ(-15rem) rotateX(180deg);}.cube.show-image-3 {transform: translateZ(-15rem) rotateY(-90deg);}.cube.show-image-4 {transform: translateZ(-15rem) rotateY(90deg);}.cube.show-image-5 {transform: translateZ(-15rem) rotateX(-90deg);}.cube.show-image-6 {transform: translateZ(-15rem) rotateX(90deg);}.image-buttons input {width: 104px;}.clickText{margin-top: 150px;}</style></head><body><div class="cube-container"><div class="cube initial-position"><img class="cube-face-image image-1" src="./images/1.jpg"><img class="cube-face-image image-2" src="./images/2.jpg"><img class="cube-face-image image-3" src="./images/3.jpg"><img class="cube-face-image image-4" src="./images/4.jpg"><img class="cube-face-image image-5" src="./images/5.jpg"><img class="cube-face-image image-6" src="./images/6.jpg"></div></div><h2 class="clickText">点击下面的图片来旋转立方体</h2><div class="image-buttons"><input type="image" class="show-image-1" src="./images/1.jpg"></input><input type="image" class="show-image-2" src="./images/2.jpg"></input><input type="image" class="show-image-3" src="./images/3.jpg"></input><input type="image" class="show-image-4" src="./images/4.jpg"></input><input type="image" class="show-image-5" src="./images/5.jpg"></input><input type="image" class="show-image-6" src="./images/6.jpg"></input></div></body><script>//DOM load eventwindow.addEventListener("DOMContentLoaded", () => {const cube = document.querySelector(".cube"),imageButtons = document.querySelector(".image-buttons");let cubeImageClass = cube.classList[1];//Add click event listener to image buttons containerimageButtons.addEventListener("click", (e) => {//Get node type and class value of clicked elementconst targetNode = e.target.nodeName,targetClass = e.target.className;//Check if image input has been clicked and isn't the currently shown imageif (targetNode === "INPUT" && targetClass !== cubeImageClass) {console.log(`Show Image: ${targetClass.charAt(11)}`);//Replace previous cube image class with new classcube.classList.replace(cubeImageClass, targetClass);//Update cube image class variable with new classcubeImageClass = targetClass;}}, false);}, false);</script></html>