仿网易云音乐鲸云音效-孤独星球

闲来无事，打开网易云音乐，发现播放音乐时有好几款音效，属实夺人眼球，而网易云上的孤独星球音效是要vip权限才能开启的，这就让人不爽了，不想花钱那就手动撸一个出来自己边看边听歌，哇咔咔咔。由于是本人原创，所以转载或引用代码段还请标明来处~

最后打波广告，本人网易云账号阿豹欧巴，哈哈哈。

网易云-《孤独星球》音效图：

本地效果：

canvas：

var canvas = document.getElementById('canvas'),ctx,cnt = 8000, //  发散宽度width = 15, //  粒子数目pointRadius = 0.6,  //  粒子大小(像素)l = 360, t = 360, r = 170, i,len,random, aryPoints = [],timer;
if(ctx = canvas.getContext('2d')) { aryPoints = Array.apply(null, {length: cnt});for(var i = 0, len = aryPoints.length; i < len; i++) {var deg = 360 * Math.random();var aa = l + r * Math.cos(deg / 180 * Math.PI) + width * Math.sin(2 * Math.PI * Math.random()),bb = t - r * Math.sin(deg / 180 * Math.PI) + width * Math.sin(2 * Math.PI * Math.random());aryPoints[i] = [l + r * Math.cos(deg / 180 * Math.PI) + width * Math.sin(2 * Math.PI * Math.random()), t - r * Math.sin(deg / 180 * Math.PI) + width * Math.sin(2 * Math.PI * Math.random())];}ctx.fillStyle = 'rgba(255, 255, 255, 1)';for(var i = 0, len = aryPoints.length; i < len; i++) {ctx.fillRect(aryPoints[i][0], aryPoints[i][1], pointRadius, pointRadius);}timer = setInterval(function() {for(var i = 0, len = aryPoints.length, deg, x, y, d; i < len; i++) {y = aryPoints[i][1];x = aryPoints[i][0];d = Math.sqrt((x - l) * (x - l) + (y - t) * (y - t));deg = Math.round(Math.asin(Math.abs(y - t) / d) / Math.PI * 180);if(x >= l) {aryPoints[i][0] = x + 1 * Math.cos(deg / 180 * Math.PI);} else {aryPoints[i][0] = x - 1 * Math.cos(deg / 180 * Math.PI);}if(y <= t) {aryPoints[i][1] = y - 1 * Math.sin(deg / 180 * Math.PI);} else {aryPoints[i][1] = y + 1 * Math.sin(deg / 180 * Math.PI);}if(d > r + 50 + 50 * Math.sin(2 * Math.PI * Math.random())) {if(x >= l) {aryPoints[i][0] = l + r * Math.cos(deg / 180 * Math.PI) + width * Math.sin(2 * Math.PI * Math.random());} else {aryPoints[i][0] = l - r * Math.cos(deg / 180 * Math.PI) + width * Math.sin(2 * Math.PI * Math.random());}if(y <= t) {aryPoints[i][1] = t - r * Math.sin(deg / 180 * Math.PI) + width * Math.sin(2 * Math.PI * Math.random());} else {aryPoints[i][1] = t + r * Math.sin(deg / 180 * Math.PI) + width * Math.sin(2 * Math.PI * Math.random());}}}canvas.width = 720;canvas.height = 720;ctx.fillStyle = 'rgba(255, 255, 255, 1)';for(var i = 0, len = aryPoints.length; i < len; i++) {ctx.fillRect(aryPoints[i][0], aryPoints[i][1], pointRadius, pointRadius);}}, 100);
}

css:

