论坛 › 音乐沙龙 › 学习帖【邓丽君歌曲六首】

梦江南 发表于 2024-7-25 10:20

学习帖【邓丽君歌曲六首】

<style>
#mydiv {
      margin: 30px 0 30px calc(50% - 593px);
      width: 1024px;
      height: 600px;
      background: url('https://pic.imgdb.cn/item/6680c0dcd9c307b7e97e995c.jpg') no-repeat center/cover;
      pointer-events: none;
      box-shadow: 0 0 10px rgba(0,0,0,.5);
      z-index: 1;
      position: relative;
}
#mydiv::before, #mydiv::after {
      position: absolute;
      content: '';
      top: 50px;
      width: 120px;
      height: 120px;
      background: repeating-conic-gradient(orange 2%, yellow 4%, orange 6%);
      box-shadow: inset 0 0 10px red;
      border-radius: 50%;
      cursor: pointer;
      pointer-events: auto;
      animation: rot 4s linear infinite var(--state);
}
#mydiv::before { left: 50px; filter: invert(.2); }
#mydiv::after { right: 50px; top: 100px; filter: invert(.3); }
#vid {
      position: absolute;
      width: 100%;
      height: 80px;
      object-fit: cover;
      -webkit-mask: radial-gradient(rgba(0,0,0,.6), rgba(0,0,0,.25), transparent);
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="mydiv" title="播放/暂停">
      <video id="vid" src="http://img.tukuppt.com/video_show/2629112/00/02/06/5b5031e3465c8.mp4" autoplay loop muted></video>
</div>

<script>
var songs = ['229779','473289829','1397662832','1858139278','1397664065', '2078368356'].map(s => 'https://music.163.com/song/media/outer/url?id=' + s);
const rd_play = (ar,audio) => audio.src = ar;
var aud = document.createElement('audio');
aud.oncanplay = aud.onplaying = aud.onpause = () => {
      mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.paused ? vid.pause() : vid.play();
}
aud.onended = () => rd_play(songs,aud);
aud.autoplay = true;
mydiv.appendChild(aud);
rd_play(songs, aud);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

走过岁月 发表于 2024-7-25 12:27

还有沙发，不客气了，坐了

走过岁月 发表于 2024-7-25 12:28

欣赏美帖，经典歌曲永不过时

走过岁月 发表于 2024-7-25 12:30

好像有个小问题，加了分就没反应了，要刷新才行

起个网名好难 发表于 2024-7-25 12:38

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

梦江南 发表于 2024-7-25 13:38

走过岁月 发表于 2024-7-25 12:27
还有沙发，不客气了，坐了

问好走过岁月版主，谢谢坐沙发支持！{:4_187:}

梦江南 发表于 2024-7-25 13:39

走过岁月 发表于 2024-7-25 12:28
欣赏美帖，经典歌曲永不过时

谢谢走过岁月版主互动，祝老师好！{:4_204:}

梦江南 发表于 2024-7-25 13:41

走过岁月 发表于 2024-7-25 12:30
好像有个小问题，加了分就没反应了，要刷新才行

加了分就没反应了，是代码问题吗？{:4_201:}

梦江南 发表于 2024-7-25 13:41

起个网名好难 发表于 2024-7-25 12:38


问好老师，谢谢分享支持！{:4_204:}

海笑 发表于 2024-7-25 13:59

欣赏老友佳作！

梦江南 发表于 2024-7-25 14:28

海笑 发表于 2024-7-25 13:59
欣赏老友佳作！

问好老友，谢谢支持！{:4_204:}

起个网名好难 发表于 2024-7-25 14:39

梦江南 发表于 2024-7-25 13:41
问好老师，谢谢分享支持！

可以做个十六首的{:5_117:}

梦江南 发表于 2024-7-25 14:44

起个网名好难 发表于 2024-7-25 14:39
可以做个十六首的

邓丽君的歌做16首也没问题的，后面再上10首就可以了。

梦油 发表于 2024-7-25 16:21

欣赏美曲，问候梦江南。

梦江南 发表于 2024-7-25 17:23

本帖最后由 梦江南 于 2024-7-26 07:32 编辑

梦油 发表于 2024-7-25 16:21
欣赏美曲，问候梦江南。
谢谢梦油老师分享，问好！{:4_204:}

绿叶清舟 发表于 2024-7-25 20:25

漂亮的制作，都是经典{:4_204:}

红影 发表于 2024-7-25 20:32

邓丽君的歌曲被很多人喜欢，这个好，选的歌曲好，制作也很漂亮。
给梦江南点赞{:4_199:}

红影 发表于 2024-7-25 20:33

右边的小播尤其构思巧妙，好像那篮子的把手一样{:4_173:}

梦江南 发表于 2024-7-26 07:34

绿叶清舟 发表于 2024-7-25 20:25
漂亮的制作，都是经典

谢谢绿叶清舟版主欣赏支持，早上好！{:4_204:}

梦江南 发表于 2024-7-26 07:35

红影 发表于 2024-7-25 20:32
邓丽君的歌曲被很多人喜欢，这个好，选的歌曲好，制作也很漂亮。
给梦江南点赞

谢谢影子欣赏点评，早上好！{:4_204:}

查看完整版本: 学习帖【邓丽君歌曲六首】