【工科宅的520礼物系列】之零基础小白手把手教零基础小白制作3D立方相册

村上春树曾经说过：“如果一直想见谁，迟早肯定见得到。”
在周末，代码小白一起来学习如何准备520这一天的礼物吧，奥利给！！！

准备工作

首先，我们要有一个文件框架，
css存放我们的代码，img里面存放我们制作相册的素材，html文件点击可以查看我们的最终效果。

html怎么添加背景图片

如何给我们的网页增加一个背景图片呢，首先要选择一个合适大小的壁纸图片存在img里面。

@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/bj.jpeg) no-repeat 0 0;
}

我们在这里面更换背景。名字要和你所选择的文件名称对应。如果不想改代码的话，就和我起一样的名字用同一个格式就好啦。

  background: url(../img/bj.jpeg) no-repeat 0 0;

html基础设置

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;
}

我们的li标签没有文字，html中list-style: none;表示我们的list标签前面没有任何修饰。

在HTML中<li>标签可以用来定义列表，
使用<li>标签定义的列表可以是个无序列表(<ul>)也可以是有序列表(<ol>)。
<li> 标签定义列表项目（li是lists的缩写）
<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>)

box里面是在设置我们的正方形边框，大小为$200\times 200$像素的，position位置设定。其他的，小白也不会了，不过这并不影响下一步。我们的相册是大立方体里面嵌套小立方体。所以我们代码有minbox,还有maxbox，在素材库中，不同像素尺寸的照片用最好用不同的命名规则创建。大概，最繁琐的环节就是素材库的准备。如何获得