淘寶上超火的水晶發光旋轉相冊，被我改造完用來表白

在繼上一次寫了抖音上的時鐘屏保，被我改造完用來表白後，有個兄弟給我評論，下一篇《淘寶上超火的水晶發光相冊，被我買來用於表白》，於是我忙裏偷閒把這個博客寫了出來，特意放了專欄《女朋友感動哭了》系列，哈哈哈

寫在前面，源代碼傳到github上，在最下面，大家自行下載，源碼移動端適配那裏沒有抽離公共代碼，大佬勿噴！

閒言少許，書歸正文，先看看效果圖吧，還是因爲5M大小，所以只能降幀做gif了

大家湊合看吧，如果不滿意的話

上次寫的，還有兄弟希望適配一下移動端，所以我簡單的使用媒體查詢，適配了下移動端。上效果圖

不過移動端有bug，鼠標懸浮事件不會起作用，只能手動點擊，立方體效果才能放大，我對移動端適配這方面瞭解比較比少，，所以只能靠大家自己修改bug了，別罵我。因爲：

我們來告訴大家一點點完成這個項目。

從上面的演示，我們可以清楚的看到，這個小demo，總共分成四個階段，未點擊時的階段，點擊時從有到無階段，從無開始旋轉一週階段，旋轉完成消失後出現魔方階段。

在未點擊時，圖片是通過js生成的：

function initImg() {
    const imgBox = document.getElementsByClassName("imgBox")[0]
 	//生成圖片的數量
    let index = 30
    if(document.body.clientWidth < 450){
        //適配移動端
        index = 15
    }
    for (var i = 0; i < index; i++) {
        var src = 0
        //隨機生成圖片的路徑,大圖片和小圖片中隨機
        if(Math.random()>0.5){
            src = Math.floor(Math.random() * 6) +1;
        }else{
            src = "0" + (Math.floor(Math.random() * 6) +1);
        }
        var img = document.createElement("img")
        img.src = `./img/${src}.png`
        imgBox.appendChild(img)
    }
}

我們可以看到，代碼中，獲取了屏幕寬度，是爲了適配移動端，我真的盡力了，大佬勿噴。

注意圖片的格式，因爲後面需要變成魔方，且分大小，所以小圖片是0開頭的，大小是100 x 100像素，大圖片是400 X 400像素，爲了更清楚點，我還是放個圖吧

下面就是點擊時圖片消失的效果了：

function bindEvent(){
    //獲取按鈕，設置點擊事件
    const btn = document.getElementsByClassName("btn")[0]
    btn.onclick = function(e){
        //獲取所有的圖片
        let imgs = document.getElementsByTagName("img")
        for(let i=0;i<imgs.length;i++){
            setTimeout(() => {//每個圖片隨機延遲1s內進行變小操作
                //變小動畫
                imgs[i].style.animation = "small 2s linear forwards"
            }, Math.random()*1000);
        }
        //此時按鈕已經沒用作用了，我們讓按鈕慢慢消失
        let btn = document.getElementsByClassName("btn")[0]
        btn.style.animation = 'display 4s linear forwards'
        setTimeout(() => {
            showCircle() // 當所有的圖片都變小消失後,開始旋轉一週
        }, 3000);
    }
}

不知道大家有沒有注意到在調用showCircle()，做了一個三秒延遲，是因爲我們要在變小動畫都結束時纔可以調用。爲什麼是三秒呢？嘿嘿嘿嘿，因爲動畫時間2s + 隨機延遲 最多1s。

我們來看一下動畫效果：so easy

