马黑黑 发表于 2025-3-29 20:33

DOOOO

<style>
        @import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css?v=1';
        #tz { margin: 30px 0 30px calc(50% - 593px); background: #000 url('https://638183.freep.cn/638183/t24/webp3/doooo.webp') no-repeat center/cover; }
        #mplayer { bottom: 30px; }
        #fsbtn { top: 40px; }
        #flower { position: absolute; top: 30px; left: 40px; cursor: pointer; filter: hue-rotate(60deg); transition: .7s; animation: rot 8s linear infinite var(--state); }
        #flower:hover { filter: unset; width: 150px; }
</style>

<div id="tz" class="pa">
        <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/08/29/17/22/02/video64edb8ba412ef.mp4" autoplay loop></video>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1883725410" autoplay loop></audio>
        <img id="flower" src="https://638183.freep.cn/638183/small/ytji_133877216020393750.png" alt="" title="Alt+X" width="120" />
</div>

<script type="module">
        import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js?v=1';
        var gc = `DOOOO - 李斯丹妮\nI just wanna用力的向上爬\n遇到闪电我变成了飞鸟\n记得最初的梦想是怎样发光\n心跳加速 Move your body\n假如我是那明亮的白月光\n我会照亮黑暗的 So Fire\nColour释放阳光照耀在你身上\nAll Day All Night\n没有一丝困意\n无论哪里此刻都要找到你\n无法克制我内心的定力\n决定靠近你试试运气\n丛林中看千军万马\n瞄准方向坚定不害怕\n这是疯狂前的蓄势待发\n就差音乐 Let's turn it up\nDo Do Do Do\nDo Do Do Do\nDo Do Do Do\nDo Do Do Do\nDo Do Do Do\nDo Do Do Do\nDo Do Do Do\nDo Do Do Do\nI just wanna用力的向上爬\n遇到闪电我变成了飞鸟\n记得最初的梦想是怎样发光\n心跳加速 Move your body\nAll Night So High\n的节奏 Worldwide\nCooking做个菜\n打开了任督二脉\n奇怪我的 Vibe\n走到那里都可以哇噻\n身体在摇摆\n伸手接着 Fly\n让懦弱全都退后\n当太阳都升起来\n当我出现变得频繁\n这是最独特的招牌\n做更上等的 Player\n不被任何问题制裁\n从不做那些假的 Faker\n还是真的那个最实在\nDo Do Do Do\nDo Do Do Do\nDo Do Do Do\nDo Do Do Do\nDo Do Do Do\nDo Do Do Do\nDo Do Do Do`;
        hcplay(tz,gc);
        flower.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2025-3-29 20:33

<div id="hEdiv"><pre id="hEpre">
&lt;style&gt;
        @import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css?v=1';
        #tz { margin: 30px 0 30px calc(50% - 593px); background: #000 url('https://638183.freep.cn/638183/t24/webp3/doooo.webp') no-repeat center/cover; }
        #mplayer { bottom: 30px; }
        #fsbtn { top: 40px; }
        #flower { position: absolute; top: 30px; left: 40px; cursor: pointer; filter: hue-rotate(60deg); transition: .7s; animation: rot 8s linear infinite var(--state); }
        #flower:hover { filter: unset; width: 150px; }
&lt;/style&gt;

&lt;div id="tz" class="pa"&gt;
        &lt;video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/08/29/17/22/02/video64edb8ba412ef.mp4" autoplay loop&gt;&lt;/video&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=1883725410" autoplay loop&gt;&lt;/audio&gt;
        &lt;img id="flower" src="https://638183.freep.cn/638183/small/ytji_133877216020393750.png" alt="" title="Alt+X" width="120" /&gt;
&lt;/div&gt;

&lt;script type="module"&gt;
        import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js?v=1';
        var gc = `DOOOO - 李斯丹妮\nI just wanna用力的向上爬\n遇到闪电我变成了飞鸟\n记得最初的梦想是怎样发光\n心跳加速 Move your body\n假如我是那明亮的白月光\n我会照亮黑暗的 So Fire\nColour释放阳光照耀在你身上\nAll Day All Night\n没有一丝困意\n无论哪里此刻都要找到你\n无法克制我内心的定力\n决定靠近你试试运气\n丛林中看千军万马\n瞄准方向坚定不害怕\n这是疯狂前的蓄势待发\n就差音乐 Let's turn it up\nDo Do Do Do\nDo Do Do Do\nDo Do Do Do\nDo Do Do Do\nDo Do Do Do\nDo Do Do Do\nDo Do Do Do\nDo Do Do Do\nI just wanna用力的向上爬\n遇到闪电我变成了飞鸟\n记得最初的梦想是怎样发光\n心跳加速 Move your body\nAll Night So High\n的节奏 Worldwide\nCooking做个菜\n打开了任督二脉\n奇怪我的 Vibe\n走到那里都可以哇噻\n身体在摇摆\n伸手接着 Fly\n让懦弱全都退后\n当太阳都升起来\n当我出现变得频繁\n这是最独特的招牌\n做更上等的 Player\n不被任何问题制裁\n从不做那些假的 Faker\n还是真的那个最实在\nDo Do Do Do\nDo Do Do Do\nDo Do Do Do\nDo Do Do Do\nDo Do Do Do\nDo Do Do Do\nDo Do Do Do`;
        hcplay(tz,gc);
        flower.onclick = () =&gt; aud.paused ? aud.play() : aud.pause();
