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="data:images/jacky/1.png" alt=""></li><li><img src="data:images/jacky/2.png" alt=""></li><li><img src="data:images/jacky/3.png" alt=""></li><li><img src="data:images/jacky/4.png" alt=""></li><li><img src="data:images/jacky/5.png" alt=""></li><li><img src="data:images/jacky/6.png" alt=""></li>
</ul>
<img src="data:images/jacky/xin.png" class="heart">
<!--添加音乐-->
<audio src="data:images/jacky/bingbing.mp3" autoplay="autoplay" loop="loop"></audio>
</body>
</html>

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

推荐阅读：

13万字C语言保姆级教程2021版

10万字Go语言保姆级教程

2 万字 Jquery 入门教程

3 万字 html +css 入门教程

最后，再多一句，粉丝顺口溜，关注江哥不迷路，带你编程上高速。

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

原生html+js网页版简陋音乐播放器
本文属于html+js+css基础教程,今天准备撸一个简陋版的音乐播放器.主流的浏览器原本就支持影音播放功能非常强,这里是利用浏览器原本提供的音视标签audio实现个简陋的音乐播放器.由于教程不涉及到 ...
python开发音乐播放器教程_python开发简易版在线音乐播放器示例代码
在线音乐播放器,使用python的Tkinter库做了一个界面,感觉这个库使用起来还是挺方便的,音乐的数据来自网易云音乐的一个接口,通过urllib.urlopen模块打开网址,使用Json模块进行数 ...
用jq和bootstrap3 实现一个自定义网页版的音乐播放器
用jq和bootstrap3 实现一个自定义网页版的音乐播放器 1.主要实现功能 1.1.点击播放与暂停,上一首和下一首: 注:用python返回所有歌曲的信息,加载完成默认选择第一首歌曲,通过传递歌 ...
Android开发本地及网络Mp3音乐播放器(二十)歌曲下载完成后通知主界面更新本地音乐
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/51448597 项目源码(打赏5积分请点这边):http://download.csdn ...
android 音乐播放器专辑图片旋转,Android应用开发之简易、大气音乐播放器实现专辑倒影效果...
今天要实现的功能是实现专辑倒影效果,这个功能已经属于图像处理方面的了,对图像处理我不怎么在行,等一下会介绍一个很实用的工具类,专门用来进行图像处理的.这个工具类不是我写的,我只是拿来用到自己的项目当中 ...
Android开发本地及网络Mp3音乐播放器(十二)创建NetMusicListAdapter、SearchResult显示网络音乐列表
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/51290181 觉得博文有用,请点赞,请留言,请关注,谢谢!~ 实现功能: 实现NetM ...
Android开发本地及网络Mp3音乐播放器(十三)网络音乐搜索功能实现,歌名歌手专辑名搜索
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/51298411 觉得博文有用,请点赞,请留言,请关注,谢谢!~ 实现功能: 实现网络音乐 ...
[开源项目]Android_炫酷的3D音乐播放器_各种特效OpenGL
这是我见过最炫的一个音乐播放器了.里面包含各种特效OpenGL,先上图片...看看大家的反应. 3Dmusic3.png(48.63 KB, 下载次数: 34) 炫酷的3D音乐播放器_各种特效Ope ...
用python写的一个简易的云音乐播放器
本人最近在学习python,在看了一些教程后,用python写了一个简单的云音乐播放器,下面把主要代码贴上来,其中用到了github上他人写的一个汉字转拼音的库,大家可以在github上找到. #co ...

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

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

最新文章

热门文章