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">html,body {width: 100%;height: 100%;margin: 0;padding: 0;}*,*:before,*:after {-webkit-box-sizing: border-box;box-sizing: border-box;position: relative;-webkit-animation-timing-function: cubic-bezier(0.5, 0, 0, 1) !important;animation-timing-function: cubic-bezier(0.5, 0, 0, 1) !important;}body {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-perspective: 1000px;perspective: 1000px;background: -webkit-gradient(linear, left top, right bottom, from(#a4c5c7), to(#2D3F48));}.cube[data-cube="132"]>.cube-wrap [class^="shadow-"] {-webkit-animation-delay: 53ms;animation-delay: 53ms;}[class^="shadow-"][data-cube="132"]:before,.large-shadow[data-cube="132"] {-webkit-animation-delay: 53ms;animation-delay: 53ms;}.cube[data-cube="133"]>.cube-wrap,.cube[data-cube="133"]>.cube-wrap:before,.cube[data-cube="133"]>.cube-wrap:after,.cube[data-cube="133"]>.cube-wrap>[class^="cube-"],.cube[data-cube="133"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="133"]>.cube-wrap>[class^="cube-"]:after {-webkit-animation-delay: 111ms;animation-delay: 111ms;}}[class^="shadow-"][data-cube="223"]:before,.large-shadow[data-cube="223"] {-webkit-animation-delay: 47ms;animation-delay: 47ms;}.cube[data-cube="231"]>.cube-wrap,.cube[data-cube="231"]>.cube-wrap:before,.cube[data-cube="231"]>.cube-wrap:after,.cube[data-cube="231"]>.cube-wrap>[class^="cube-"],.cube[data-cube="231"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="231"]>.cube-wrap>[class^="cube-"]:after {-webkit-animation-delay: 29ms;animation-delay: 29ms;}.cube[data-cube="231"]>.cube-wrap [class^="shadow-"] {-webkit-animation-delay: 29ms;animation-delay: 29ms;}[class^="shadow-"][data-cube="231"]:before,.large-shadow[data-cube="231"] {-webkit-animation-delay: 29ms;animation-delay: 29ms;}.cube[data-cube="232"]>.cube-wrap,.cube[data-cube="232"]>.cube-wrap:before,.cube[data-cube="232"]>.cube-wrap:after,.cube[data-cube="232"]>.cube-wrap>[class^="cube-"],.cube[data-cube="232"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="232"]>.cube-wrap>[class^="cube-"]:after {-webkit-animation-delay: 81ms;animation-delay: 81ms;}.cube[data-cube="232"]>.cube-wrap [class^="shadow-"] {-webkit-animation-delay: 81ms;animation-delay: 81ms;}[class^="shadow-"][data-cube="232"]:before,.large-shadow[data-cube="232"] {-webkit-animation-delay: 81ms;animation-delay: 81ms;}.cube[data-cube="233"]>.cube-wrap,.cube[data-cube="233"]>.cube-wrap:before,.cube[data-cube="233"]>.cube-wrap:after,.cube[data-cube="233"]>.cube-wrap>[class^="cube-"],.cube[data-cube="233"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="233"]>.cube-wrap>[class^="cube-"]:after {-webkit-animation-delay: 238ms;animation-delay: 238ms;}.cube[data-cube="233"]>.cube-wrap [class^="shadow-"] {-webkit-animation-delay: 238ms;animation-delay: 238ms;}[class^="shadow-"][data-cube="233"]:before,.large-shadow[data-cube="233"] {-webkit-animation-delay: 238ms;animation-delay: 238ms;}.cube[data-cube="311"]>.cube-wrap,.cube[data-cube="311"]>.cube-wrap:before,.cube[data-cube="311"]>.cube-wrap:after,.cube[data-cube="311"]>.cube-wrap>[class^="cube-"],.cube[data-cube="311"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="311"]>.cube-wrap>[class^="cube-"]:after {-webkit-animation-delay: 103ms;animation-delay: 103ms;}.cube[data-cube="311"]>.cube-wrap [class^="shadow-"] {-webkit-animation-delay: 103ms;animation-delay: 103ms;}[class^="shadow-"][data-cube="311"]:before,.large-shadow[data-cube="311"] {-webkit-animation-delay: 103ms;animation-delay: 103ms;}.cube[data-cube="312"]>.cube-wrap,.cube[data-cube="312"]>.cube-wrap:before,.cube[data-cube="312"]>.cube-wrap:after,.cube[data-cube="312"]>.cube-wrap>[class^="cube-"],.cube[data-cube="312"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="312"]>.cube-wrap>[class^="cube-"]:after {-webkit-animation-delay: 195ms;animation-delay: 195ms;}.cube[data-cube="312"]>.cube-wrap [class^="shadow-"] {-webkit-animation-delay: 195ms;animation-delay: 195ms;}[class^="shadow-"][data-cube="312"]:before,.large-shadow[data-cube="312"] {-webkit-animation-delay: 195ms;animation-delay: 195ms;}.cube[data-cube="313"]>.cube-wrap,.cube[data-cube="313"]>.cube-wrap:before,.cube[data-cube="313"]>.cube-wrap:after,.cube[data-cube="313"]>.cube-wrap>[class^="cube-"],.cube[data-cube="313"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="313"]>.cube-wrap>[class^="cube-"]:after {-webkit-animation-delay: 81ms;animation-delay: 81ms;}.cube[data-cube="313"]>.cube-wrap [class^="shadow-"] {-webkit-animation-delay: 81ms;animation-delay: 81ms;}[class^="shadow-"][data-cube="313"]:before,.large-shadow[data-cube="313"] {-webkit-animation-delay: 81ms;animation-delay: 81ms;}.cube[data-cube="321"]>.cube-wrap,.cube[data-cube="321"]>.cube-wrap:before,.cube[data-cube="321"]>.cube-wrap:after,.cube[data-cube="321"]>.cube-wrap>[class^="cube-"],.cube[data-cube="321"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="321"]>.cube-wrap>[class^="cube-"]:after {-webkit-animation-delay: 294ms;animation-delay: 294ms;}.cube[data-cube="321"]>.cube-wrap [class^="shadow-"] {-webkit-animation-delay: 294ms;animation-delay: 294ms;}[class^="shadow-"][data-cube="321"]:before,.large-shadow[data-cube="321"] {-webkit-animation-delay: 294ms;animation-delay: 294ms;}.cube[data-cube="322"]>.cube-wrap,.cube[data-cube="322"]>.cube-wrap:before,.cube[data-cube="322"]>.cube-wrap:after,.cube[data-cube="322"]>.cube-wrap>[class^="cube-"],.cube[data-cube="322"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="322"]>.cube-wrap>[class^="cube-"]:after {-webkit-animation-delay: 147ms;animation-delay: 147ms;}.cube[data-cube="322"]>.cube-wrap [class^="shadow-"] {-webkit-animation-delay: 147ms;animation-delay: 147ms;}[class^="shadow-"][data-cube="322"]:before,.large-shadow[data-cube="322"] {-webkit-animation-delay: 147ms;animation-delay: 147ms;}.cube[data-cube="323"]>.cube-wrap,.cube[data-cube="323"]>.cube-wrap:before,.cube[data-cube="323"]>.cube-wrap:after,.cube[data-cube="323"]>.cube-wrap>[class^="cube-"],.cube[data-cube="323"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="323"]>.cube-wrap>[class^="cube-"]:after {-webkit-animation-delay: 218ms;animation-delay: 218ms;}.cube[data-cube="323"]>.cube-wrap [class^="shadow-"] {-webkit-animation-delay: 218ms;animation-delay: 218ms;}[class^="shadow-"][data-cube="323"]:before,.large-shadow[data-cube="323"] {-webkit-animation-delay: 218ms;animation-delay: 218ms;}.cube[data-cube="331"]>.cube-wrap,.cube[data-cube="331"]>.cube-wrap:before,.cube[data-cube="331"]>.cube-wrap:after,.cube[data-cube="331"]>.cube-wrap>[class^="cube-"],.cube[data-cube="331"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="331"]>.cube-wrap>[class^="cube-"]:after {-webkit-animation-delay: 240ms;animation-delay: 240ms;}.cube[data-cube="331"]>.cube-wrap [class^="shadow-"] {-webkit-animation-delay: 240ms;animation-delay: 240ms;}[class^="shadow-"][data-cube="331"]:before,.large-shadow[data-cube="331"] {-webkit-animation-delay: 240ms;animation-delay: 240ms;}.cube[data-cube="332"]>.cube-wrap,.cube[data-cube="332"]>.cube-wrap:before,.cube[data-cube="332"]>.cube-wrap:after,.cube[data-cube="332"]>.cube-wrap>[class^="cube-"],.cube[data-cube="332"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="332"]>.cube-wrap>[class^="cube-"]:after {-webkit-animation-delay: 251ms;animation-delay: 251ms;}.cube[data-cube="332"]>.cube-wrap [class^="shadow-"] {-webkit-animation-delay: 251ms;animation-delay: 251ms;}[class^="shadow-"][data-cube="332"]:before,.large-shadow[data-cube="332"] {-webkit-animation-delay: 251ms;animation-delay: 251ms;}.cube[data-cube="333"]>.cube-wrap,.cube[data-cube="333"]>.cube-wrap:before,.cube[data-cube="333"]>.cube-wrap:after,.cube[data-cube="333"]>.cube-wrap>[class^="cube-"],.cube[data-cube="333"]>.cube-wrap>[class^="cube-"]:before,.cube[data-cube="333"]>.cube-wrap>[class^="cube-"]:after {-webkit-animation-delay: 73ms;animation-delay: 73ms;}.cube[data-cube="333"]>.cube-wrap [class^="shadow-"] {-webkit-animation-delay: 73ms;animation-delay: 73ms;}[class^="shadow-"][data-cube="333"]:before,.large-shadow[data-cube="333"] {-webkit-animation-delay: 73ms;animation-delay: 73ms;}</style></head><body><input type="checkbox" id="shadows" checked /><label for="shadows">Soft shadows</label><div class="cubes"><div class="cube" data-cube="111"><div class="cube-wrap"><div class="cube-top"><div class="shadow-z" data-cube="112"></div></div><div class="cube-bottom"></div><div class="cube-front-left"></div><div class="cube-front-right"></div><div class="cube-back-left"></div><div class="cube-back-right"></div></div></div><div class="cube" data-cube="121"><div class="cube-top"><div class="shadow-flip" data-cube="113"></div><div class="shadow-y" data-cube="113"></div><div class="shadow-z" data-cube="211"></div></div><div class="cube-bottom"></div><div class="cube-front-left"></div><div class="cube-front-right"></div><div class="cube-back-left"></div><div class="cube-back-right"></div></div></div><div class="cube" data-cube="223"><div class="cube-wrap"><div class="cube-top"><div class="shadow-y" data-cube="123"></div><div class="shadow-z" data-cube="221"></div></div><div class="cube-bottom"></div><div class="cube-front-left"></div><div class="cube-front-right"></div><div class="cube-back-left"></div><div class="cube-back-right"></div></div></div><div class="cube" data-cube="233"><div class="cube-wrap"><div class="cube-top"><div class="shadow-y" data-cube="133"></div><div class="shadow-z" data-cube="231"></div></div><div class="cube-bottom"></div><div class="cube-front-left"></div><div class="cube-front-right"></div><div class="cube-back-left"></div><div class="cube-back-right"></div></div></div><div class="cube" data-cube="313"><div class="cube-wrap"><div class="cube-top"><div class="shadow-flip" data-cube="213"></div><div class="shadow-y" data-cube="213"></div><div class="shadow-z" data-cube="311"></div></div><div class="cube-bottom"></div><div class="cube-front-left"></div><div class="cube-front-right"></div><div class="cube-back-left"></div><div class="cube-back-right"></div></div></div><div class="cube" data-cube="323"><div class="cube-wrap"><div class="cube-top"><div class="shadow-flip" data-cube="223"></div><div class="shadow-y" data-cube="223"></div><div class="shadow-z" data-cube="321"></div></div><div class="cube-bottom"></div><div class="cube-front-left"></div><div class="cube-front-right"></div><div class="cube-back-left"></div><div class="cube-back-right"></div></div></div><div class="cube" data-cube="333"><div class="cube-wrap"><div class="cube-top"><div class="shadow-flip" data-cube="233"></div><div class="shadow-y" data-cube="233"></div><div class="shadow-z" data-cube="331"></div></div><div class="cube-bottom"></div><div class="cube-front-left"></div><div class="cube-front-right"></div><div class="cube-back-left"></div><div class="cube-back-right"></div></div></div><div class="large-shadows"><div class="large-shadow" data-cube="113"></div><div class="large-shadow" data-cube="123"></div><div class="large-shadow" data-cube="133"></div><div class="large-shadow" data-cube="213"></div><div class="large-shadow" data-cube="223"></div><div class="large-shadow" data-cube="233"></div><div class="large-shadow" data-cube="313"></div><div class="large-shadow" data-cube="323"></div><div class="large-shadow" data-cube="333"></div></div></div></body><script></script></html>
四、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
五、源码下载
【百度网盘-完整源码下载地址↓】
链接：点我下载源码 /s/1UdFzRE6mEKC5D1xALTMbYw
提取码：8888
六、更多源码
❤100款表白网页演示地址
❤100款表白网页在线视频演示
HTML5七夕情人节表白网页(抖音超火3D炫酷魔方) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
