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

巫娜 - 竹间语

<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/120px 60px; width: 1080px; height: 655px; background: url('https://638183.freep.cn/638183/t24/3/vjy.jpeg') no-repeat center/cover; margin: 30px 0; }
        #player { position: absolute; left: calc(50% - 110px); bottom: 20px; width: 45px; height: 45px; border-radius: 50%; border: thick groove; border-color: cyan orange yellow green; 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="竹间语">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=35023486" autoplay loop></audio>
        <video id="vid" class="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/32/5b3f53c677460.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-23 08:52

本帖最后由 马黑黑 于 2024-6-23 08:53 编辑

帖子代码：
<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/120px 60px; width: 1080px; height: 655px; background: url('https://638183.freep.cn/638183/t24/3/vjy.jpeg') no-repeat center/cover; margin: 30px 0; }
      #player { position: absolute; left: calc(50% - 110px); bottom: 20px; width: 45px; height: 45px; border-radius: 50%; border: thick groove; border-color: cyan orange yellow green; 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="竹间语">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=35023486" autoplay loop></audio>
      <video id="vid" class="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/32/5b3f53c677460.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>本帖：

① 使用 yslrc.css 部分设置，很大程度上简化一些设计与操作；

② h5新小播 - 新颖的多彩色圈按钮（了解详情可参阅 h5播放器按钮：clip-path+mask+多彩边框 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)）

红影 发表于 2024-6-23 09:29

太好了，这个彩色小播直接就做成帖子了，很赞{:4_199:}

红影 发表于 2024-6-23 09:30

简洁又漂亮，和彩色歌词相配，很有特色{:4_199:}

南无月 发表于 2024-6-23 09:35

看到有新贴，封了CSS的，我来瞧瞧说明。。

马黑黑 发表于 2024-6-23 10:06

南无月 发表于 2024-6-23 09:35
看到有新贴，封了CSS的，我来瞧瞧说明。。

{:4_190:}

马黑黑 发表于 2024-6-23 10:06

红影 发表于 2024-6-23 09:29
太好了，这个彩色小播直接就做成帖子了，很赞

{:4_190:}

马黑黑 发表于 2024-6-23 10:07

红影 发表于 2024-6-23 09:30
简洁又漂亮，和彩色歌词相配，很有特色

这个没有歌词，纯音乐

南无月 发表于 2024-6-23 10:19

这个代码小播精致小巧，简洁大方，好俊俏。。。
整贴绿意盎然，白色粒子如梦似幻，飞舞竹林之间。。
意境超美。。

大清早看到老师这样清新灵动的贴子，真是心情愉悦。。

醉美水芙蓉 发表于 2024-6-23 10:56

马黑黑 发表于 2024-6-23 10:56

醉美水芙蓉 发表于 2024-6-23 10:56
欣赏老师带来的精美播放器！

{:4_190:}

南无月 发表于 2024-6-23 12:23

马黑黑 发表于 2024-6-23 10:06

保质期内的小咖来一杯{:4_170:}

马黑黑 发表于 2024-6-23 13:31

南无月 发表于 2024-6-23 12:23
保质期内的小咖来一杯

好哒

小辣椒 发表于 2024-6-23 14:48

这个歌词颜色和小播颜色相配的，黑黑好思路，赞的{:4_199:}

小辣椒 发表于 2024-6-23 14:49

现在黑黑是没有做不到，只有想不到了{:4_170:}

小辣椒 发表于 2024-6-23 14:51

这纯音还蛮好听的，和背景图图特别吻合

南无月 发表于 2024-6-23 15:47

马黑黑 发表于 2024-6-23 13:31
好哒

午休醒来有这么一杯就很惬意{:4_170:}

马黑黑 发表于 2024-6-23 16:32

南无月 发表于 2024-6-23 15:47
午休醒来有这么一杯就很惬意

美滋滋

马黑黑 发表于 2024-6-23 16:32

小辣椒 发表于 2024-6-23 14:51
这纯音还蛮好听的，和背景图图特别吻合

小辣椒下午嚎

马黑黑 发表于 2024-6-23 16:33

小辣椒 发表于 2024-6-23 14:49
现在黑黑是没有做不到，只有想不到了

夸张了
页: [1] 2 3
查看完整版本: 巫娜 - 竹间语