@keyframes small{
    0%{
        transform: scale(1);
        opacity: 1;
    }
    20%{
        transform: scale(0);
        opacity: 1;
    }
    50%{
        transform: scale(0);
        opacity: 1;
    }
    100%{
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes display{
    0%{ opacity: 1;}
    100%{ opacity: 0;}
}

當圖片消失後的showCircle()方法：

function showCircle(){
    let imgs = document.getElementsByTagName("img")
    for(let i=0;i<imgs.length;i++){
        imgs[i].style.animation = ''
        imgs[i].style.opacity = 0
        //旋轉一圈，當然我們需要將z軸向後隨機移動一些
        imgs[i].style.transform = "rotateY(0deg) translateZ(-"+ Math.random()*500 +"px)"
        //過渡時間1.5s
        imgs[i].style.transition = "all 1.5s linear"
        setTimeout(() => {
            imgs[i].style.opacity = 1
            //旋轉一週
            imgs[i].style.transform = "rotateY(-360deg) translateZ(0)"
        }, Math.random()*1000);
    }
    setTimeout(() => {
        displayImg()
    }, 2000);
}

接下來就是變成魔方效果了，魔方效果主要是通過css3來完成的，先看看代碼操作吧。

function displayImg(){
    let imgs = document.getElementsByTagName("img")
    for(let i=0;i<imgs.length;i++){
        setTimeout(() => {
            imgs[i].style.animation = "displayImg 1s linear forwards"
        }, Math.random()*1000);
    }
    setTimeout(() => {
        //這裏的操作是將原來的文本替換掉，換成魔方的html
        let wrappper = document.getElementsByClassName("wrapper")[0]
        wrappper.parentNode.removeChild(wrappper)
        var box = document.createElement("div")
        box.classList.add("box")
        let ul = document.createElement("ul")
        ul.classList.add("minbox")
        for(var j=0;j<6;j++){
            let li = document.createElement("li")
            ul.appendChild(li)
        }
        let ol = document.createElement("ol")
        ol.classList.add("maxbox")
        for(var j=0;j<6;j++){
            let li = document.createElement("li")
            ol.appendChild(li)
        }
        box.appendChild(ul)
        box.appendChild(ol)
        document.getElementsByTagName("body")[0].appendChild(box)
    }, 2000);
}

魔方的樣式是提前寫好的，加上class類的時候，會直接作用上。html結構，下面來說道說道css3的魔方效果。

css3在前端是非常重要的，前面的設置大小，居中，絕對定位等等，我就不解釋了。如果不太會的話，建議看我寫的博客css3

.minbox li:nth-child(1){
	background: url(../img/01.png) no-repeat 0 0;
	transform:translateZ(50px);
}
.minbox li:nth-child(2){
	background: url(../img/02.png) no-repeat 0 0;
	transform:rotateX(180deg) rotate(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
	background: url(../img/03.png) no-repeat 0 0;
	transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
	background: url(../img/04.png) no-repeat 0 0;
	transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
	background: url(../img/05.png) no-repeat 0 0;
	transform:rotateY(-90deg) translateZ(50px);
}

這裏的六個樣式是構建一個立方體，沿y軸旋轉90、180deg，在移動z軸的距離，當旋轉之後，旋轉軸也會發生改變，所以此時只要移動z軸就可以了

@media (min-width: 450px){
	/*  */
}
@media (max-width: 450px){
	/*  */
}

上面的代碼是爲了適配移動端。具體操作看代碼吧。

@keyframes move{
	0%{
		transform: rotateX(13deg) rotateY(0deg);
	}
	100%{
		transform:rotateX(13deg) rotateY(360deg);
	}
}

移動端的bug，大佬們自己改改哦~改完可以的話順便告訴我怎麼搞，學習之路，永不止境

忘記了，我還沒有女朋友，難搞哦，但是這不妨礙我，學習怎麼寫（撩）代（女）碼（生）！

設置一個旋轉動畫，爲box類加上動畫效果

animation:move 5s linear infinite;

其他的代碼都大差不差，我相信各位一定可以看得懂。

下面附上源碼的github地址：https://github.com/young-monk/rotate-cube

如果不會使用git的話，看圖操作。

文章最後再附上之前寫的鋼鐵程序員寫給女朋友的情話