web前端--音乐魔方旋转相册笔记（1）
生活随笔
收集整理的這篇文章主要介紹了
web前端--音乐魔方旋转相册笔记（1）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前段時間，520的時候就用自己學習到的一點HTML,CSS,Javascript等，給女朋友做了一個簡單的網頁，這里記錄一下其中的一小部分—音樂魔方旋轉相冊。
- 這里魔方相冊的例子思路來自學習的一門課程
-
下面正式開始：
- 音樂魔方相冊：
需要用div來作出一個魔方來展示照片,首先做一個六面的魔方。
給魔方六個面分別給一種顏色看看，魔方效果。這部分需要css來實現。
*{/*清除頁面的參數*/margin: 0;padding: 0; } .container{/*魔方的大小，可根據效果調整*/width: 300px;height: 300px;border: 1px solid #000;/*對面做一個邊框*/margin: 150px auto;} .box{width: 300px;/*面的大小自己可以根據魔方大小調整*/height: 300px;box-sizing: border-box;background-color: red;}此時運行發現頁面中只有一個紅色的正方形，
其實我們可以將做好的魔方每個面著色并將魔方整體旋轉一下，將便于觀察。
上面添加：
可以看到的效果如下：
上圖是魔方轉換到某時刻時的截圖，可以看出，我們前面創建的魔方六個面全部在魔方的中間，因此要實現魔方六個面分別在魔方的上下左右前后，需要將六個面進行旋轉。
（其實六個面是重疊在一起，在魔方底面，這里截圖是為了后面建立坐標軸便于理解。）
- 我們可以自己對魔方建立X,Y,Z坐標軸。可以自己畫一下，便于我們寫面的旋轉。
（下面我簡單的畫了一下，哈哈哈）
- 箭頭方向均為正方向，反方向，數值為負。
- 下面為六個面的旋轉，移動，代碼：
- 此時整個魔方相冊只是有了六個面，還需要讓它動起來，那么需要運用到元素動畫的芝士，animation：屬性的參數，自己可以查查。
- 此時魔方的動畫效果（這里將每個面填充為顏色，可自己換為照片）如下，下圖為轉動起來某刻的魔方截圖：
- 可將每個面的圖片分割成九個小塊，按照動畫向外飛出去，效果圖列出來，js實現代碼如下：
- css部分的樣式代碼，
- 動畫都實現了，魔方可以整體動，魔方六個面每個面還可以分割成九個小塊，實現動態效果，那還缺點音樂：
- 有其他想法還可以加點，比如可以加個視頻，畫布，這部分為html5的東西，后期有想法再完善吧.
整個魔方相冊的實現完整代碼如下：
<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=edge" /><title>相冊</title><style type="text/css">*{margin: 0;padding: 0;}.container{width: 300px;height: 300px;/*border: 1px solid #000;*/margin: 150px auto;perspective: 200000px;/*調整視距，不然魔方看著是扁的*/}body{width: 100%;height: 100%;/* background:#FDF5E6;*/background-size: screen;}.box{width: 300px;height: 300px;box-sizing: border-box;/*控制子元素3D轉換*/transform-style:preserve-3d; /*將盒子旋轉，測試看看*//*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"><!--6個面的父元素盒子--><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++){//遍歷每個面for(var r=0; r <3; r++){//外層循環每個面的行for (var c=0; c<3;c++){//內層循環遍歷每個面的列// 創建元素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);//改變每一個div的位置；divs.style.left = 100*r+"px";divs.style.top = 100*c +"px";// 改變背景圖相應的位置divs.style.backgroundPositionX = -r*100+"px";divs.style.backgroundPositionY = -c*100+"px"; }}} </script> </body> </html>- 就先這些了，520 做的其他東西，改天再更，比如，給她做的屬于他的網頁，在一起的時間墻，打印字幕，畫布等等。
第一次，想著寫點東西，好多不規范（哭了），多寫幾次就好了吧
大家一起加油
奧利給！！！O(∩_∩)O哈哈~
總結
以上是生活随笔為你收集整理的web前端--音乐魔方旋转相册笔记（1）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何解决联想小新15的快捷键冲突问题
- 下一篇： macOS Big Sur 11.5.2