html静态网页3D相册代码（520/七夕表白代码）

于 2024-05-28 14:12:40 发布
阅读量1k 收藏 12
点赞数 32
分类专栏： html 文章标签： html 3d css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_tank88921/article/details/139265472
版权

在这个特别的日子里，人们会表达爱意，分享甜蜜的时刻。
无论是通过礼物、约会、写情书还是其他方式，重要的是真诚地表达你的感情，享受与对方在一起的时光。爱情是多样的，每个人的体验都是独一无二的，享受探索和体验爱情的过程吧！

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>susu</title>
    <style>
     @charset "utf-8";
*{
	margin:0;
	padding:0;
}
body{

	/*background: url(../img/preview.png) ;*/
	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;
}
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 5s 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/01.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
	background: url(../img/02.png) no-repeat 0 0;
	-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
	background: url(../img/03.png) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
	background: url(../img/04.png) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
	background: url(../img/05.png) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
	background: url(../img/06.png) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
	background: url(../img/1.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
	background: url(../img/2.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){
	background: url(../img/3.png) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
	background: url(../img/4.png) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
	background: url(../img/5.png) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
	background: url(../img/6.png) no-repeat 0 0;
	-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.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
@keyframes move{
	0%{
		-webkit-transform: rotateX(13deg) rotateY(0deg);
	}
	100%{
		-webkit-transform:rotateX(13deg) rotateY(360deg);
	}
}


    </style>
</head>
<body> 

<div class="box">
	<ul class="minbox">
		<li><img src="img\01.png"></li>
		<li><img src="img\02.png"></li>
		<li><img src="img\03.png"></li>
		<li><img src="img\04.png"></li>
		<li><img src="img\05.png"></li>
		<li><img src="img\06.png"></li>
	</ul>
	<ol class="maxbox">
		<li><img src="img\1.png"></li>
		<li><img src="img\2.png"></li>
		<li><img src="img\3.png"></li>
		<li><img src="img\4.png"></li>
		<li><img src="img\5.png"></li>
		<li><img src="img\6.png"></li>
	</ol>
</div>
</body>
</html>
</body>
</html>
穷苦书生_万事愁
关注
  • 32
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
情人节程序员用HTML网页表白【浪漫的烟花3D相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
3D圆环动态照片墙html文件
04-28
3D圆环动态照片墙html文件，鼠标可自由拖拽，某in爆火，添加30张jpg图片，浏览器直接打开，傻瓜式操作，效果精致。。。免费资源，可以拿去简单玩玩！！！
圣诞节动态酷炫3D静态网页
12-05
圣诞节向朋友表白的简单静态网站，动态酷炫3D图片展示！
静态网页设计——中华传统文化题材网页设计与实现 (纯HTML+CSS制作中国茶文化网站)
wx___BJ050106的博客
12-18 1240
🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习, 个别源码页面中没有使用js有需要的可以自行添加。🏅...
情人节浪漫3D照片墙源码
06-27
HTML 3D照片墙是一种创新的方式，可以用来送给女朋友一个特殊的礼物。 表格照片墙、球状照片墙、螺旋照片墙和格子照片墙等布局形式，可以将你们的美好回忆以独特而有趣的方式展示出来。通过这个特别的照片墙，你可以向女朋友展示你们共同的珍贵时刻，并给予她一个温馨而浪漫的惊喜。无论是纪念日、生日还是其他特殊场合，这个定制的HTML 3D照片墙会成为一份深深打动她心的礼物。 免费下载，免费下载，免费下载
抖音上很火的3D立体动态相册实现代码!
木贝西的博客
11-29 9942
html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>酷炫3d</title> <link type="text/css" href="css/style.css" rel="stylesheet" /> &lt...
HTML爱心照片墙源码
Timi2019的博客
12-05 1947
HTML爱心照片墙源码
用HTML做一個酷炫的照片墻，效果非常酷炫。
weqireirtotor的博客
11-24 2759
這就是全部代碼，怎麽弄照片呢？新建文件夾，命名爲照片墻，再在裏面建一個文件夾命名爲img，在文件夾裏面下載好30張美照，命名爲1.jpg，2.jpg......
【HTML 实现 —— 爱心照片墙】
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
01-15 6086
效果 这是初步时的照片组成的爱心模样： 这是我们把照片换成好看小姐姐之后的模样： 代码 index.html <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Html-照片墙</title> <link href="css/style.css" type="text/css" rel="styl
情人节程序员用HTML网页表白【全屏3D相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
520情人节表白代码 HTML5七夕情人节表白网页制作【白云飘动3D相册】HTML+CSS+JavaScript
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频...
HTML5七夕情人节表白网页制作【圣诞节3d相册】HTML+CSS+JavaScript 圣诞节3D相册代码表白制作
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频...
情人节程序员用HTML网页表白【3D旋转木马相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
html+js做一个照片墙，有四种样子。
weqireirtotor的博客
12-27 2651
先看看效果 效果不错吧！以下是代码（需要完整代码自行提取）HTML主体： css样式 完整版源码链接：链接：https://pan.baidu.com/s/12NaEczVqSUXBMIaUvwhFzw?pwd=b878 提取码：b878
html表白代码照片墙代码,前端特效之520表白神器-旋转照片墙
weixin_39912303的博客
06-23 4670
520马上到了，教大家一手表白神器，单身的程序员们感觉学起来，很简单。制作步骤：1. 新建代码目录，新建文件index.html，将以下代码拷贝到文件中2. 新建文件夹image，找12张图片放进去，修改imgae标签对应的src属性，酷炫的照片旋转就完成了。3. 代码效果如下，双击index.html或者直接拖到浏览器中打开即可520表白神器-照片特效*{padding:0;margin:0;}...
html实现好看的浪漫爱情回忆录(附源码)
xcLeigh
05-30 2776
html实现好看的浪漫爱情回忆录，html浪漫爱情，html实现爱情告白源码，html爱情浪漫表白甜蜜时刻，html表白，html制作爱情笔记，html制作浪漫表白。记录爱情的点点滴滴，记录爱情的甜蜜瞬间。以一间房子为一天，放8张照片，文字描述，记录当天的甜蜜时刻，总共5个房间，酷炫的动态效果，鼠标点击出现爱心。甜蜜瞬间拉满，赶紧打造一个属于自己的爱情小屋。
【源码+文档】基于HTML+CSS实现可交互照片墙
yuxibdd的博客
09-11 1153
根据需求，设计界面原型。
HTML+CSS实现简易可交互照片墙
never_say_never7的博客
04-03 2879
效果图 首先先把效果图摆上 功能 可以进行动态交互，当鼠标放到图片上时，图片会旋转放大。 代码 首选，要实现一个简易的可交互的照片墙，我们需要先找到合适的图片，然后就是利用代码实现了。 HTML代码： 使用时，只需要将图片地址换成自己的本地地址即可。 <!DOCTYPE html> <html lang="en"> <head> <meta ch...
html静态网页代码
最新发布
03-08
下面是一个简单的HTML静态网页代码示例： ```html <!DOCTYPE html> <html> 我的静态网页</title> </head> 欢迎来到我的网页</h1> 这是一个示例的段落。</p> 图片"> 列表项1</li> 列表项2</li> 列表项3</...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值