马黑黑 发表于 2025-1-6 17:46

Pyro

<style>
        @import 'https://638183.freep.cn/638183/web/mod/button.css';
        #tz { --state: running; margin: 30px 0 30px calc(50% - 593px); background: url('https://static0.gamerantimages.com/wordpress/wp-content/uploads/2023/06/star-citizen-pyro-star-ship.jpg') no-repeat center/cover; }
</style>

<div id="tz" class="pa">
        <audio src="https://music.163.com/song/media/outer/url?id=1868888580"></audio>
        <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/17/59/19/video6364e277489e5.mp4" autoplay loop muted></video>
        <img id="playbtn" class="mplayer" src="https://638183.freep.cn/638183/web/svg/3star_133731353409967500.svg" alt="" widt="120" height="120" style="top: 100px;" />
        <img id="playbtn" class="mplayer" src="https://638183.freep.cn/638183/web/svg/3star_133731353409967500.svg" alt="" widt="120" height="120" style="left: 100px;" />
        <img id="playbtn" class="mplayer" src="https://638183.freep.cn/638183/web/svg/3star_133731353409967500.svg" alt="" widt="120" height="120" style="right: 100px;" />
        <div id="fsbtn" class="fsbtn" style="bottom: 20px;"></div>
</div>

<script type="module">
        import { hcplay } from 'https://638183.freep.cn/638183/web/mod/button.js';
        import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
        hcplay(tz);
        fscreen.fs(tz, fsbtn);
</script>

马黑黑 发表于 2025-1-6 18:00

<h2>帖子代码</h2>
<div id="hEdiv"><pre id="hEpre">
&lt;style&gt;
        @import 'https://638183.freep.cn/638183/web/mod/button.css';
        #tz { --state: running; margin: 30px 0 30px calc(50% - 593px); background: url('https://638183.freep.cn/638183/t24/webp3/pyro.webp') no-repeat center/cover; }
        #fsbtn { bottom: 20px; }
&lt;/style&gt;

&lt;div id="tz" class="pa"&gt;
        &lt;audio src="https://music.163.com/song/media/outer/url?id=1868888580"&gt;&lt;/audio&gt;
        &lt;video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/17/59/19/video6364e277489e5.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;img id="playbtn" class="mplayer" src="https://638183.freep.cn/638183/web/svg/3star_133731353409967500.svg" alt="" widt="120" height="120" style="top: 100px;" /&gt;
        &lt;img id="playbtn" class="mplayer" src="https://638183.freep.cn/638183/web/svg/3star_133731353409967500.svg" alt="" widt="120" height="120" style="left: 100px;" /&gt;
        &lt;img id="playbtn" class="mplayer" src="https://638183.freep.cn/638183/web/svg/3star_133731353409967500.svg" alt="" widt="120" height="120" style="right: 100px;" /&gt;
        &lt;div id="fsbtn" class="fsbtn"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script type="module"&gt;
        import { hcplay } from 'https://638183.freep.cn/638183/web/mod/button.js';
        import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
        hcplay(tz);
        fscreen.fs(tz, fsbtn);
&lt;/script&gt;
</pre></div>

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

马黑黑 发表于 2025-1-6 18:00

本帖最后由 马黑黑 于 2025-1-6 20:36 编辑

button模块说明

（一）音频控制按钮

凡帖子里 class="mplayer" 的HTML标签都是可以控制音频的对象，它或它们运行CSS关键帧动画 rot；若果木有 mplayer 标签，则将帖子主元素视为控制音频播放暂停的对象，酱紫的话，帖子中若有其它点击操作的子元素（比如全屏切换按钮），它们的点击操作会触发音频的播放与暂停。

音频按钮可以是单个，可以是多个，可以是div，可以是img ……，你喜欢就好。记住 class="mplayer" 就行。

（二）模块不支持LRC歌词同步

仅是简单控制音频以及联动控制相关的东东，可以同步控制 ① 视频（若有，前提是 class="vid"），② SVG动画（若有），③ CSS变量 --state，前提是animation 属性中有 var(--state)。

（三）其他

① 帖子主元素若使用预设的样式，需要 class="pa"；
② 视频若希望使用预设样式，需要 class="vid"；
③ 全屏不是必须的，若不需要，可将全屏模块引用（第18行）、函数调用（第20行）、CSS代码（第4行）和HTML代码（第13行）删掉。

其他未尽事宜欢迎讨论解决。

绿叶清舟 发表于 2025-1-6 19:34

象未来世界的

马黑黑 发表于 2025-1-6 20:01

绿叶清舟 发表于 2025-1-6 19:34
象未来世界的
这个有火的炽热与激情，但也有愤怒和哀怨。歌曲以幽暗作主线，辅以或明朗或混沌的情绪，听着入迷却有一种说不出的哀伤

绿叶清舟 发表于 2025-1-6 20:14

马黑黑 发表于 2025-1-6 20:01
这个有火的炽热与激情，但也有愤怒和哀怨。歌曲以幽暗作主线，辅以或明朗或混沌的情绪，听着入迷却有一种 ...

歌词听不懂的，但音乐有点象三体里的那种感觉

马黑黑 发表于 2025-1-6 20:35

绿叶清舟 发表于 2025-1-6 20:14
歌词听不懂的，但音乐有点象三体里的那种感觉

这和三体无关

绿叶清舟 发表于 2025-1-6 20:39

马黑黑 发表于 2025-1-6 20:35
这和三体无关

有几小段有点象了，歌手的声音很喜欢

红影 发表于 2025-1-6 21:20

这个有趣，三个小播都能随意控制，应该再多加点也能行呢{:4_187:}

红影 发表于 2025-1-6 21:21

“音频按钮可以是单个，可以是多个，可以是div，可以是img ……”

当然是img的好，不用封闭呢，省力{:4_173:}

红影 发表于 2025-1-6 21:23

这制作效果真漂亮{:4_187:}

马黑黑 发表于 2025-1-6 21:46

红影 发表于 2025-1-6 21:23
这制作效果真漂亮

{:4_190:}

马黑黑 发表于 2025-1-6 21:46

红影 发表于 2025-1-6 21:21
“音频按钮可以是单个，可以是多个，可以是div，可以是img ……”

当然是img的好，不用封闭呢，省力{:4_ ...

{:4_196:}

马黑黑 发表于 2025-1-6 21:47

绿叶清舟 发表于 2025-1-6 20:39
有几小段有点象了，歌手的声音很喜欢

像点

马黑黑 发表于 2025-1-6 21:47

红影 发表于 2025-1-6 21:20
这个有趣，三个小播都能随意控制，应该再多加点也能行呢

理论上多少都可以

梦江南 发表于 2025-1-7 08:30

这背景和音乐相得益彰，赞！

杨帆 发表于 2025-1-7 13:56

谢谢深度分享，祝马老师腊八节快乐！{:4_191:}

马黑黑 发表于 2025-1-7 17:19

杨帆 发表于 2025-1-7 13:56
谢谢深度分享，祝马老师腊八节快乐！

节日好

马黑黑 发表于 2025-1-7 17:20

梦江南 发表于 2025-1-7 08:30
这背景和音乐相得益彰，赞！

感谢支持

红影 发表于 2025-1-7 22:58

马黑黑 发表于 2025-1-6 21:46


谢大咖{:4_187:}
页: [1] 2 3 4
查看完整版本: Pyro