如何用HTML+CSS制作3D动态相册？ #情人节表白#

最新推荐文章于 2024-07-25 15:07:09 发布
最新推荐文章于 2024-07-25 15:07:09 发布
阅读量1.5k 收藏 38
点赞数 13
分类专栏： 情人节表白 动态相册 Html 文章标签： html css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Francis_White/article/details/113796875
版权

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D立体相册</title>
<link type="text/css" href="css/index.css" rel="stylesheet" />
</head>
</body>
<audio autoplay="autoplay" loop="loop" preload="auto" controls="controls"
	src="C:\Users\chdn\Desktop\3D Album\周杰伦 - 告白气球.mp3">
</audio>
<div class="box">
	<ul class="minbox"><!-- 内层 -->
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ol class="maxbox"><!-- 外层 -->
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ol>
</div>
</body>
</html>

CSS代码：

@charset "utf-8";
*{
	margin:0;
	padding:0;
}
body{
	max-width: 100%;
	min-width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	background: url(../img/1.png) no-repeat 0 0;
}
li{
	list-style: none;
}
.box{
	width:200px;
	height:200px;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;
	position: absolute;
	margin-left: 42%;
	margin-top: 22%;
	-webkit-transform-style:preserve-3d;
	-webkit-transform:rotateX(13deg);
	-webkit-animation:move 10s linear infinite;/* 旋转速度，时间越短速度越快 */
}
.minbox{
	width:100px;
	height:100px;
	position: absolute;
	left:50px;
	top:30px;
	-webkit-transform-style:preserve-3d;
}
.minbox li{
	width:100px;
	height:100px;
	position: absolute;
	left:0;
	top:0;
}
.minbox li:nth-child(1){
	background: url(../img/1.jpg) no-repeat 0 0;
		background-size:100px 100px;
	-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
	background: url(../img/2.jpg) no-repeat 0 0;
		background-size:100px 100px;
	-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
	background: url(../img/3.jpg) no-repeat 0 0;
		background-size:100px 100px;
		-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
	background: url(../img/4.jpg) no-repeat 0 0;
	background-size:100px 100px;	
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
	background: url(../img/5.jpg) no-repeat 0 0;
	background-size:100px 100px;	
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
	background: url(../img/6.jpg) no-repeat 0 0;
	background-size:100px 100px;	
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
	background: url(../img/1.jpg) no-repeat 0 0;
		background-size:400px 400px;	
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
	background: url(../img/2.jpg) no-repeat 0 0;
	background-size:400px 400px;	
	-webkit-transform:rotateX(180deg) translateZ(50px);
}
.maxbox li:nth-child(3){
	background: url(../img/3.jpg) no-repeat 0 0;
		background-size:400px 400px;	
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
	background: url(../img/4.jpg) no-repeat 0 0;
		background-size:400px 400px;	
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
	background: url(../img/5.jpg) no-repeat 0 0;
		background-size:400px 400px;	
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
	background: url(../img/6.jpg) no-repeat 0 0;
		background-size:400px 400px;	
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox{
	width: 800px;
	height: 400px;
	position: absolute;
	left: 0;
	top: -20px;
	-webkit-transform-style: preserve-3d;
	
}
.maxbox li{
	width: 200px;
	height: 200px;
	background: #fff;
	border:1px solid #ccc;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0.2;
	-webkit-transition:all 1s ease;
}
.maxbox li:nth-child(1){
	-webkit-transform:translateZ(100px);
}
.maxbox li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(100px);
}
.box:hover ol li:nth-child(1){
	-webkit-transform:translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.9;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.9;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.9;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.9;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.9;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.9;
	left: -100px;
	top: -100px;
}
@keyframes move{
	0%{
		-webkit-transform: rotateX(13deg) rotateY(0deg);
	}
	100%{
		-webkit-transform:rotateX(13deg) rotateY(360deg);
	}
}