&lt;/script&gt;
</pre></div>

<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
</script>

马黑黑 发表于 2025-3-29 20:33

本帖最后由 马黑黑 于 2025-3-29 20:52 编辑

这个是三合一播放器模块的横排歌词应用。

模块做了小升级，主要是尝试让播放器适配移动端设备，此前，三合一模块没有考虑移动端的运行问题，尤其是拖曳层面的操作。升级后的模块代码目前有点凌乱，但功能层面应该能按预设运行

花飞飞 发表于 2025-3-29 21:10

马黑黑 发表于 2025-3-29 20:33
这个是三合一播放器模块的横排歌词应用。

模块做了小升级，主要是尝试让播放器适配移动端设备，此前，三 ...

升级版这么快就来了，我就感觉标题要写三合一之横版，三合一之竖版。。{:4_173:}

花飞飞 发表于 2025-3-29 21:13

我今天跟的那个就是横版，感觉CSS就完全不用动，JS里加上歌词就可以了。。
只管搭颜色，但颜色也是联动的，一改都改了，所以也很方便。{:4_173:}

花飞飞 发表于 2025-3-29 21:18

这个贴子的丁达尔视频光效加得好，上次我推的视频网站也不错，可以用用
小花播也漂亮，又是自己扣的吧。。
音乐好听，节奏感强，积极向上的

红影 发表于 2025-3-29 21:36

这个花瓣小播触动变大变色，真漂亮。歌词和播放器的色彩也极漂亮，太美了{:4_199:}

红影 发表于 2025-3-29 21:39

这个加了歌词没写几行，意思默认就是5行呗{:4_187:}

红影 发表于 2025-3-29 21:42

一般习惯鼠标触动让花朵改变色相，这个放弃道而行之，触动后让花朵恢复原色了{:4_173:}

马黑黑 发表于 2025-3-29 21:47

红影 发表于 2025-3-29 21:42
一般习惯鼠标触动让花朵改变色相，这个放弃道而行之，触动后让花朵恢复原色了

这只是思路问题，没啥

马黑黑 发表于 2025-3-29 21:48

花飞飞 发表于 2025-3-29 21:10
升级版这么快就来了，我就感觉标题要写三合一之横版，三合一之竖版。。

横竖一眼看出来的

马黑黑 发表于 2025-3-29 21:48

红影 发表于 2025-3-29 21:39
这个加了歌词没写几行，意思默认就是5行呗

对。#lrcDiv 选择器也没写，默认

马黑黑 发表于 2025-3-29 21:49

红影 发表于 2025-3-29 21:36
这个花瓣小播触动变大变色，真漂亮。歌词和播放器的色彩也极漂亮，太美了

默认配置

马黑黑 发表于 2025-3-29 21:50

花飞飞 发表于 2025-3-29 21:13
我今天跟的那个就是横版，感觉CSS就完全不用动，JS里加上歌词就可以了。。
只管搭颜色，但颜色也是联动的 ...

比吃方便面还简单，可以吃双份午餐了

马黑黑 发表于 2025-3-29 21:50

花飞飞 发表于 2025-3-29 21:18
这个贴子的丁达尔视频光效加得好，上次我推的视频网站也不错，可以用用
小花播也漂亮，又是自己扣的吧。。 ...

那个视频不让下载的

小辣椒 发表于 2025-3-29 21:55

这个上面按钮可以变色，漂亮

马黑黑 发表于 2025-3-29 21:56

小辣椒 发表于 2025-3-29 21:55
这个上面按钮可以变色，漂亮

变色是简单的

小辣椒 发表于 2025-3-29 21:57

越来越完善了，而且插件加了后，也是玩起来更加轻松了，当然指套用啊，小辣椒最合适了{:4_205:}

红影 发表于 2025-3-29 22:02

马黑黑 发表于 2025-3-29 21:47
这只是思路问题，没啥

又是个新思路啊，学习了{:4_187:}

红影 发表于 2025-3-29 22:03

马黑黑 发表于 2025-3-29 21:48
对。#lrcDiv 选择器也没写，默认

嗯嗯，知道了，而且还可以改行数的{:4_187:}
页: [1] 2 3 4 5 6 7
查看完整版本: DOOOO