HTML5七夕情人节表白网页(抖音超火3D炫酷魔方) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
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="https://libs.baidu.com/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 shadowslabel>
<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模板网站
五、源码下载
【百度网盘-完整源码下载地址↓】
链接：点我下载源码 https://pan.baidu.com/s/1UdFzRE6mEKC5D1xALTMbYw
提取码：8888
六、更多源码
❤100款表白网页演示地址
❤100款表白网页在线视频演示