HTML5七夕情人节表白网页制作【3D雪花展开相册】HTML CSS JavaScript 程序员表白网页简单的3D相册制作

这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

文章目录

一、网页介绍
一、网页效果
二、代码展示
- 1.HTML代码
- 2.CSS代码
三、精彩专栏

一、网页介绍

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

2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

一、网页效果

在这里插入图片描述

二、代码展示

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~

 <!--
 * @Author: your name
 * @Date: 2020-12-30 10:24:14
 * @LastEditTime: 2020-12-30 10:28:22
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \正方体旋转动画\index.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
 
    <!--下雪动画-->
    <script src="js/jquery.min.js"></script>
    <script src="js/snow.js"></script>
 
    <link type="text/css" href="css/style.css" rel="stylesheet" />
  </head>
 
  <body>
    <div class="snow-container">
      <div class="ziti">
        <span> ❤各位新年快乐呀！！ </span>
      </div>
 
      <div class="dongtai">
        <ul>
          <li>
            <img src="image/1.png" alt="" />
          </li>
          <li>
            <img src="image/2.png" alt="" />
          </li>
          <li>
            <img src="image/3.png" alt="" />
          </li>
          <li>
            <img src="image/4.png" alt="" />
          </li>
          <li>
            <img src="image/5.png" alt="" />
          </li>
          <li>
            <img src="image/6.png" alt="" />
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>
 
 
 复制

2.CSS代码

  
@charset "utf-8";
* {
    margin: 0;
    padding: 0;
}
 
