马黑黑 发表于 2023-7-16 23:09

橄榄树：用类做频谱修正版

<style>
#mydiv {
    margin: 0 0 0 calc(50% - 593px);
    width: 1024px;
    height: 640px;
    background: linear-gradient(to top right,rgba(0,0,0,.7),rgba(0,100,0,.75));
    overflow: hidden;
    position: relative;
    --state: paused;
}
.leaf {
    position: absolute;
    width: 50px;
    height: 50px;
    top: -100px;
    border-radius: 0% 100%;
    background: linear-gradient(45deg, green, lightgreen);
    animation: drop 6s var(--delay) infinite linear var(--state);
    --delay: 0s;
}
.leaf:nth-of-type(2) { --delay: -2s; }
.leaf:nth-of-type(3) { --delay: -4s; }
@keyframes drop { to { transform: rotate(-10deg) translateY(760px); } }
</style>

<div id="mydiv">
    <span class="leaf"></span>
    <span class="leaf"></span>
    <span class="leaf"></span>
</div>

<script>

let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let msort = (ar) => {
    let newAr = [];
    ar.forEach((v,k) => k % 2 === 0 ? newAr.unshift(v) : newAr.push(v));
    return newAr;
}

class Pinpu {
    constructor(pa) {
      this.pa = pa;
      this.aud = document.createElement('audio');
      this.wrap = document.createElement('div');
      this.pinpu = { num: 60, width: 6, height: 100 }
    }
    createPinpu() {
      let styles = document.styleSheets;
      let mcss = document.styleSheets;
      mcss.insertRule(`.mplayer { position: absolute; width: ${(this.pinpu.width + 2) * this.pinpu.num}px; height: ${this.pinpu.height * 1.5}px; left: 50%; bottom: 0px; transform: translate(-50%); cursor: pointer; }`, mcss.rules.length);
      mcss.insertRule(`@keyframes up { from { height: 0px; } to { height: var(--height); } }`, mcss.rules.length);
      this.wrap.className = 'mplayer';
      this.aud.id = 'aud';
      this.aud.autoplay = true;
      this.aud.loop = true;
      this.pa.appendChild(this.wrap);
      this.pa.appendChild(this.aud);

      Array.from({length: this.pinpu.num}).forEach((item,key) => {
            item = document.createElement('span');
            let ar = Array.from(Array(this.pinpu.num), (v,k) => this.pinpu.num - k -1);
            item.style.cssText = `
                position: absolute;
                width: ${this.pinpu.width}px;
                left: ${(this.pinpu.width + 2) * key}px;
                bottom: 0px;
                background: #${Math.random().toString(16).substr(-6)};
                animation: up ${0.3 + Math.random() * 0.3}s -${Math.random()}s infinite alternate linear var(--state);
                --height: ${this.pinpu.height / 2 + msort(ar) * 1.2}px;
            `;
            this.wrap.appendChild(item);
      });
      this.click();
    }
    click() {
      this.wrap.onclick = () => this.aud.paused ? this.aud.play() : this.aud.pause();
    }
}

let pp = new Pinpu(mydiv);
pp.pinpu.num = 100;
pp.pinpu.width = 5;
pp.pinpu.height = 100;
pp.aud.src = 'https://music.163.com/song/media/outer/url?id=25707174';
pp.createPinpu();

aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);

</script>

马黑黑 发表于 2023-7-16 23:10

代码（兼容性较好）

<style>
#mydiv {
    margin: 0 0 0 calc(50% - 593px);
    width: 1024px;
    height: 640px;
    background: linear-gradient(to top right,rgba(0,0,0,.7),rgba(0,100,0,.75));
    overflow: hidden;
    position: relative;
    --state: paused;
}
.leaf {
    position: absolute;
    width: 50px;
    height: 50px;
    top: -100px;
    border-radius: 0% 100%;
    background: linear-gradient(45deg, green, lightgreen);
    animation: drop 6s var(--delay) infinite linear var(--state);
    --delay: 0s;
}
.leaf:nth-of-type(2) { --delay: -2s; }
.leaf:nth-of-type(3) { --delay: -4s; }
@keyframes drop { to { transform: rotate(-10deg) translateY(760px); } }
</style>

<div id="mydiv">
    <span class="leaf"></span>
    <span class="leaf"></span>
    <span class="leaf"></span>
</div>

<script>

let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let msort = (ar) => {
    let newAr = [];
    ar.forEach((v,k) => k % 2 === 0 ? newAr.unshift(v) : newAr.push(v));
    return newAr;
}

class Pinpu {
    constructor(pa) {
      this.pa = pa;
      this.aud = document.createElement('audio');
      this.wrap = document.createElement('div');
      this.pinpu = { num: 60, width: 6, height: 100 }
    }
    createPinpu() {
      let styles = document.styleSheets;
      let mcss = document.styleSheets;
      mcss.insertRule(`.mplayer { position: absolute; width: ${(this.pinpu.width + 2) * this.pinpu.num}px; height: ${this.pinpu.height * 1.5}px; left: 50%; bottom: 0px; transform: translate(-50%); cursor: pointer; }`, mcss.rules.length);
      mcss.insertRule(`@keyframes up { from { height: 0px; } to { height: var(--height); } }`, mcss.rules.length);
      this.wrap.className = 'mplayer';
      this.aud.id = 'aud';
      this.aud.autoplay = true;
      this.aud.loop = true;
      this.pa.appendChild(this.wrap);
      this.pa.appendChild(this.aud);

      Array.from({length: this.pinpu.num}).forEach((item,key) => {
            item = document.createElement('span');
            let ar = Array.from(Array(this.pinpu.num), (v,k) => this.pinpu.num - k -1);
            item.style.cssText = `
                position: absolute;
                width: ${this.pinpu.width}px;
                left: ${(this.pinpu.width + 2) * key}px;
                bottom: 0px;
                background: #${Math.random().toString(16).substr(-6)};
                animation: up ${0.3 + Math.random() * 0.3}s -${Math.random()}s infinite alternate linear var(--state);
                --height: ${this.pinpu.height / 2 + msort(ar) * 1.2}px;
            `;
            this.wrap.appendChild(item);
      });
      this.click();
    }
    click() {
      this.wrap.onclick = () => this.aud.paused ? this.aud.play() : this.aud.pause();
    }
}

let pp = new Pinpu(mydiv);
pp.pinpu.num = 100;
pp.pinpu.width = 5;
pp.pinpu.height = 100;
pp.aud.src = 'https://music.163.com/song/media/outer/url?id=25707174';
pp.createPinpu();

aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);

</script>

马黑黑 发表于 2023-7-16 23:16

这个，频谱的布局，不再使用flex布局，取而代之的是绝对定位，通过算法一一排列，兼容性应该较好，手机版下不会频谱颠倒、抖动。

醉美水芙蓉 发表于 2023-7-17 06:45

醉美水芙蓉 发表于 2023-7-17 06:45

马黑黑 发表于 2023-7-17 08:56

醉美水芙蓉 发表于 2023-7-17 06:45
手机观看正常！

这个是必须正常的{:4_170:}
页: [1]
查看完整版本: 橄榄树：用类做频谱修正版