闲来无事,打开网易云音乐,发现播放音乐时有好几款音效,属实夺人眼球,而网易云上的孤独星球音效是要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>