论坛 › 马黑黑教程专版 › 示波形频谱加个光盘

马黑黑 发表于 2023-8-29 13:59

示波形频谱加个光盘

<style>
#mplayer {
        position: absolute;
        display: flex;
        gap: 60px;
}
#mplayer::before, #mplayer::after { position: absolute; content: ''; }
#mplayer::before {
        width: 40px;
        height: 40px;
        left: calc(50% - 20px);
        top: calc(50% - 20px);
        background: conic-gradient(tan,green,pink,purple);
        border-radius: 50%;
        animation: rot 5s infinite linear;
}
#mplayer::after {
        content: attr(data-tt);
        height: 100%;
        white-space: pre;
        left: 50%;
        font: normal 14px / 60px sans-serif;
        transform: translate(-50%);
}
#mydiv {
        width: 100px;
        height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
}
#copydiv { transform: rotateY(-180deg); }
pin-pu {
        width: 2px;
        height: 2px;
        background: blue;
        animation: change var(--du) var(--delay) infinite;
}
@keyframes change {
        to { height: var(--hh); }
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mplayer"data-tt="00:00&#10;00:00">
        <div id="mydiv"></div>
        <div id="copydiv"></div>
</div>

<script>

/* 除以几依据 pin-pu 标签的 width + 希望的间隔值即 margin-right 值 */
let total = Math.ceil(mydiv.offsetWidth / 3);

Array.from({length: total}).forEach((item,key) => {
        item = document.createElement('pin-pu');
        item.style.cssText += `
                background: #${Math.random().toString(16).substr(-6)};
                margin-right: 1px;
                --hh: ${Math.random() * mydiv.offsetHeight}px;
                --du: ${.5 * Math.random() + .5}s;
                --delay: -${Math.random()}s;
        `;
        mydiv.appendChild(item);
});

let node = mydiv;
let clone = node.cloneNode(true);
copydiv.appendChild(clone);

</script>

红影 发表于 2023-8-29 14:11

这个也漂亮，两边有示波器，当中的官潘可以当按钮，而且有播放时间的展示，真棒{:4_199:}

醉美水芙蓉 发表于 2023-8-29 17:06

马黑黑 发表于 2023-8-29 17:32

红影 发表于 2023-8-29 14:11
这个也漂亮，两边有示波器，当中的官潘可以当按钮，而且有播放时间的展示，真棒

上午开视频会议，待播放时有一个类似的效果logo，真巧

马黑黑 发表于 2023-8-29 17:33

醉美水芙蓉 发表于 2023-8-29 17:06
这个频谱很牛&#128046;牛！

{:4_172:}

红影 发表于 2023-8-29 19:46

马黑黑 发表于 2023-8-29 17:32
上午开视频会议，待播放时有一个类似的效果logo，真巧

看到这个类似效果，黑黑心里肯定很开心，刚刚论坛里自己动手做了一个呢{:4_173:}

红影 发表于 2023-8-29 19:47

这个貌似光标的高度太高了点，再低点更好。

醉美水芙蓉 发表于 2023-8-29 20:09

小辣椒 发表于 2023-8-29 20:22

啊~~~中午看见那个频谱已经感觉很漂亮了，现在又一个带光盘的了，太赞的{:4_199:}

焱鑫磊 发表于 2023-8-29 20:24

{:4_187:}{:4_204:}{:4_187:}

马黑黑 发表于 2023-8-29 20:43

小辣椒 发表于 2023-8-29 20:22
啊~~~中午看见那个频谱已经感觉很漂亮了，现在又一个带光盘的了，太赞的

晚上嚎

马黑黑 发表于 2023-8-29 20:43

红影 发表于 2023-8-29 19:47
这个貌似光标的高度太高了点，再低点更好。

可以调整的

马黑黑 发表于 2023-8-29 20:43

红影 发表于 2023-8-29 19:46
看到这个类似效果，黑黑心里肯定很开心，刚刚论坛里自己动手做了一个呢

{:4_199:}

马黑黑 发表于 2023-8-29 20:44

焱鑫磊 发表于 2023-8-29 20:24


谢谢支持

红影 发表于 2023-8-29 21:31

醉美水芙蓉 发表于 2023-8-29 20:09
红影先做个玩玩！

我还不会做啊，不知道怎么和音乐关联{:4_173:}

红影 发表于 2023-8-29 21:43

马黑黑 发表于 2023-8-29 20:43
可以调整的

嗯嗯，这个和距离也有关，拉长点时高点也感觉不到了{:4_173:}

红影 发表于 2023-8-29 21:44

马黑黑 发表于 2023-8-29 20:43


为什么鼓掌啊，我是说你刚刚在这里做的这个呀{:4_173:}

马黑黑 发表于 2023-8-29 21:50

红影 发表于 2023-8-29 21:44
为什么鼓掌啊，我是说你刚刚在这里做的这个呀

鼓掌对手掌好

马黑黑 发表于 2023-8-29 21:56

红影 发表于 2023-8-29 21:43
嗯嗯，这个和距离也有关，拉长点时高点也感觉不到了

大小可以调整

红影 发表于 2023-8-29 22:29

马黑黑 发表于 2023-8-29 21:56
大小可以调整

知道，等封装起来调就不方便了，除非你留接口或者自己重新上传{:4_173:}

查看完整版本: 示波形频谱加个光盘