當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

web前端--音乐魔方旋转相册笔记（1）

發(fā)布時(shí)間：2024/3/24 HTML 62 豆豆

生活随笔收集整理的這篇文章主要介紹了 web前端--音乐魔方旋转相册笔记（1）小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

前段時(shí)間，520的時(shí)候就用自己學(xué)習(xí)到的一點(diǎn)HTML,CSS,Javascript等，給女朋友做了一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，這里記錄一下其中的一小部分—音樂(lè)魔方旋轉(zhuǎn)相冊(cè)。

- 這里魔方相冊(cè)的例子思路來(lái)自學(xué)習(xí)的一門(mén)課程

下面正式開(kāi)始：
音樂(lè)魔方相冊(cè)：
需要用div來(lái)作出一個(gè)魔方來(lái)展示照片,首先做一個(gè)六面的魔方。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=edge" /><title>送給你的相冊(cè)</title></head> <body> <div class=""> <div class="container"><div class="box"><div class="box-page top"></div><div class="box-page bottom"></div><div class="box-page left"></div><div class="box-page right"></div><div class="box-page front"></div><div class="box-page back"></div></div> </div> </body>

給魔方六個(gè)面分別給一種顏色看看，魔方效果。這部分需要css來(lái)實(shí)現(xiàn)。

*{/*清除頁(yè)面的參數(shù)*/margin: 0;padding: 0; } .container{/*魔方的大小，可根據(jù)效果調(diào)整*/width: 300px;height: 300px;border: 1px solid #000;/*對(duì)面做一個(gè)邊框*/margin: 150px auto;} .box{width: 300px;/*面的大小自己可以根據(jù)魔方大小調(diào)整*/height: 300px;box-sizing: border-box;background-color: red;}

此時(shí)運(yùn)行發(fā)現(xiàn)頁(yè)面中只有一個(gè)紅色的正方形，

其實(shí)我們可以將做好的魔方每個(gè)面著色并將魔方整體旋轉(zhuǎn)一下，將便于觀察。
上面添加：

/*控制子元素3D轉(zhuǎn)換*/transform-style:preserve-3d; /*將盒子旋轉(zhuǎn)，測(cè)試代碼*/transform:rotateX(45deg) rotateY(45deg);

可以看到的效果如下：

上圖是魔方轉(zhuǎn)換到某時(shí)刻時(shí)的截圖，可以看出，我們前面創(chuàng)建的魔方六個(gè)面全部在魔方的中間，因此要實(shí)現(xiàn)魔方六個(gè)面分別在魔方的上下左右前后，需要將六個(gè)面進(jìn)行旋轉(zhuǎn)。
（其實(shí)六個(gè)面是重疊在一起，在魔方底面，這里截圖是為了后面建立坐標(biāo)軸便于理解。）

我們可以自己對(duì)魔方建立X,Y,Z坐標(biāo)軸。可以自己畫(huà)一下，便于我們寫(xiě)面的旋轉(zhuǎn)。
（下面我簡(jiǎn)單的畫(huà)了一下，哈哈哈）
箭頭方向均為正方向，反方向，數(shù)值為負(fù)。

這里需要用屬性 transform，（1）用到的旋轉(zhuǎn)方法為，rotateX(),rotateY(),rotateZ(),按照x方向旋轉(zhuǎn)則為rotateX(),y方向?yàn)閞otateY()..，括號(hào)里為旋轉(zhuǎn)角度；（2）還要用到.translate() 方法，使元素從其當(dāng)前位置移動(dòng)，括號(hào)里寫(xiě)移動(dòng)的距離，這里為坐標(biāo)。

下面為六個(gè)面的旋轉(zhuǎn)，移動(dòng)，代碼：

.box-page{width: 300px;height: 300px;position: absolute;/*位置初始化，相對(duì)于魔方盒子定位*/transform-style:preserve-3d;/*必須有該屬性，否則將不會(huì)旋轉(zhuǎn)，移動(dòng)。*/} .top{transform:translateZ(150px);/*150px,正值為沿著Z軸向上（正方向）移動(dòng)150px;負(fù)值則為向下（反方向）移動(dòng)。*/} .bottom{transform:translateZ(-150px) rotateX(180deg);/*正值為沿著Z軸向上（正方向）移動(dòng)150px;負(fù)值則為向下（反方向）移動(dòng)。rotateX()方法則為沿著X軸旋轉(zhuǎn)，180deg為旋轉(zhuǎn)角度*/} .left{transform: translateX(-150px) rotateY(-90deg);} .right{transform:translateX(150px) rotateY(90deg);} .front{transform:translateY(150px) rotateX(-90deg);} .back{transform: translateY(-150px) rotateX(90deg);}

