在繼上一次寫了抖音上的時(shí)鐘屏保，被我改造完用來(lái)表白后，有個(gè)兄弟給我評(píng)論，下一篇《淘寶上超火的水晶發(fā)光相冊(cè)，被我買來(lái)用于表白》，恰好我之前寫過(guò)這個(gè)小demo，于是我忙里偷閑把這個(gè)小demo的博客寫了出來(lái)。

寫在前面，源代碼傳到github上，在最下面，大家自行下載

這個(gè)小demo使用的是html + css3 + javascript實(shí)現(xiàn)，主要目的是鍛煉我的編（撩）程（妹）技（能）術(shù)（力）！

閑言少許，書歸正文，先看看效果圖吧，還是因?yàn)閏sdn上只能上傳5M的圖，所以只能降幀做gif啦

上次寫的小demo，還有兄弟希望適配一下移動(dòng)端，所以我簡(jiǎn)單的使用媒體查詢+JavaScript，適配了下移動(dòng)端。上效果圖

各位看官，如果效果圖不盡人意

因?yàn)樵谝苿?dòng)端沒(méi)用鼠標(biāo)懸浮事件，所以我改成直接將立方體放大的效果。

---

我在寫這個(gè)項(xiàng)目的最初目的是為了練習(xí)一下css3中的過(guò)渡、變換和動(dòng)畫，所以在立方體部分幾乎都是由css3來(lái)完成。我建議大家在看這個(gè)項(xiàng)目之前，先學(xué)習(xí)一下css3的新語(yǔ)法。學(xué)成之后，再做這個(gè)小demo的話，你的css3過(guò)渡、變換和動(dòng)畫這部分就可以通神了！

我來(lái)依次解釋這個(gè)小demo是如何一步一步完成的：

從上面的演示，我們可以清楚的看到，這個(gè)小demo，總共分成四個(gè)階段：

圖片平鋪的初始狀態(tài)

點(diǎn)擊后，圖片逐漸由小變大，再縮小（閃爍效果）

圖片旋轉(zhuǎn)一周后逐漸縮小消失

出現(xiàn)立方體，pc端鼠標(biāo)懸浮時(shí)放大，移動(dòng)端直接緩慢放大

在未點(diǎn)擊時(shí)，圖片是通過(guò)js生成的：

function initImg() {const imgBox = document.getElementsByClassName("imgBox")[0]//生成圖片的數(shù)量let index = 30if(document.body.clientWidth < 450){//適配移動(dòng)端index = 15}for (var i = 0; i < index; i++) {var src = 0//隨機(jī)生成圖片的路徑,大圖片和小圖片中隨機(jī)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)} }

代碼中，獲取了屏幕寬度，是為了適配移動(dòng)端，當(dāng)屏幕寬度小于450px時(shí)，只生成15張圖片

注意圖片的格式，因?yàn)楹竺嫘枰兂闪⒎襟w，且分大小，所以小圖片是0開頭的，大小是100 x 100像素，大圖片是400 X 400像素，為了更清楚點(diǎn)，我還是放個(gè)圖吧

下面就是點(diǎn)擊時(shí)圖片消失的效果了：

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

不知道大家有沒(méi)有注意到在調(diào)用showCircle()，做了一個(gè)三秒延遲，是因?yàn)槲覀円谧冃?dòng)畫都結(jié)束時(shí)才可以調(diào)用。為什么是三秒呢？嘿嘿嘿嘿，因?yàn)閯?dòng)畫時(shí)間2s + 隨機(jī)延遲 最多1s。

我們來(lái)看一下動(dòng)畫效果：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;} }

當(dāng)圖片消失后的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//旋轉(zhuǎn)一圈，當(dāng)然我們需要將z軸向后隨機(jī)移動(dòng)一些imgs[i].style.transform = "rotateY(0deg) translateZ(-"+ Math.random()*500 +"px)"//過(guò)渡時(shí)間1.5simgs[i].style.transition = "all 1.5s linear"setTimeout(() => {imgs[i].style.opacity = 1//旋轉(zhuǎn)一周imgs[i].style.transform = "rotateY(-360deg) translateZ(0)"}, Math.random()*1000);}setTimeout(() => {displayImg()}, 2000); }

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

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(() => {//這里的操作是將原來(lái)的文本替換掉，換成魔方的htmllet 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類的時(shí)候，會(huì)直接作用上。html結(jié)構(gòu)，下面來(lái)說(shuō)道說(shuō)道css3的魔方效果。

css3在前端是非常重要的，前面的設(shè)置大小，居中，絕對(duì)定位等等，我就不解釋了。

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

這里的六個(gè)樣式是構(gòu)建一個(gè)立方體，沿y軸旋轉(zhuǎn)90、180deg，在移動(dòng)z軸的距離，當(dāng)旋轉(zhuǎn)之后，旋轉(zhuǎn)軸也會(huì)發(fā)生改變，所以此時(shí)只要移動(dòng)z軸就可以了

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

上面的代碼是為了適配移動(dòng)端。具體操作看代碼吧。

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

立方體旋轉(zhuǎn)的動(dòng)畫就很簡(jiǎn)單啦，是無(wú)限次循環(huán)旋轉(zhuǎn)360deg

在移動(dòng)端時(shí)，我們把鼠標(biāo)懸浮效果去掉了，通過(guò)js實(shí)現(xiàn)逐漸放大

if (document.body.clientWidth < 450) {//移動(dòng)端時(shí)，直接讓其變成大圖，無(wú)鼠標(biāo)懸浮效果let lis = document.getElementsByClassName("maxbox")[0].childrenfor(let i=0;i<lis.length;i++){lis[i].style.transition = "all 2s"lis[i].style.width = "200px"lis[i].style.height = "200px"lis[i].style.opacity = "0.8"lis[i].style.left = "-25px"lis[i].style.top = "-25px"}lis[0].style.transform = "translateZ(150px)"//...此處省略lis[5].style.transform = "rotateY(90deg) translateZ(150px)" }

移動(dòng)端適配這方面我接觸的不多，只是按照谷歌瀏覽器的模擬來(lái)做的，以450px為分割點(diǎn)。學(xué)習(xí)之路，永無(wú)止境

設(shè)置一個(gè)旋轉(zhuǎn)動(dòng)畫，為box類加上動(dòng)畫效果

animation:move 5s linear infinite;

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

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

如果不會(huì)使用git的話，看圖操作。

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

總結(jié)

以上是生活随笔為你收集整理的浪漫程序员会表白之抖音旋转立方体照片墙的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。