仿網易雲音樂鲸雲音效-孤獨星球

閑來無事，打開網易雲音樂，發現播放音樂時有好幾款音效，屬實奪人眼球，而網易雲上的孤獨星球音效是要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 >
<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" target="_blank" rel="external nofollow" >
</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>