PS：
1.
在这里插入图片描述
只需把红线处的图片名称改为你所需要的图片对应的名称即可。
2.
在这里插入图片描述
这是背景图片。
3.
在这里插入图片描述
图中选中部分为背景音乐。
附上最终的效果：
在这里插入图片描述
如果有小伙伴（小白）不会具体操作的话，可以私信或留言！

醉林疯
关注
  • 13
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
xcLeigh
07-25 2648
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
CSS实现图片边框酷炫效果
流绪@微梦
07-26 1418
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
纯CSS制作3D动态相册【流星雨3D旋转相册】HTML+CSS+JavaScriptHTML5七夕情人节表白网页制作
网页设计与制作 | HTML+CSS+JS
06-18 672
🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】 🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新
CSS 的工作原理
07-25 1055
我可能会为一个框给出一个以像素为单位的回退宽度，然后继续给出一个值为 .旧浏览器将使用像素版本，忽略该行，因为它们不理解它。请记住，这是浏览器加载网页时发生的情况的非常简化的版本，并且不同的浏览器将以不同的方式处理该过程。鉴于 CSS 一直在开发中，因此领先于浏览器可以识别的内容，您可能会想知道如果浏览器遇到它无法识别的 CSS 选择器或声明会发生什么。如果浏览器正在解析您的规则，并遇到它无法理解的属性或值，它会忽略它并继续下一个声明。我们已经学习了CSS的基础知识，它的用途以及如何编写简单的样式表。
秃鹰算法BES优化Transformer-LSTM负荷数据回归预测【含Matlab源码 6405期】.zip
08-01
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化Transformer-LSTM预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化Transformer-LSTM预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化Transformer-LSTM预测 4.4.3 灰狼算法GWO/狼群算法WPA优化Transformer-LSTM预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化Transformer-LSTM预测 4.4.5 萤火虫算法FA/差分算法DE优化Transformer-LSTM预测 4.4.6 其他优化算法优化Transformer-LSTM预测
EtherCAT协议（中文版）完整1-6册
08-01
ETG1000_1_CHN_Overview_V1i0i2_C01 ETG1000_2_CHN_EcatPhysicalLayer_V1i0i2_C01 ETG1000_3_CHN_EcatDLLServices_V1i0i2_C01 ETG1000_4_CHN_EcatDLLServices_V1i0i2_C01 ETG1000_5_CHN_EcatALServices_V1i0i2_C01 ETG1000_6_CHN_EcatALProtocols_V1i0i2_C01 ETG1000_6_V1i0i3_S_R_EcatALProtocols
大数据中心建设方案.pptx
08-01
大数据中心建设方案.pptx
PHP开发神器：探索流行的PHP代码编辑器和IDE
08-01
PHP（Hypertext Preprocessor）是一种广泛使用的开源脚本语言，主要用于Web开发，将服务器端的脚本与HTML页面相结合，创建动态交互式Web页面。PHP的名字是一个递归缩写，表示"PHP: Hypertext Preprocessor"。 ## PHP的主要特点： 1. **服务器端脚本**：PHP代码在服务器上执行，生成HTML内容，然后发送给客户端浏览器显示。 2. **嵌入HTML**：PHP代码可以直接嵌入到HTML代码中，或者通过PHP标签包含在单独的文件中。 3. **强大的功能**：PHP提供了丰富的内置函数和库，支持多种数据库连接（如MySQL、PostgreSQL等），可以处理表单、文件上传、发送邮件等。 4. **跨平台**：PHP可以在多种操作系统上运行，包括Linux、Windows、macOS等。 5. **面向对象**：PHP支持面向对象编程（OOP），允许开发者创建类和对象。 6. **可扩展性**：PHP可以通过PECL扩展库来扩展其功能。 7. **社区支持**：PHP有一个庞大的开发者社区，提供大量的框架、工具和资源。 #
[毕业设计]JAVA实现SNMP协议对网络设备MIB库的访问与数据解析(源代码+论文).zip
08-01
[毕业设计]JAVA实现SNMP协议对网络设备MIB库的访问与数据解析(源代码+论文)
静态页面仿第五人格官网(简易版)
08-01
静态页面仿第五人格官网(简易版)
1维或n维多项式建模-matlab
08-01
1维或n维多项式建模 Polyfitn是polyfit的扩展，允许用户创建具有多个自变量的模型。它还允许用户指定一个通用模型，例如二次模型，具有常数和二次项，但没有线性项。 例如，为了将多项式模型拟合到从余弦曲线中选择的点，我们只需要偶数阶项。 x = -2:.1:2; y = cos(x); p = polyfitn(x,y,'constant x^2 x^4 x^6'); p.Coefficients ans = [0.99996 -0.49968 0.041242 -0.0012079] 当然，系数不会是精确的，因为我只使用了有限数量的项来描述本质上截断的泰勒级数，而且我只有有限数量的点来构建模型。余弦级数的前4个系数应该是： >> [1 -1/2 1/24 -1/720] ans= 1 -0.5 0.041667 -0.0013889 所以我们得到了预期的结果。 x = rand(100,1); y = rand(100,1); z = exp(x+y) + randn(100,1)/100; p = polyfitn([x,y],z,3);
工业互联网智慧物流园解决方案.pptx
08-01
工业互联网智慧物流园解决方案.pptx
主要记录计算机视觉、VSLAM、点云、结构光、机械臂抓取、三维重建、深度学习、自动驾驶等前沿paper与文章 .zip
08-01
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4
Linux进程控制实验报告.pdf
08-01
Linux进程控制实验报告
汽车内外饰行业深度报告：诞生优质零部件企业的消费属性赛道
最新发布
08-01
汽车内外饰行业深度报告：诞生优质零部件企业的消费属性赛道
chromedriver-mac-x64_127.0.6519.0.zip
08-01
chromedriver-mac-x64_127.0.6519.0.zip
客户销售额排名.xlsx.xlsx
08-01
销售管理，客户类型，客户满意度，客户登记，进销存，客户记录 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
数字图像处理技术PPT、图像增强之灰度变换和彩色增强.ppt
08-01
数字图像处理技术PPT、图像增强之灰度变换和彩色增强
普华永道：2023经济功能区国资国企发展研究报告.rar
08-01
普华永道：2023经济功能区国资国企发展研究报告.rar
用html + css3d制作一个表白页面
05-24
好的，下面是一个简单的示例，你可以根据自己的需求进行修改和优化。 HTML代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表白页面</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="wrapper"> <div class="box front"> <h1>我喜欢你</h1> <p>你是我生命中最重要的人，我想把我的心交给你，与你携手走过每一天。</p> </div> <div class="box back"> <h1>愿意接受我的表白吗？</h1> <button class="yes">YES</button> <button class="no">NO</button> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="main.js"></script> </body> </html> ``` CSS代码： ```css * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #f9f9f9; } .wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: 400px; perspective: 1000px; } .box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; border-radius: 10px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); padding: 30px; text-align: center; transition: transform 0.5s ease; backface-visibility: hidden; } .front { transform: rotateY(0deg); } .back { transform: rotateY(180deg); } h1 { font-size: 30px; margin-bottom: 20px; color: #f44336; } p { font-size: 18px; line-height: 1.5; color: #333; } button { display: block; margin: 30px auto 0; padding: 10px 20px; background-color: #f44336; border: none; border-radius: 20px; color: #fff; font-size: 18px; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: #d32f2f; } ``` JavaScript代码： ```javascript $('.box').on('click', function() { $(this).toggleClass('front back'); }); $('.yes').on('click', function() { alert('太好了，谢谢你接受我的表白！我们在一起吧！'); }); $('.no').on('click', function() { alert('很遗憾，但我还是要说一句：我喜欢你！'); }); ``` 以上代码实现了一个简单的表白页面，点击页面的任意一处可以翻转卡片，点击YES和NO按钮可以弹出对应的提示框。你可以根据需要进行修改和优化。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值