.disc {position: absolute;width: 1280px;height: 720px;left: 0;top: 0;background-color: rgba(0, 0, 0, .8);
}
.disc .disc-container {position: absolute;width: 720px;height: 720px;line-height: 720px;top: 0;margin-left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);/* background-color: rgba(0, 0, 0, .8); */
}
.disc .disc-container .disc-bg {position: absolute;width: 475px;height: 475px;background-image: url(../dist/playPage/disc/diskImg.png);background-size: contain;border: 0;border-radius: 50%;left: 50%;top: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);
}
.disc .disc-container .rotate-container {position: absolute;width: 300px;height: 300px;background-image: url('./assets/aboli.jpg');background-size: contain;border: 0;border-radius: 50%;margin-left: -150px;margin-top: -150px;left: 50%;top: 50%;box-shadow: 0 0 20px rgba(0, 0, 0, .5);z-index: 10;transform: rotate(0deg);-webkit-transform: rotate(0deg);animation-name: rotate-poster;animation-duration: 20s;animation-timing-function: linear;animation-delay: 1s;animation-iteration-count: infinite;/* animation-fill-mode: forwards; */-webkit-animation-name: rotate-poster;-webkit-animation-duration: 20s;-webkit-animation-timing-function: linear;-webkit-animation-delay: 1s;-webkit-animation-iteration-count: infinite;/* -webkit-animation-fill-mode: forwards; */transform-origin: center center;
}
@keyframes rotate-poster {0% {/* transform: rotate(0deg);-webkit-transform: rotate(0deg); */}100% {transform: rotate(360deg);-webkit-transform: rotate(360deg);}
}
@-webkit-keyframes rotate-poster {0% {/* transform: rotate(0deg);-webkit-transform: rotate(0deg); */}100% {transform: rotate(360deg);-webkit-transform: rotate(360deg);}
}
.disc .disc-container .rotate-container-pause {position: absolute;width: 300px;height: 300px;background-size: contain;border: 0;border-radius: 50%;margin-left: -150px;margin-top: -150px;left: 50%;top: 50%;box-shadow: 0 0 20px rgba(0, 0, 0, .8);z-index: 10;
}
.disc .disc-container .disc-pointer-play {position: absolute;width: 200px;height: 300px;right: 0;margin-top: -100px;background-image: url(../dist/playPage/disc/diskPointer.png);background-size: contain;background-repeat: no-repeat;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-webkit-transform-origin-x: left;-webkit-transform-origin-y: top;animation: disc-pointer-play 1s ease-in .2s 1 forwards;-webkit-animation: disc-pointer-play 1s ease-in .2s 1 forwards;
}
@keyframes disc-pointer-play {0% {transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);}100% {transform: rotateZ(25deg);-webkit-transform: rotateZ(25deg);}
}
@-webkit-keyframes disc-pointer-play {0% {transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);}100% {transform: rotateZ(25deg);-webkit-transform: rotateZ(25deg);}
}
.disc .disc-container .disc-pointer-pause {position: absolute;width: 200px;height: 300px;right: 0;margin-top: -100px;background-image: url(../dist/playPage/disc/diskPointer.png);background-size: contain;background-repeat: no-repeat;transform: rotateZ(25deg);-webkit-transform: rotateZ(25deg);-webkit-transform-origin-x: left;-webkit-transform-origin-y: top;animation: disc-pointer-pause 1s ease-in .2s 1 forwards;-webkit-animation: disc-pointer-pause 1s ease-in .2s 1 forwards;
}
@keyframes disc-pointer-pause {0% {transform: rotateZ(25deg);-webkit-transform: rotateZ(25deg);}100% {transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);}
}
@-webkit-keyframes disc-pointer-pause {0% {transform: rotateZ(25deg);-webkit-transform: rotateZ(25deg);}100% {transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);}
}

html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>音效</title><link rel="stylesheet" href="index.css">
</head>
<body><div class="disc"><div class="disc-container"><div class="rotate-container"></div><canvas id="canvas"></canvas></div></div>
</body>
<script src="CosmicDust.js"></script>
</html>

仿网易云音乐鲸云音效-孤独星球相关推荐

【canvas】网易云音乐鲸云动效『水晶音波』的简单实现
最近闲来无事,打开网易云音乐,发现还有鲸云音效这种东西,嗯?『水晶音波』,挺炫.嗯?黑胶VIP专享?(其实我已经是黑胶VIP)好像实现起来也不很复杂呀,所以花了一下午,实现了一个简单版本. 这是网易云 ...
Android 贝塞尔曲线实战之网易云音乐鲸云特效，2021程序员进阶宝典
一阶这个比较简单,因为没有在网上找到可以直接输入数学公式的工具,就手工推导了下. ![在这里插入图片描述](https://img- <Android学习笔记总结+最新移动架构视频+大厂安卓面试 ...
Android 贝塞尔曲线实战之网易云音乐鲸云特效
作者:哈哈将 -个推 Android 高级开发工程师前言 APP开发市场已经告别"野蛮生长"时代,人们不再满足于APP外形创新,而将目光转向全方面的用户体验上.在这过程中,动效化 ...
模仿网易云音乐鲸云特效动效
JinyunEffect 项目地址:tyhjh/JinyunEffect 简介: 模仿网易云音乐鲸云特效动效更多:作者提 Bug 标签: # Android 粒子特效--网易云鲸云特效文 ...
Android 贝塞尔曲线实战之网易云音乐鲸云特效，apm性能监控系统
小说阅读 APP 的翻页效果. 简介 ===================================================================== 在开始实战之前,我们还 ...
网易云音乐动效Android,Web Audio在音频可视化中的应用（网易云音乐鲸云动效）...
本文有两个关键词:音频可视化和Web Audio.前者是实践,后者是其背后的技术支持. Web Audio 是很大的知识点,本文会将重点放在如何获取音频数据这块,对于其 API 的更多内容,可以查看 ...
微信小程序仿网易云音乐（使用云开发，提供源码）
微信小程序仿网易云音乐(使用云开发,提供源码)!!!!!!!!!!! 源码: 链接:https://pan.baidu.com/s/1z_ZnRVbT4vjEENimi8yBQQ 提取码:u0o3 一 ...
开源项目【LikeCloudMusic 云音】仿网易云音乐
LikeCloudMusic 云音仿网易云音乐v3.7.5,Material Design风格,基于MVP,使用RxBus作为事件总线通信库效果图目前功能扫描本地歌曲存储歌曲及歌单后台播放 ...
用HTML+CSS仿网易云音乐网站(6个页面)_实训素材
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 音乐网页设计 | 仿网易云音乐 | 各大音乐官网网页 | 明星 ...

仿网易云音乐鲸云音效-孤独星球

仿网易云音乐鲸云音效-孤独星球相关推荐

最新文章

热门文章