只需要在对应文件更改照片
下面是对应html代码
<!--
* @Description:
* @Author: 三岁时很酷
* @Date: 2022-03-05 18:39:34
* @LastEditors: 三岁时很酷
* @LastEditTime: 2024-11-10 18:58:03
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3d相册</title>
<style type="text/css">
html,body {
height: 100%;
color: #00FF00;
}
.play-button {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.7);
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
}
</style>
</head>
<link type="text/css" href="static/css/style.css" rel="stylesheet" />
<link href="static/css/index.css" rel="stylesheet" type="text/css">
<style type="text/css">
html,body {
height: 100%;
color: #00FF00;
}
body{
background: url(https://s1.ax1x.com/2020/07/30/ansR4x.jpg)center center;
background-size: cover;
}
</style>
<body>
<!-- <audio autoplay loop preload="auto" src="static/music/所念皆山河.mp3"></audio> -->
<!-- <audio autoplay="autoplay" loop="loop" preload="auto" src="static/music/所念皆山河.mp3"></audio>/ -->
<audio id="background-music" autoplay loop preload="auto" src="所念.mp3"></audio>
<button class="play-button" onclick="playMusic()">播放音乐</button>
<div class="box">
<ul class="minbox">
<li><img src="static/images/01.jpg" width="100" height="100"></li>
<li><img src="static/images/02.jpg" width="100" height="100"></li>
<li><img src="static/images/03.jpg" width="100" height="100"></li>
<li><img src="static/images/04.jpg" width="100" height="100"></li>
<li><img src="static/images/05.jpg" width="100" height="100"></li>
<li><img src="static/images/06.jpg" width="100" height="100"></li>
</ul>
<ol class="maxbox">
<li><img src="static/images/1.jpg" width="400" height="400"></li>
<li><img src="static/images/2.jpg" width="400" height="400"></li>
<li><img src="static/images/3.jpg" width="400" height="400"></li>
<li><img src="static/images/4.jpg" width="400" height="400"></li>
<li><img src="static/images/5.jpg" width="400" height="400"></li>
<li><img src="static/images/6.jpg" width="400" height="400"></li>
</ol>
</div>
<script>
function playMusic() {
const audio = document.getElementById('background-music');
audio.play();
}
</script>
</body>
</html>
下面是对应css代码
对应css 1 文件名为index.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(../images/01.jpg) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
background: url(../images/02.jpg) no-repeat 0 0;
-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
background: url(../images/03.jpg) no-repeat 0 0;
-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
background: url(../images/04.jpg) no-repeat 0 0;
-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
background: url(../images/05.jpg) no-repeat 0 0;
-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
background: url(../images/06.jpg) no-repeat 0 0;
-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
background: url(../images/1.jpg) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
background: url(../images/2.jpg) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){
background: url(../images/3.jpg) no-repeat 0 0;
-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
background: url(../images/4.jpg) no-repeat 0 0;
-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
background: url(../images/5.jpg) no-repeat 0 0;
-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
background: url(../images/6.jpg) 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);
}
}下面是对应css代码
对应名字为style.css
*{margin:0;padding:0;font-size:13px;font-family:microsoft yahei}
html,body{width:100%;height:100%;background:#fff}
#container{width:100%;height:100%;position:fixed;top:0;left:0;z-index:999}
#output{width:100%;height:100%}
.prompt{width:60%;height:30px;margin:5px auto;text-align:center;line-height:30px;font-family:microsoft yahei,Arial,sans-serif;font-size:13px;color:#df0000}
.containerT{width:400px;height:300px;text-align:center;position:absolute;top:50%;left:50%;margin:-150px 0 0 -200px;border-radius:3px}
.containerT h1{font-size:18px;font-family:microsoft yahei,Arial,sans-serif;-webkit-transition-duration:1s;transition-duration:1s;-webkit-transition-timing-function:ease-in-put;transition-timing-function:ease-in-put;font-weight:500}
form{padding:20px 0;position:relative;z-index:2}
form input{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;border:1px solid rgba(0,191,255,.4);background-color:rgba(
30,144,255,.2);width:200px;border-radius:3px;padding:8px 15px;margin:0 auto 10px;display:block;text-align:center;font-size:15px;color:#fff;-webkit-transition-duration:.25s;transition-duration:.25s;font-weight:300}
form input:hover{background-color:rgba(0,191,255,.4)}
form input:focus{background-color:
#FFB6C1;width:230px;color:#333}
form button{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;background-color:
#FFF0F5;border:0;padding:10px 15px;color:#333;border-radius:3px;width:200px;cursor:pointer;font-family:microsoft yahei,Arial,sans-serif;font-size:16px;font-weight:700;-webkit-transition-duration:.25s;transition-duration:.25s}
form button:hover{background-color:#DB7093}这是对应文件创建关系
以下是实现图，仅供参考
