论坛 › 音乐沙龙 › 《不想长大》庆祝六一儿童节

红影 发表于 2022-5-31 20:38

《不想长大》庆祝六一儿童节

<style>
.hy {
      left: -252px;top:100px;
      width: 1100px;
      height: 600px;
      background: url('https://pic.imgdb.cn/item/6295a5a009475431291532b6.jpg') no-repeat;
      position: relative;
      box-shadow:00 8px #333;
      border-radius:12px;
}
.wrap {
      display: flex;
      align-items: flex-end;
      left: 460px;
      top: 480px;
      width: 144px;
      height: 50px;
       -webkit-box-reflect: below 0 linear-gradient(transparent,rgba(0,0,0,.15));
      cursor: pointer;
      position: absolute;
}
.wrap span {
      width: 12px;
      height: 20px;
      background-color: #CC0000;
      box-shadow:inset 0px 0px 2px#000;
      display: inline-block;
}
.txtBox {
      width: fit-content;
      color: #113DEE;
      font: bold 1.2em sans-serif;
      text-shadow: 1px 1px 2px gray, 2px 2px 4px gray;
      -webkit-box-reflect: below 0 linear-gradient(transparent,rgba(0,0,0,.35));
      position: absolute;
      right: 90px;
      bottom: 30px;
}
</style>
<div class="hy">
<div class="txtBox">花潮论坛庆六一</div>
<div class="wrap">
      
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1943810859.mp3"

autoplay="autoplay" loop="loop"></audio>
</div>
       <div style="position: absolute; left:290px; top: 310px; width:100px; ">
                <img alt="" src="https://pic.imgdb.cn/item/6292fbac0947543129e7a2d5.gif"/></div>
       <div style="position: absolute; left:720px; top: 320px; width:135px; ">
                <img alt="" src="https://pic.imgdb.cn/item/6295a7640947543129174920.gif"/></div>
       <div style="position: absolute; left:-10px; top: 10px; width:316px; ">
                <img alt="" src="https://pic.imgdb.cn/item/6260dabe239250f7c590f3ac.gif"/></div>

</div><br><br><br><br><br><br><br>
<script>
let wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud');
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;

Array.from({length: 12}).forEach((ele) => {
      ele = document.createElement('span');
      ele.className = 'sskey';
      
      wrap.appendChild(ele);
});

let sskey = document.querySelectorAll('.sskey');

wrap.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('timeupdate', () => {
      Array.from(sskey).forEach((ele) => {
                ele.style.height = num(10, 50) + 'px';
      });
});
</script>

红影 发表于 2022-5-31 20:41

感谢黑黑的代码，@马黑黑 把你那个柱状波形频谱改成单色的了，还学习了一下文字倒影{:4_187:}

红影 发表于 2022-5-31 20:42

本来想学习一下让波形也来个倒影，但是它是动态的，有点无从下手了。图片的我学了一下，动图的不知道怎么弄了{:4_173:}

来看你 发表于 2022-5-31 20:49

这么好看的帖子，居然没分了

马黑黑 发表于 2022-5-31 20:50

红影 发表于 2022-5-31 20:42
本来想学习一下让波形也来个倒影，但是它是动态的，有点无从下手了。图片的我学了一下，动图的不知道怎么弄 ...

动图一样的，你把它看成是一个对象就可以了，无需关心它是动的还是静的

马黑黑 发表于 2022-5-31 20:51

红影 发表于 2022-5-31 20:41
感谢黑黑的代码，@马黑黑 把你那个柱状波形频谱改成单色的了，还学习了一下文字倒影

很可耐的样纸。祝小盆友们节日快乐！

来看你 发表于 2022-5-31 20:51

长大后我就失去它，，，失去的童年咱们在六一找回来啦 {:5_112:}

千羽 发表于 2022-5-31 20:52

彩虹桥漂亮，带来了满满的节日气氛，那两动图也很应景，影儿制作精彩{:4_187:}

醉美水芙蓉 发表于 2022-5-31 20:52

小九 发表于 2022-5-31 20:54

我答应你，不会长大，永远保持一颗向上的童心，开心快乐{:4_187:}{:4_187:}

小辣椒 发表于 2022-5-31 21:05

亲爱的，好制作，漂亮新颖的制作{:4_199:}

特别可爱的，欢乐的气氛{:4_178:}

小辣椒 发表于 2022-5-31 21:06

我们一起不长大，都变人精{:4_170:}

梦油 发表于 2022-5-31 21:26

祝楼主和老儿童、大儿童们永葆青春！

红影 发表于 2022-5-31 21:26

来看你 发表于 2022-5-31 20:49
这么好看的帖子，居然没分了

没事，咱们一起不长大，永远在单纯的时光里{:4_173:}

红影 发表于 2022-5-31 21:27

马黑黑 发表于 2022-5-31 20:50
动图一样的，你把它看成是一个对象就可以了，无需关心它是动的还是静的

嗯，知道了，一会本地试试。谢谢黑黑{:4_187:}

马黑黑 发表于 2022-5-31 21:27

红影 发表于 2022-5-31 21:27
嗯，知道了，一会本地试试。谢谢黑黑

好像我的例子中有用到动图的吧

马黑黑 发表于 2022-5-31 21:29

好像s.h.e也有一首同名歌曲

红影 发表于 2022-5-31 21:29

马黑黑 发表于 2022-5-31 20:51
很可耐的样纸。祝小盆友们节日快乐！

还应该谢谢黑黑的代码才是{:4_187:}

红影 发表于 2022-5-31 21:30

来看你 发表于 2022-5-31 20:51
长大后我就失去它，，，失去的童年咱们在六一找回来啦

只要有一颗童心，就永远有欢快的时光{:4_187:}

红影 发表于 2022-5-31 21:31

千羽 发表于 2022-5-31 20:52
彩虹桥漂亮，带来了满满的节日气氛，那两动图也很应景，影儿制作精彩

图图都是网上搜的，被我组在一起了而已{:4_173:}

查看完整版本: 《不想长大》庆祝六一儿童节