红影 发表于 2022-6-3 11:03

祝福大家《端午安康》

<style>
.hy {
      left: -20px;
      width: 800px;
      height: 1200px;
      background: url('https://pic.imgdb.cn/item/62997827094754312939ed4e.jpg') no-repeat;
      position: relative;
      box-shadow:00 8px #333;
      border-radius:12px;
}
.wrap {
      display: flex;
      align-items: flex-end;
      left: 120px;
      top: 1020px;
      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: #19A250;
      box-shadow:inset 1px 0px 2px#000;
      display: inline-block;

}


</style>
<div class="hy">

<div class="wrap">
      
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1893082771.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
      <div style="position: absolute; left:-20px; top: 240px; width:468px; ">
                <img alt="" src="https://pic.imgdb.cn/item/629978d309475431293aa763.gif"/></div>
</div>

<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-6-3 11:06

《端午安康》

我愿把端午安康唱给你听
心中的挂念我从不会忘记
期待能与你再一次的相遇
一起看那龙舟在水中嬉戏
朋友 祝你 端午安康
愿你 美梦成真还成双
幸福 将你 围绕在中央
好运 来自四面八方
我愿把端午祝福唱给你听
心中的思念时刻把你想起
期待你和我能在这里相聚
分享每一个快乐地瞬间
朋友 祝你 端午安康
愿你 美梦成真还成双
幸福 将你 围绕在中央
好运 来自四面八方
好运 来自四面八方

红影 发表于 2022-6-3 11:06

一个简单的帖子。祝福大家端午节快乐，幸福平安{:4_187:}

小辣椒 发表于 2022-6-3 12:15

借亲爱的漂亮的贺帖一起祝福朋友们端午节安康！开心快乐！

加林森 发表于 2022-6-3 13:39

借红影的帖祝大家端午节安康！

梦油 发表于 2022-6-3 13:54

红影辛苦了！借红影美帖祝福朋友们端午安康！

东篱闲人 发表于 2022-6-3 14:06

一起安康！{:5_112:}

四海八荒 发表于 2022-6-3 14:19

端午安康{:4_204:}

小九 发表于 2022-6-3 15:52

端午安康{:4_187:}

顾-念 发表于 2022-6-3 21:23

才看到这个帖子。点赞
页: [1]
查看完整版本: 祝福大家《端午安康》