3分钟开发一个冰冰版 3D 音乐播放器，是什么样的体验
生活随笔
收集整理的這篇文章主要介紹了
3分钟开发一个冰冰版 3D 音乐播放器，是什么样的体验
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
： 一個(gè)對開發(fā)技術(shù)特別執(zhí)著的程序員，對移動(dòng)開發(fā)有著獨(dú)到的見解和深入的研究，有著多年的iOS、Android、HTML5開發(fā)經(jīng)驗(yàn)，對NativeApp、HybridApp、WebApp開發(fā)有著獨(dú)到的見解和深入的研究, 除此之外還精通 JavaScript、AngularJS、 NodeJS 、Ajax、jQuery、Cordova、React Native等多種Web前端技術(shù)及Java、PHP等服務(wù)端技術(shù)。
先上一張效果圖：
- 開發(fā)思路
開發(fā)技術(shù)
- html
- css
核心邏輯
- html 布局界面
- css 實(shí)現(xiàn)動(dòng)畫
- 源代碼獲取
核心代碼
<!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{/*注意點(diǎn):1.動(dòng)畫中如果有和默認(rèn)樣式中同名的屬性, 會(huì)覆蓋默認(rèn)樣式中同名的屬性2.在編寫動(dòng)畫的時(shí)候, 固定不變的值寫在前面, 需要變化的值寫在后面*/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>大家記得收藏前，先點(diǎn)個(gè)贊哦！好的文章值得被更多人看到。
推薦閱讀：
13萬字C語言保姆級教程2021版
10萬字Go語言保姆級教程
2 萬字 Jquery 入門教程
3 萬字 html +css 入門教程
最后，再多一句，粉絲順口溜，關(guān)注江哥不迷路，帶你編程上高速。
總結(jié)
以上是生活随笔為你收集整理的3分钟开发一个冰冰版 3D 音乐播放器，是什么样的体验的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 椭圆曲线学习
- 下一篇： NSGA-II中“支配”的概念