论坛 › 欢乐水吧 › 来吧~~~一起舞起来（复习昨天的频谱）

小辣椒 发表于 2022-12-9 20:57

来吧~~~一起舞起来（复习昨天的频谱）

<style>
#papa { margin:120px 0 0 calc(50% - 670px); width: 1181px; height: 626px;;background: gray url('https://yinhua.ru/20221209/2.gif') no-repeat center/cover; box-shadow: 6px 3px 20px #000; position: relative; display: grid; place-items: end center; user-select: none; z-index: 1; }
#mplayer { position: absolute; width: 100%; height: 120px; bottom: 20px;display: flex; justify-content: center; align-items: flex-end; }
.mLine { position: relative; margin: 0 2px 0 0; width: 6px; height: 20px; background: gray linear-gradient(to top,Yellow,Salmon,Fuchsia); transition: height .45s; }
.mLine::before { position: absolute; content: ''; width: 100%; height: 3px; background: pink; top: -4px; }
.tit { position: absolute;;left: 140px; top: 80px; font: bold 3.0em sans-serif; color: hsla(120,50%,50%,.90); text-shadow: 1px 1px 1px #000, -5px -5px 10px Yellow, 5px 5px 10px Yellow; animation: flash 3s infinite alternate linear; }
@keyframes flash { to { text-shadow: 1px 1px 2px #000, -5px -5px 20px darkgreen, 5px 5px 20px darkgreen; } }
</style>

<div id="papa">
      <div class="tit">来吧【一起舞】</div>
      <div id="mplayer"></div>
      <audio id="aud" src="https://yinhua.ru/20221209/00.mp3" loop autoplay></audio>
</div>

<script>
(function() {
      ypData = ;
      let total = Math.ceil(mplayer.offsetWidth / 6);
      let cNum = 0;
      for(j=0; j<total; j++) {
                let el = document.createElement('span');
                el.className = 'mLine';
                el.style.height = Math.floor(Math.random()* 100) + 'px';
                mplayer.appendChild(el);
      }
      let lines = document.querySelectorAll('.mLine');

      mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
      
      aud.addEventListener('timeupdate', () => {
                cNum ++;
                if(cNum >= ypData.length) cNum = 0;
                setPinpu(cNum);
      });

      function setPinpu(num) {
                let data = ypData;
                for(j=0; j<total; j++) {
                        lines.style.height = Math.floor(Math.random() * data / 1.5) + Math.floor(Math.random() *50) + 'px';
                }
      }

})();
</script>
<br><br><br><br><br>

闲言不语 发表于 2022-12-9 21:01

本帖最后由 闲言不语 于 2022-12-9 21:03 编辑

https://pic.imgdb.cn/item/5fddc7c33ffa7d37b383b033.gif

小辣椒 发表于 2022-12-9 21:01

@马黑黑
黑黑我今天想把频谱移动上面一点，移动了感觉效果没有出来，很奇怪，我电脑自己预览是有的

闲言不语 发表于 2022-12-9 21:03

踢死狗，踢起来{:4_397:}

小辣椒 发表于 2022-12-9 21:04

闲言不语 发表于 2022-12-9 21:03
踢死狗，踢起来

哇瑟，梦梦你太厉害了{:4_170:}

闲言不语 发表于 2022-12-9 21:06

https://pic.imgdb.cn/item/639332abb1fccdcd3623f505.gif

闲言不语 发表于 2022-12-9 21:07

https://pic.imgdb.cn/item/63933300b1fccdcd36247d59.gif

红影 发表于 2022-12-9 21:07

这个好热烈，用这个频谱正好呢。亲爱的帖子做得好棒{:4_199:}

闲言不语 发表于 2022-12-9 21:08

小辣椒 发表于 2022-12-9 21:04
哇瑟，梦梦你太厉害了

https://pic.imgdb.cn/item/6393333bb1fccdcd3624ea5f.gif

闲言不语 发表于 2022-12-9 21:09

https://pic.imgdb.cn/item/63933379b1fccdcd36256228.gif

闲言不语 发表于 2022-12-9 21:10

https://pic.imgdb.cn/item/639333afb1fccdcd3625e808.gif

小辣椒 发表于 2022-12-9 21:11

红影 发表于 2022-12-9 21:07
这个好热烈，用这个频谱正好呢。亲爱的帖子做得好棒

亲爱的，昨天晚上捣鼓的，今天看见黑黑有新的频谱带帽的，今天不做了，早睡，困S了

小辣椒 发表于 2022-12-9 21:12

闲言不语 发表于 2022-12-9 21:07


梦梦小动图很多的{:4_208:}

小辣椒 发表于 2022-12-9 21:13

闲言不语 发表于 2022-12-9 21:10


一起舞吧{:4_170:}

醉美水芙蓉 发表于 2022-12-9 21:19

小辣椒 发表于 2022-12-9 21:22

醉美水芙蓉 发表于 2022-12-9 21:19
小辣椒频谱改得好漂亮！

谢谢水芙蓉，主要配这个图图的颜色修改的

红影 发表于 2022-12-9 21:51

小辣椒 发表于 2022-12-9 21:11
亲爱的，昨天晚上捣鼓的，今天看见黑黑有新的频谱带帽的，今天不做了，早睡，困S了

今天那个不但可以带帽，还能穿鞋呢{:4_170:}

马黑黑 发表于 2022-12-9 21:53

小辣椒 发表于 2022-12-9 21:01
@马黑黑
黑黑我今天想把频谱移动上面一点，移动了感觉效果没有出来，很奇怪，我电脑自己预览是有的

#mplayer { position: absolute; width: 100%; height: 120px; bottom: 20; ...

这里用bottom，但没有单位，所以不动，应改为：bottom: 20px;

小辣椒 发表于 2022-12-9 22:05

马黑黑 发表于 2022-12-9 21:53
#mplayer { position: absolute; width: 100%; height: 120px; bottom: 20; ...

这里用bottom，但没有 ...

哇瑟，粗心大意，修改好了，奇怪我电脑没有这个px;居然效果出来的

小辣椒 发表于 2022-12-9 22:06

马黑黑 发表于 2022-12-9 21:53
#mplayer { position: absolute; width: 100%; height: 120px; bottom: 20; ...

这里用bottom，但没有 ...

昨天测试的时候发现下面留一点效果好{:4_170:}

查看完整版本: 来吧~~~一起舞起来（复习昨天的频谱）