html,
body {
    width: 100%;
    height: 100%;
    background-image: url("../image/timg.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
 
.snow-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
 
.dongtai {
    width: 200px;
    height: 200px;
    margin-top: 20%;
    margin-left: calc( 50% - 100px);
    position: absolute;
}
 
ul,
li {
    margin: 0;
    padding: 0;
}
 
ul {
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform-origin: 100px 100px -100px;
    /* 设置ul旋转的中心点在正方体中心 */
    background-color: #fff;
    list-style: none;
    position: absolute;
    animation: ani 10s infinite alternate;
    transform: rotateX(0deg) rotateY(0deg);
}
 
li {
    /* 装换为行内元素 */
    font-size: 60px;
    text-align: center;
    display: inline-block;
    width: 200px;
    height: 200px;
    position: absolute;
    border: 1px solid rgb(175, 209, 211);
    /* 让浏览器解析盒子的时候 宽认为是border和padding的和 */
    box-sizing: border-box;
}
 
.dongtai ul li img {
    height: 100%;
    width: 100%;
}
 
li:nth-of-type(1) {
    background-size: cover;
    left: 0;
    top: 0;
}
 
li:nth-of-type(2) {
    background-size: cover;
    left: -200px;
    top: 0;
    transform-origin: right;
    animation: boo2 10s infinite alternate;
}
 
li:nth-of-type(3) {
    background-size: cover;
    left: 0;
    top: 0;
    animation: boo3 10s infinite alternate;
}
 
li:nth-of-type(4) {
    background-size: cover;
    left: 200px;
    top: 0;
    transform-origin: left;
    animation: boo4 10s infinite alternate;
}
 
li:nth-of-type(5) {
    background-size: cover;
    left: 0;
    top: -200px;
    transform-origin: bottom;
    animation: boo5 10s infinite alternate;
}
 
li:nth-of-type(6) {
    background-size: cover;
    left: 0;
    top: 200px;
    transform-origin: top;
    animation: boo6 10s infinite alternate;
}
 
@keyframes boo2 {
    0% {
        transform: rotateY(0deg);
    }
    20% {
        transform: rotateY(-45deg);
    }
    30% {
        transform: rotateY(-90deg);
    }
    100% {
        transform: rotateY(-90deg);
    }
}
 
@keyframes boo3 {
    0% {
        transform: translateZ(-10px) rotateY(0deg);
    }
    20% {
        transform: translateZ(-100px) rotateY(-90deg);
    }
    30% {
        transform: translateZ(-200px) rotateY(-180deg);
    }
    100% {
        transform: translateZ(-200px) rotateY(-180deg);
    }
}
 
@keyframes boo4 {
    0% {
        transform: rotateY(0deg);
    }
    20% {
        transform: rotateY(45deg);
    }
    30% {
        transform: rotateY(90deg);
    }
    100% {
        transform: rotateY(90deg);
    }
}
 
@keyframes boo5 {
    0% {
        transform: rotateX(0deg);
    }
    20% {
        transform: rotateX(45deg);
    }
    30% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(90deg);
    }
}
 
@keyframes boo6 {
    0% {
        transform: rotateX(0deg);
    }
    20% {
        transform: rotateX(-45deg);
    }
    30% {
        transform: rotateX(-90deg);
    }
    100% {
        transform: rotateX(-90deg);
    }
}
 
@keyframes ani {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    10% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    20% {
        transform: rotateX(-45deg) rotateY(-45deg);
    }
    30% {
        transform: rotateX(-45deg) rotateY(-135deg);
    }
    40% {
        transform: rotateX(-45deg) rotateY(-215deg);
    }
    50% {
        transform: rotateX(-45deg) rotateY(-305deg);
    }
    60% {
        transform: rotateX(-45deg) rotateY(-395deg);
    }
    70% {
        transform: rotateX(-135deg) rotateY(-395deg);
    }
    80% {
        transform: rotateX(-225deg) rotateY(-395deg);
    }
    90% {
        transform: rotateX(-315deg) rotateY(-395deg);
    }
    100% {
        transform: rotateX(-405deg) rotateY(-395deg);
    }
}
 
.ziti {
    text-align: center;
    font-size: 60px;
    position: absolute;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: calc( 50% - 240px);
}
 
span {
    font-family: "微软雅黑";
    line-height: 50px;
    /*关键代码*/
    background-image: -webkit-linear-gradient(left, #147B96, #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%;
    -webkit-animation: masked-animation 4s infinite linear;
}
 
/*关键代码*/
 
@-webkit-keyframes masked-animation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}
 复制

三、精彩专栏

看到这里了就 【点赞，好评，收藏】 三连支持下吧，你的支持是我创作的动力。—— `

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥

HTML5七夕情人节表白网页制作【3D雪花展开相册】HTML CSS JavaScript 程序员表白网页简单的3D相册制作

文章目录

一、网页介绍

一、网页效果

二、代码展示

1.HTML代码

2.CSS代码

三、精彩专栏

HTML之JavaScript DOM编程获取元素的方式

HTML CSS JS Jquery 练手项目

JQuery高级操作详解

jQuery操作（删除内容）

使用 jQuery 创建带验证功能的自定义日期选择器

jQuery 从入门到精通：全面解析与实战指南

echarts 折线图上只显示某一个点值

月工作总结

设置echarts的图表语言环境为中文

彻底搞懂Vue中的Mixin混入（保姆级教程）

前端哥

C/C | 每日一练 (2)

Linux性能监控工具汇总

在线骑行|基于SpringBoot的在线骑行网站设计与实现(源码数据库文档)

DeepSeek 提示词：定义、作用、分类与设计原则

【Linux系统】—— 冯诺依曼体系结构与操作系统初理解

Python常见面试题的详解16

Docker实战-使用docker compose搭建博客

QQ登录测试用例报告

乐享数科：供应链金融—三个不同阶段的融资模式

【Deepseek】Linux 本地部署 Deepseek

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000

3
CSS常用属性（文本属性）

2024-11-04 09:11:111000

4
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

5
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

6
vue使用datav echarts

2024-09-06 00:09:381000

7
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

8
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

9
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

10
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

	<!--
	* @Author: your name
	* @Date: 2020-12-30 10:24:14
	* @LastEditTime: 2020-12-30 10:28:22
	* @LastEditors: Please set LastEditors
	* @Description: In User Settings Edit
	* @FilePath: \正方体旋转动画\index.html
	-->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title></title>

	<!--下雪动画-->
	<script src="js/jquery.min.js"></script>
	<script src="js/snow.js"></script>

	<link type="text/css" href="css/style.css" rel="stylesheet" />
	</head>

	<body>
	<div class="snow-container">
	<div class="ziti">
	<span> ❤各位新年快乐呀！！ </span>
	</div>

	<div class="dongtai">
	<ul>
	<li>
	<img src="image/1.png" alt="" />
	</li>
	<li>
	<img src="image/2.png" alt="" />
	</li>
	<li>
	<img src="image/3.png" alt="" />
	</li>
	<li>
	<img src="image/4.png" alt="" />
	</li>
	<li>
	<img src="image/5.png" alt="" />
	</li>
	<li>
	<img src="image/6.png" alt="" />
	</li>
	</ul>
	</div>
	</div>
	</body>
	</html>


	@charset "utf-8";
	* {
	margin: 0;
	padding: 0;
	}

	html,
	body {
	width: 100%;
	height: 100%;
	background-image: url("../image/timg.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	}

	.snow-container {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	}

	.dongtai {
	width: 200px;
	height: 200px;
	margin-top: 20%;
	margin-left: calc( 50% - 100px);
	position: absolute;
	}

	ul,
	li {
	margin: 0;
	padding: 0;
	}

	ul {
	width: 200px;
	height: 200px;
	transform-style: preserve-3d;
	transform-origin: 100px 100px -100px;
	/* 设置ul旋转的中心点在正方体中心 */
	background-color: #fff;
	list-style: none;
	position: absolute;
	animation: ani 10s infinite alternate;
	transform: rotateX(0deg) rotateY(0deg);
	}

	li {
	/* 装换为行内元素 */
	font-size: 60px;
	text-align: center;
	display: inline-block;
	width: 200px;
	height: 200px;
	position: absolute;
	border: 1px solid rgb(175, 209, 211);
	/* 让浏览器解析盒子的时候宽认为是border和padding的和 */
	box-sizing: border-box;
	}

	.dongtai ul li img {
	height: 100%;
	width: 100%;
	}

	li:nth-of-type(1) {
	background-size: cover;
	left: 0;
	top: 0;
	}

	li:nth-of-type(2) {
	background-size: cover;
	left: -200px;
	top: 0;
	transform-origin: right;
	animation: boo2 10s infinite alternate;
	}

	li:nth-of-type(3) {
	background-size: cover;
	left: 0;
	top: 0;
	animation: boo3 10s infinite alternate;
	}

	li:nth-of-type(4) {
	background-size: cover;
	left: 200px;
	top: 0;
	transform-origin: left;
	animation: boo4 10s infinite alternate;
	}

	li:nth-of-type(5) {
	background-size: cover;
	left: 0;
	top: -200px;
	transform-origin: bottom;
	animation: boo5 10s infinite alternate;
	}

	li:nth-of-type(6) {
	background-size: cover;
	left: 0;
	top: 200px;
	transform-origin: top;
	animation: boo6 10s infinite alternate;
	}

	@keyframes boo2 {
	0% {
	transform: rotateY(0deg);
	}
	20% {
	transform: rotateY(-45deg);
	}
	30% {
	transform: rotateY(-90deg);
	}
	100% {
	transform: rotateY(-90deg);
	}
	}

	@keyframes boo3 {
	0% {
	transform: translateZ(-10px) rotateY(0deg);
	}
	20% {
	transform: translateZ(-100px) rotateY(-90deg);
	}
	30% {
	transform: translateZ(-200px) rotateY(-180deg);
	}
	100% {
	transform: translateZ(-200px) rotateY(-180deg);
	}
	}

	@keyframes boo4 {
	0% {
	transform: rotateY(0deg);
	}
	20% {
	transform: rotateY(45deg);
	}
	30% {
	transform: rotateY(90deg);
	}
	100% {
	transform: rotateY(90deg);
	}
	}

	@keyframes boo5 {
	0% {
	transform: rotateX(0deg);
	}
	20% {
	transform: rotateX(45deg);
	}
	30% {
	transform: rotateX(90deg);
	}
	100% {
	transform: rotateX(90deg);
	}
	}

	@keyframes boo6 {
	0% {
	transform: rotateX(0deg);
	}
	20% {
	transform: rotateX(-45deg);
	}
	30% {
	transform: rotateX(-90deg);
	}
	100% {
	transform: rotateX(-90deg);
	}
	}

	@keyframes ani {
	0% {
	transform: rotateX(0deg) rotateY(0deg);
	}
	10% {
	transform: rotateX(0deg) rotateY(0deg);
	}
	20% {
	transform: rotateX(-45deg) rotateY(-45deg);
	}
	30% {
	transform: rotateX(-45deg) rotateY(-135deg);
	}
	40% {
	transform: rotateX(-45deg) rotateY(-215deg);
	}
	50% {
	transform: rotateX(-45deg) rotateY(-305deg);
	}
	60% {
	transform: rotateX(-45deg) rotateY(-395deg);
	}
	70% {
	transform: rotateX(-135deg) rotateY(-395deg);
	}
	80% {
	transform: rotateX(-225deg) rotateY(-395deg);
	}
	90% {
	transform: rotateX(-315deg) rotateY(-395deg);
	}
	100% {
	transform: rotateX(-405deg) rotateY(-395deg);
	}
	}

	.ziti {
	text-align: center;
	font-size: 60px;
	position: absolute;
	margin-top: 100px;
	margin-bottom: 100px;
	margin-left: calc( 50% - 240px);
	}

	span {
	font-family: "微软雅黑";
	line-height: 50px;
	/关键代码/
	background-image: -webkit-linear-gradient(left, #147B96, #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%;
	-webkit-animation: masked-animation 4s infinite linear;
	}

	/关键代码/

	@-webkit-keyframes masked-animation {
	0% {
	background-position: 0 0;
	}
	100% {
	background-position: -100% 0;
	}
	}

HTML5七夕情人节表白网页制作【3D雪花展开相册】HTML CSS JavaScript 程序员表白网页 简单的3D相册制作

文章目录

一、网页介绍

一、网页效果

二、代码展示

1.HTML代码

2.CSS代码

三、精彩专栏

微信扫一扫：分享

HTML5七夕情人节表白网页制作【3D雪花展开相册】HTML CSS JavaScript 程序员表白网页简单的3D相册制作