此時(shí)整個(gè)魔方相冊(cè)只是有了六個(gè)面，還需要讓它動(dòng)起來(lái)，那么需要運(yùn)用到元素動(dòng)畫(huà)的芝士，animation：屬性的參數(shù)，自己可以查查。

/*創(chuàng)建動(dòng)畫(huà)*/ .box{animation:ro 4s linear infinite ;/*屬性分別為，動(dòng)畫(huà)名，動(dòng)畫(huà)時(shí)間，速度，持續(xù)時(shí)間*/animation-direction: alternate;} /*需要將動(dòng)畫(huà)綁定在選擇器上*/ /*分別在0%，34%，66%，100%時(shí)刻，旋轉(zhuǎn)整個(gè)魔方。*/ @keyframes ro{0%{transform: rotateX(0deg) rotateY(0deg);}34%{ transform: rotateX(90deg) rotateY(90deg);}66%{ transform: rotateX(180deg) rotateY(180deg);}100%{ transform: rotateX(360deg) rotateY(360deg);}}

此時(shí)魔方的動(dòng)畫(huà)效果（這里將每個(gè)面填充為顏色，可自己換為照片）如下，下圖為轉(zhuǎn)動(dòng)起來(lái)某刻的魔方截圖：
可將每個(gè)面的圖片分割成九個(gè)小塊，按照動(dòng)畫(huà)向外飛出去，效果圖列出來(lái)，js實(shí)現(xiàn)代碼如下：

css部分的樣式代碼，

代碼如下： /*每一個(gè)小方格的樣式：*/ .box-page div:nth-child(1){animation: al 4s linear ;} .box-page div:nth-child(2){animation: al 4s linear 0.5s;} .box-page div:nth-child(3){ animation: al 4s linear 1s;} .box-page div:nth-child(4){animation: al 4s linear 1.5s;} .box-page div:nth-child(5){animation: al 4s linear 2s;} .box-page div:nth-child(6){animation: al 4s linear 2.5s;} .box-page div:nth-child(7){animation: al 4s linear 3s;} .box-page div:nth-child(8){animation: al 4s linear 3.5s;} .box-page div:nth-child(9){animation: al 4s linear 4s;}/*每一個(gè)魔方面的小方格動(dòng)畫(huà)。*/ @keyframes al{0%{ transform: translateZ(0px) scale(1) rotateZ(0deg);}30%{ transform: translateZ(300px) scale(0) rotateZ(360deg);}90%{ transform: translateZ(300px) scale(0) rotateZ(360deg);}100%{ transform: translateZ(0px) scale(1) rotateZ(0deg);}}

動(dòng)畫(huà)都實(shí)現(xiàn)了，魔方可以整體動(dòng)，魔方六個(gè)面每個(gè)面還可以分割成九個(gè)小塊，實(shí)現(xiàn)動(dòng)態(tài)效果，那還缺點(diǎn)音樂(lè)：

添加下列代碼可實(shí)現(xiàn)： <audio src="music1.mp3" autoplay="autoplay" loop="loop"></audio>

有其他想法還可以加點(diǎn)，比如可以加個(gè)視頻，畫(huà)布，這部分為html5的東西，后期有想法再完善吧.

整個(gè)魔方相冊(cè)的實(shí)現(xiàn)完整代碼如下：

