论坛 › 音乐沙龙 › 泡沫

绿叶清舟 发表于 2024-6-25 21:48

泡沫

<style>
      @import 'https://638183.freep.cn/638183/web/css/yslrc.css';
      #tz { --ox: 81px; --lrc-top: calc(100% - 80px); --lrc-bg: radial-gradient(cyan, white, orange) center/230px 60px; width: 1280px; height: 720px; background: url('https://p.upyun.com/demo/tmp/B8KOUKH2.webp') no-repeat center/cover; margin: 30px 0; }
      #player { position: absolute; left: calc(55% - 110px); bottom: 60px; width: 45px; height: 45px; border-radius: 50%; border: thick groove; border-color: #ffff69 #ffcf19 #ffff69 #ffcf19; display: grid; place-items: center; transition: .8s; --opt: 1; }
#player::before, #player::after { position: absolute; content: '';width: 20px; height: 20px; background: orange; transition: .3s; cursor: pointer; }
      #player::before { clip-path: polygon(0 0, 0 100%, 100% 50%); opacity: calc(var(--opt) * 1); background: cyan; }
      #player::after { mask: linear-gradient(to right, red 30%, transparent 30%, transparent 70%, red 70%, red 0); -webkit-mask: linear-gradient(to right, red 30%, transparent 30%, transparent 70%, red 70%, red 0); opacity: calc(1 - var(--opt)); }
      #player:hover { transform: scale(1.1); filter: invert(.3) drop-shadow(0 0 20px black); }
      .vid { height: calc(100% + 60px); }
</style>

<div id="tz" class="tz" data-lrc="泡沫 (PÀO MÒ Remix) - G.E.M.邓紫棋">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=432792230" autoplay loop></audio>
      <video id="vid" class="vid" src="https://img.tukuppt.com/video_show/2475824/00/02/15/5b542e5aa91c3.mp4" autoplay loop muted></video>
      <div id="player"></div>
</div>

<script>
var mState = () => {
      player.style.setProperty('--opt', +aud.paused);
      player.title = ['暂停','播放'][+aud.paused];
      aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

朵拉 发表于 2024-6-25 22:35

首席沙发，欣赏学习哈{:4_204:}

红影 发表于 2024-6-25 23:13

以为也是粒子泡泡呢，原来是视频。{:4_173:}
很漂亮的彩色小播，歌词也漂亮，欣赏清舟好帖{:4_199:}

红影 发表于 2024-6-25 23:13

记得论坛里也有个泡沫的名字，原来还有这首歌啊{:4_173:}

马黑黑 发表于 2024-6-25 23:49

好漂酿的样纸{:4_199:}

樵歌 发表于 2024-6-26 07:56

是清舟小丫头时候吹的泡泡{:4_189:}

梦江南 发表于 2024-6-26 15:34

漂亮！做得真好！{:4_187:}

小辣椒 发表于 2024-6-27 21:48

啊，我开始以为是泡泡粒子的{:4_172:}

小辣椒 发表于 2024-6-27 21:48

清舟就是特别会动脑子，一样的泡泡效果，画面非常的漂亮{:4_199:}

小辣椒 发表于 2024-6-27 21:49

欣赏清舟的精美制作{:4_171:}

绿叶清舟 发表于 2024-6-29 21:17

小辣椒 发表于 2024-6-27 21:48
啊，我开始以为是泡泡粒子的

我也以为是粒子的了，搬错代码结果变成视频了{:4_189:}

绿叶清舟 发表于 2024-6-29 21:17

梦江南 发表于 2024-6-26 15:34
漂亮！做得真好！

谢谢江南，晚上好

绿叶清舟 发表于 2024-6-29 21:17

樵歌 发表于 2024-6-26 07:56
是清舟小丫头时候吹的泡泡

这也看出来了啊

绿叶清舟 发表于 2024-6-29 21:18

马黑黑 发表于 2024-6-25 23:49
好漂酿的样纸

本来想做另一个的，结果就近搬了个代码变成现在的了

绿叶清舟 发表于 2024-6-29 21:18

红影 发表于 2024-6-25 23:13
记得论坛里也有个泡沫的名字，原来还有这首歌啊

是啊，泡泡中年时就在的了

绿叶清舟 发表于 2024-6-29 21:19

红影 发表于 2024-6-25 23:13
以为也是粒子泡泡呢，原来是视频。
很漂亮的彩色小播，歌词也漂亮，欣赏清舟好帖

搬错代码了{:4_189:}

绿叶清舟 发表于 2024-6-29 21:19

朵拉 发表于 2024-6-25 22:35
首席沙发，欣赏学习哈

谢谢朵拉，客气了啊

马黑黑 发表于 2024-6-29 21:47

绿叶清舟 发表于 2024-6-29 21:18
本来想做另一个的，结果就近搬了个代码变成现在的了

随手拈来自然亲切

红影 发表于 2024-6-30 15:07

绿叶清舟 发表于 2024-6-29 21:18
是啊，泡泡中年时就在的了

也是清舟的老盆友了呢。

红影 发表于 2024-6-30 15:08

绿叶清舟 发表于 2024-6-29 21:19
搬错代码了

没事啊，好看就行{:4_187:}

查看完整版本: 泡沫