現在開始說說制作過程:

一、創建文件夾

1.在桌面建一個文件夾，命名隨意

2.在文件夾里創建一個文件名為index.html的文件

3.在文件夾里創建兩個文件名分別為img、css的文件夾

4.在css文件夾里創建一個名為style.css的文件

二、導入文件

1.將index.html的文件以記事本的格式打開,并復制粘貼以下代碼:

html>

酷炫3d

保存并退出

2.將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(1)?img{

width:?100%;

height:?100%;

}

.minbox?li:nth-child(2)?img{

width:?100%;

height:?100%;

}

.minbox?li:nth-child(3)?img{

width:?100%;

height:?100%;

}

.minbox?li:nth-child(4)?img{

width:?100%;

height:?100%;

}

.minbox?li:nth-child(5)?img{

width:?100%;

height:?100%;

}

.minbox?li:nth-child(6)?img{

width:?100%;

height:?100%;

}

.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(1)?img{

width:?100%;

height:?100%;

}

.maxbox?li:nth-child(2)?img{

width:?100%;

height:?100%;

}

.maxbox?li:nth-child(3)?img{

width:?100%;

height:?100%;

}

.maxbox?li:nth-child(4)?img{

width:?100%;

height:?100%;

}

.maxbox?li:nth-child(5)?img{

width:?100%;

height:?100%;

}

.maxbox?li:nth-child(6)?img{

width:?100%;

height:?100%;

}

.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);

}

}

保存并退出

三、處理圖片

1.在網上找12張圖片,最好是正方形的

2.用美圖秀秀的批處理功能,把格式改成png格式,同時把首序號改成01,得到12張編號01-12png格式的照片

3.編號7-12的改成編號為1-6,再把2,02圖片倒過來(其中01-06是內層,1-6是外層)

4.把所有照片放到img文件夾下

四、雙擊index.html

總結

以上是生活随笔為你收集整理的编程制作动态壁纸的思路_抖音上很火的3D立体动态相册实现教程!(不懂编程也能学会)...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。