<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=edge" /><title>相冊(cè)</title><style type="text/css">*{margin: 0;padding: 0;}.container{width: 300px;height: 300px;/*border: 1px solid #000;*/margin: 150px auto;perspective: 200000px;/*調(diào)整視距，不然魔方看著是扁的*/}body{width: 100%;height: 100%;/* background:#FDF5E6;*/background-size: screen;}.box{width: 300px;height: 300px;box-sizing: border-box;/*控制子元素3D轉(zhuǎn)換*/transform-style:preserve-3d; /*將盒子旋轉(zhuǎn)，測(cè)試看看*//*transform:rotateX(45deg) rotateY(45deg);*/animation:ro 4s linear infinite ;animation-direction: alternate;}@keyframes ro{0%{ transform: rotateX(0deg) rotateY(0deg);}34%{ transform: rotateX(90deg) rotateY(90deg);}66%{ transform: rotateX(180deg) rotateY(180deg);}100%{ transform: rotateX(360deg) rotateY(360deg);}}.box-page{width: 300px;height: 300px;position: absolute;/*位置初始化*/transform-style:preserve-3d;}.top{background-color: red;transform:translateZ(150px);}.bottom{background-color: green;transform:translateZ(-150px) rotateX(180deg);}.left{background-color: pink;transform: translateX(-150px) rotateY(-90deg);}.right{background-color:blue;transform:translateX(150px) rotateY(90deg);}.front{background-color: yellow;transform:translateY(150px) rotateX(-90deg);}.back{background-color: orange;transform: translateY(-150px) rotateX(90deg);} .box-page div:nth-child(1){animation: al 4s linear ;}.box-page div:nth-child(2){animation: al 4s linear 0.5s;}.box-page div:nth-child(3){animation: al 4s linear 1s;}.box-page div:nth-child(4){animation: al 4s linear 1.5s;}.box-page div:nth-child(5){animation: al 4s linear 2s;}.box-page div:nth-child(6){animation: al 4s linear 2.5s;}.box-page div:nth-child(7){animation: al 4s linear 3s;}.box-page div:nth-child(8){animation: al 4s linear 3.5s;}.box-page div:nth-child(9){animation: al 4s linear 4s;} @keyframes al{0%{ transform: translateZ(0px) scale(1) rotateZ(0deg);}30%{ transform: translateZ(300px) scale(0) rotateZ(360deg);}90%{ transform: translateZ(300px) scale(0) rotateZ(360deg);}100%{ transform: translateZ(0px) scale(1) rotateZ(0deg);}}</style> </head> <body><audio src="music1.mp3" autoplay="autoplay" loop="loop"></audio> <div class="container"><div class="box"><div class="box-page top"></div><div class="box-page bottom"></div><div class="box-page left"></div><div class="box-page right"></div><div class="box-page front"></div><div class="box-page back"></div></div> </div> <!-- <script type="text/javascript">var arr = document.querySelectorAll(".box>div");for (var n= 0;n<arr.length; n++){//遍歷每個(gè)面for(var r=0; r <3; r++){//外層循環(huán)每個(gè)面的行for (var c=0; c<3;c++){//內(nèi)層循環(huán)遍歷每個(gè)面的列// 創(chuàng)建元素var divs = document.createElement("div");divs.style.cssText ="width:100px;height:100px;border:1px solid #fff;position:absolute;box-sizing:border-box;background-image:url(images/a"+n+".jpg); background-size:300px 300px;";arr[n].appendChild(divs);//改變每一個(gè)div的位置；divs.style.left = 100*r+"px";divs.style.top = 100*c +"px";// 改變背景圖相應(yīng)的位置divs.style.backgroundPositionX = -r*100+"px";divs.style.backgroundPositionY = -c*100+"px"; }}} </script> </body> </html>

就先這些了，520 做的其他東西，改天再更，比如，給她做的屬于他的網(wǎng)頁(yè)，在一起的時(shí)間墻，打印字幕，畫(huà)布等等。

第一次，想著寫(xiě)點(diǎn)東西，好多不規(guī)范（哭了），多寫(xiě)幾次就好了吧
大家一起加油
奧利給！！！O(∩_∩)O哈哈~

總結(jié)

以上是生活随笔為你收集整理的web前端--音乐魔方旋转相册笔记（1）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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

上一篇：如何解决联想小新15的快捷键冲突问题
下一篇：关于使用jQuery前端上传文件

HTML

web前端--音乐魔方旋转相册笔记（1）

下面正式開(kāi)始：

整個(gè)魔方相冊(cè)的實(shí)現(xiàn)完整代碼如下：

總結(jié)