當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

3分钟开发一个冰冰版 3D 音乐播放器，是什么样的体验

發布時間：2023/12/20 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 3分钟开发一个冰冰版 3D 音乐播放器，是什么样的体验小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

：一個對開發技術特別執著的程序員，對移動開發有著獨到的見解和深入的研究，有著多年的iOS、Android、HTML5開發經驗，對NativeApp、HybridApp、WebApp開發有著獨到的見解和深入的研究, 除此之外還精通 JavaScript、AngularJS、 NodeJS 、Ajax、jQuery、Cordova、React Native等多種Web前端技術及Java、PHP等服務端技術。

先上一張效果圖：

開發思路

局部界面

制作 3D 旋轉播放器

添加動畫

添加背景音樂

開發技術

html
css

核心邏輯

html 布局界面
css 實現動畫
源代碼獲取

核心代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>冰冰版-3D音樂播放器</title><style>*{margin: 0;padding: 0;}body{background: url("images/jacky/bg.png") no-repeat;background-size:cover;overflow: hidden;}ul{width: 200px;height: 200px;/*background-color: red;*/position: absolute;bottom: 100px;left: 50%;margin-left:-100px;transform-style: preserve-3d;/*transform: rotateX(-10deg);*/animation: sport 6s linear 0s infinite normal;}ul li{list-style: none;width: 200px;height: 200px;font-size: 60px;text-align: center;line-height: 200px;position: absolute;left: 0;top: 0;background-color: black;}ul li:nth-child(1){transform: rotateY(60deg) translateZ(200px);}ul li:nth-child(2){transform: rotateY(120deg) translateZ(200px);}ul li:nth-child(3){transform: rotateY(180deg) translateZ(200px);}ul li:nth-child(4){transform: rotateY(240deg) translateZ(200px);}ul li:nth-child(5){transform: rotateY(300deg) translateZ(200px);}ul li:nth-child(6){transform: rotateY(360deg) translateZ(200px);}ul li img{width: 200px;height: 200px;border: 5px solid skyblue;box-sizing: border-box;}ul:hover{animation-play-state: paused;}ul:hover li img{opacity: 0.5;}ul li:hover img{opacity: 1;}@keyframes sport {from{/*注意點:1.動畫中如果有和默認樣式中同名的屬性, 會覆蓋默認樣式中同名的屬性2.在編寫動畫的時候, 固定不變的值寫在前面, 需要變化的值寫在后面*/transform: rotateX(-10deg) rotateY(0deg);}to{transform: rotateX(-10deg) rotateY(360deg);}}.heart{width: 173px;height: 157px;position: absolute;left: 100px;bottom: 100px;animation: move 10s linear 0s infinite normal;}@keyframes move {0%{left: 100px;bottom: 100px;opacity: 1;}20%{left: 300px;bottom: 300px;opacity: 0;}40%{left: 500px;bottom: 500px;opacity: 1;}60%{left: 800px;bottom: 300px;opacity: 0;}80%{left: 1200px;bottom: 100px;opacity: 1;}100%{left: 800px;bottom: -200px;}}</style> </head> <body> <ul><li><img src="images/jacky/1.png" alt=""></li><li><img src="images/jacky/2.png" alt=""></li><li><img src="images/jacky/3.png" alt=""></li><li><img src="images/jacky/4.png" alt=""></li><li><img src="images/jacky/5.png" alt=""></li><li><img src="images/jacky/6.png" alt=""></li> </ul> <img src="images/jacky/xin.png" class="heart">  <audio src="images/jacky/bingbing.mp3" autoplay="autoplay" loop="loop"></audio> </body> </html>

大家記得收藏前，先點個贊哦！好的文章值得被更多人看到。

總結

以上是生活随笔為你收集整理的3分钟开发一个冰冰版 3D 音乐播放器，是什么样的体验的全部內容，希望文章能夠幫你解決所遇到的問題。

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