3D表白动态相册-包含源码压缩包和方法

我就是我 2022-08-28 04:38 90阅读 0赞

### 文章目录 ###

*  1. 先上个例子
 *  2. HTML页面设计
 *  3. css风格设计
 *  4. 12张图片
 *  5. GitHub仓库自行下载
 *  6. 结果
 *  注记

# 1. 先上个例子 #

![在这里插入图片描述][a672349238304a8a9c5cf0c1b31faabf.gif_pic_center]

# 2. HTML页面设计 #

保存为`index.html`

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>纯CSS实现鼠标经过3D立体动态展示图片特效代码</title>
    <link type="text/css" href="css/style.css" rel="stylesheet" />
    </head>
    <body>
    <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>

# 3. css风格设计 #

保存为 `css/style.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;
    }
    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);
    	}
    }

# 4. 12张图片 #

保存到 `img/*`  
![在这里插入图片描述][8192bf31f7c74c7f827ef6e0a3ad3b82.png]  
  
其中01-06是100*100像素点的正方形png格式图片  
其中1-6是400*400像素点的正方形png格式图片

# 5. GitHub仓库自行下载 #

[nwu\_zjq / Album3D][nwu_zjq _ Album3D]

# 6. 结果 #

通过使用服务器挂载了这个静态页面, 随时可以访问, 在制作成二维码, 向表白的人来一波表白还是有惊喜的  
话不多说, 上个二维码祝福我们吧  
![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JC95a2Q5peg5oKUIQ_size_9_color_FFFFFF_t_70_g_se_x_16]

# 注记 #

因为10.23是纪念日, 做个小玩意纪念一下, 发现这东西可能作为表白挺合适的, 别的没啥用

[a672349238304a8a9c5cf0c1b31faabf.gif_pic_center]: /images/20220828/d0be245b924c4cafafda1b1a8f7c1b4d.png
[8192bf31f7c74c7f827ef6e0a3ad3b82.png]: /images/20220828/8cc8af8f590243ea927b7b8479680bd0.png
[nwu_zjq _ Album3D]: https://gitee.com/nwu_zjq/album-dynamic3d
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6JC95a2Q5peg5oKUIQ_size_9_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/55a462f7dea44df3af029ad959d2f166.png