超简单:很火的3D立体动态相册,送给心爱的那个人

news/2024/10/31 1:30:31/

1.首先,我们一共需要三个文件,目录关系如下所示。先建index.html文件吧,电脑上先创建一个.txt文件,在里面加入代码后保存,重命名为index.html(记得把原来的.txt后缀覆盖)。html我用的谷歌浏览器。
总的三个文件,层级关系如图。
index.html代码如下:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>photo-3d</title><link rel="stylesheet" href="css/index.css" /></head><body><!--/*外层最大容器*/--><div class="wrap"><!--    /*包裹所有元素的容器*/--><div class="cube"><!--前面图片 --><div class="out_front"><img src="img/1.jpg"  class="pic"/></div><!--后面图片 --><div class="out_back"><img src="img/2.jpg"  class="pic"/></div><!--左图片 --><div class="out_left"><img src="img/3.jpg"  class="pic"/></div><div class="out_right"><img src="img/4.jpg"  class="pic"/></div><div class="out_top"><img src="img/5.jpg"  class="pic"/></div><div class="out_bottom"><img src="img/6.jpg"  class="pic"/></div><!--小正方体 --> <span class="in_front"><img src="img/7.jpg" class="in_pic" /></span><span class="in_back"><img src="img/8.jpg" class="in_pic" /></span><span class="in_left"><img src="img/9.jpg" class="in_pic" /></span><span class="in_right"><img src="img/10.jpg" class="in_pic" /></span><span class="in_top"><img src="img/11.jpg" class="in_pic" /></span><span class="in_bottom"><img src="img/12.jpg" class="in_pic" /></span></div></div></body>
</html>

2.同样的制作index.css文件。css目录下为index.css文件,创建.txt文件,在里面加入代码后保存,重命名为index.css。
css目录下为index.css文件,代码如下
index.css代码

html{background: #000;height: 100%;    
}
/*最外层容器样式*/
.wrap{position: relative;position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 200px;height: 200px;margin: auto;/*改变左右上下,图片方块移动*/}
/*包裹所有容器样式*/
.cube{width: 200px;height: 200px;margin: 0 auto;transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-80deg);-webkit-animation: rotate 20s infinite;/*匀速*/animation-timing-function: linear;
}
@-webkit-keyframes rotate{from{transform: rotateX(0deg) rotateY(0deg);}to{transform: rotateX(360deg) rotateY(360deg);}
}
.cube div{position: absolute;width: 200px;height: 200px;opacity: 0.8;transition: all .4s;
}
/*定义所有图片样式*/
.pic{width: 200px;height: 200px;
}
.cube .out_front{transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back{transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left{transform: rotateY(90deg) translateZ(100px);
}
.cube .out_right{transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_top{transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom{transform: rotateX(-90deg) translateZ(100px);
}
/*定义小正方体样式*/
.cube span{display: bloack;width: 100px;height: 100px;position: absolute;top: 50px;left: 50px;
}
.cube .in_pic{width: 100px;height: 100px;
}
.cube .in_front{transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back{transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left{transform: rotateY(90deg) translateZ(50px);
}
.cube .in_right{transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_top{transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom{transform: rotateX(-90deg) translateZ(50px);
}
/*鼠标移入后样式*/
.cube:hover .out_front{transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back{transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left{transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_right{transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_top{transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom{transform: rotateX(-90deg) translateZ(200px);
}

3.下载一些照片放在img文件夹里面。照片名字命名为1.jpg这种。图片大小设置为同样的,比如400*400,可以直接用·电脑上自带的绘图软件,打开编辑后保存即可。
图片大小设置为同样的,比如400*400,可以直接用·电脑上自带的绘图软件,打开编辑后保存即可。
4.OK,准备工作都好了,我们直接点击index.html就可以看到成果了。(博主还不会整动态视频,各位见谅)
在这里插入图片描述
在这里插入图片描述
有什么不懂得的,欢迎各位咨询!!!


http://www.ppmy.cn/news/281017.html

相关文章

Pubwin 2007有奖“找茬”计划

Pubwin 2007在研发过程中吸取了广大网管的建议&#xff0c;软件质量有了很大的提高&#xff0c;为长期保证Pubwin 2007的品质&#xff0c;新浩艺公司现推出Pubwin 2007有奖“找茬”计划&#xff0c;即从2007年6月14日发布的Pubwin2007 版本起&#xff08;只包括正式发布的版本&…

炫酷的展示画册制作神器,你确定不心动吗 | 万彩动画大师

区别于传统销售人员带着PPT的冗长讲解&#xff0c;新型产品营销方式以创意动画视频为宣传途径&#xff0c;通过简短的视频介绍&#xff0c;生动有趣的动态画面&#xff0c;轻松地表达产品的特色和功能。那么&#xff0c;好看的产品展示动画制作难做吗&#xff1f;要找动画公司制…

合创视觉科技UI设计全套设计推荐指南

UI设计不只是为了美观而设计的一种设计&#xff0c;它设计出来的作品更偏向于用户体验&#xff0c;因此UI设计可以说是一个包罗万象的设计&#xff0c;要掌握的东西很多。希望能帮助同学们日益精进。   一、学UI设计必看的十部书&#xff1a;   《破茧成蝶》、《破茧成…

2022年上海市普陀区创新型中小企业名单公示

根据《上海市优质中小企业梯度培育管理实施细则》&#xff08;沪经信规范〔2022〕8号&#xff09;&#xff0c;上海市经济和信息化委员会开展了2022年创新型中小企业评价工作&#xff0c;已完成相关审核&#xff0c;现将我区通过审核的企业名单予以公示&#xff08;见附件&…

02-启动 Vue 项目

一. 学习目标 掌握 Vue 项目的启动 二. 学习内容 掌握 Vue 项目的启动 三. 学习过程 项目的启动也有两种方式&#xff0c;一种是通过图形界面启动&#xff0c;另一种是通过命令行启动。 1.图形界面 打开vscode编辑器&#xff0c;点击 1.文件 ——>打开文件夹&#xff0c…

算法思想-分治算法

tip&#xff1a;作为程序员一定学习编程之道&#xff0c;一定要对代码的编写有追求&#xff0c;不能实现就完事了。我们应该让自己写的代码更加优雅&#xff0c;即使这会费时费力。 推荐&#xff1a;体系化学习Java&#xff08;Java面试专题&#xff09; 文章目录 1、什么是分…

优雅草蜻蜓T系统·专业版服务端以及后台部署说明-完整步骤-语音会议室支持多人语音,屏幕分享,导航配置,会议管理,会员管理

蜻蜓T系统专业版服务端以及后台部署 1&#xff0c;解压文件和基础环境配置 将源码用git工具克隆到/www/wwwroot git clone git地址 或者是由优雅草发送的商业源码文件包直接进行解压 ​ 编辑切换为居中 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09;…

使用idea创建java web项目

创建web项目有很多方法&#xff0c;就说一个最简单的方法吧。 创建一个java项目&#xff0c;点击创建右击项目选择添加框架支持。勾选上web应用程序&#xff0c;点击确定。 再点击当前文件&#xff0c;编辑配置 点击加号&#xff0c;选择Tomcat服务器&#xff08;本地&#xf…