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

网络 02-07 3465

极客江南：一个对开发技术特别执着的程序员，对移动开发有着独到的见解和深入的研究，有着多年的iOS、Android、HTML5开发经验，对NativeApp、HybridApp、WebApp开发有着独到的见解和深入的研究, 除此之外还精通 JavaScript、AngularJS、 NodeJS 、Ajax、jQuery、Cordova、React Native等多种Web前端技术及Java、PHP等服务端技术。

先上一张效果图：

开发思路局部界面制作 3D 旋转播放器添加 ? 动画添加背景音乐

开发技术

htmlcss

核心逻辑

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>

大家记得收藏前，先点个赞哦！好的文章值得被更多人看到。