朵拉 发表于 2024-1-24 22:34

阿衣莫(越鼓版) TO：马黑黑

本帖最后由 朵拉 于 2024-1-24 22:48 编辑 <br /><br /><style>
#papa {
      position: relative;
      margin: 0 0 0 calc(50% - 681px);
      width: 1199px;
      height: 622px;
      border-radius: 8px;
      background: radial-gradient(circle,transparent var(--radius), rgba(0,0,0,.5) calc(var(--radius) + 30%), rgba(0,0,0,.5) 0), url('https://pic.imgdb.cn/item/65b1217e871b83018a8842b5.jpg') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      cursor: pointer;
      z-index: 1;
      --radius: 0%;
}

</style>

<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1894878117" autoplay loop></audio>

<script>
(function (){
      var step = 10, rad = 0, raf = null;
      var render = () => {
                rad += step;
                if(rad <= 0 || rad >= 100) step = -step;
                papa.style.setProperty('--radius', rad + '%');
                if(!aud.paused) raf = requestAnimationFrame(render);
      };
      var mState = () => aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(render);
      aud.addEventListener('playing', mState, false);
      aud.addEventListener('playing', mState, false);
      papa.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

朵拉 发表于 2024-1-24 22:50

@马黑黑
马师 晚上好，学生交作业，望指正哈{:4_190:}
坚持听一分钟后，有中文歌词哈~~

梦油 发表于 2024-1-25 09:43

欣赏佳作，问候朵拉。

红影 发表于 2024-1-25 19:24

漂亮，欣赏朵宝好帖{:4_204:}

亦是金 发表于 2024-1-25 19:34

问好朵拉！歌曲好听，我套用你的帖子做了一个帖子，谢谢了！{:4_187:}
页: [1]
查看完整版本: 阿衣莫(越鼓版) TO：马黑黑