小辣椒 发表于 2025-2-24 20:27

心要让你听见（合唱版） （学习黑黑三体 Opening Theme ）播放器效果

<style>
        @import 'https://638183.freep.cn/638183/web/mod/mp3player_lrc.css';
        #tz { margin: 140px 0 30px calc(50% - 721px);width: 1280px;height: 720px; background: url('https://cccimg.com/view.php/b54701b2e38dbeb504949b789b2066e3.jpg ') no-repeat center/cover; }
        #mplayer { bottom: 20px; background: rgba(240,255,240,.85); }
        #fsbtn { top: 15px; }
#lrc { --bg: linear-gradient(180deg,hsla(80,50%,20%,.20),hsla(80,50%,20%,.35)); position: absolute; left: 40%; bottom: 80px;font:normal 2.0em Microsoft YaHei; sans-serif; color:MintCream; white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85)); pointer-events: none; z-index: 900; }
#dt2{ position: absolute; width:200px; height: 400px; bottom: 0px;right: 50px; }

</style>

<div id="tz" class="pa">
        <audio src="https://cccimg.com/view.php/2e447c97aaa6f142624af1f3fb2cd244.mp3"></audio>
        <video class="vid" src="https://cccimg.com/view.php/5cae0a7797b56381d81c593b1dca9122.mp4" autoplay loop muted></video>

<img id="dt2" src="https://cccimg.com/view.php/1a7ccb40b93ee801c9acb64fe716a81f.png" alt="" />
        <div id="fsbtn" class="fsbtn"></div>
</div>

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

小辣椒 发表于 2025-2-24 20:28

@马黑黑

直接套用了，省点力，视频是自己的，播放器底板改了一下，就加了个歌词同步

小辣椒 发表于 2025-2-24 20:29

感谢黑黑源码分享

马黑黑 发表于 2025-2-24 20:52

小辣椒 发表于 2025-2-24 20:28
@马黑黑

直接套用了，省点力，视频是自己的，播放器底板改了一下，就加了给歌词同步

慢慢熟悉 module 模块的用法，它让帖子代码更简洁，同时又可以自定义很多东东（取决于模块的开放程度）

亚伦影音工作室 发表于 2025-2-24 20:53

小辣椒 发表于 2025-2-24 20:28
@马黑黑

直接套用了，省点力，视频是自己的，播放器底板改了一下，就加了给歌词同步

很漂亮的作品！

红影 发表于 2025-2-24 20:58

这个漂亮，右上角还有个时隐时现的小logo呢，欣赏亲爱的好帖{:4_199:}

梦油 发表于 2025-2-24 21:01

虚实结合的画面真美。

起个网名好难 发表于 2025-2-24 21:08

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

小辣椒 发表于 2025-2-24 21:53

马黑黑 发表于 2025-2-24 20:52
慢慢熟悉 module 模块的用法，它让帖子代码更简洁，同时又可以自定义很多东东（取决于模块的开放程度）

其实自己也是只能套用，许多东西不会

小辣椒 发表于 2025-2-24 21:54

亚伦影音工作室 发表于 2025-2-24 20:53
很漂亮的作品！

谢谢亚纶欣赏

小辣椒 发表于 2025-2-24 21:55

红影 发表于 2025-2-24 20:58
这个漂亮，右上角还有个时隐时现的小logo呢，欣赏亲爱的好帖

亲爱的，没办法，收费空间，连接不加自己的logo，被人会拿去用，岁月的教训我得记住的。。。。。

小辣椒 发表于 2025-2-24 21:56

梦油 发表于 2025-2-24 21:01
虚实结合的画面真美。

梦油晚上好，谢谢欣赏，是一个图片加上一个视频

小辣椒 发表于 2025-2-24 21:56

起个网名好难 发表于 2025-2-24 21:08


难难晚上好，谢谢欣赏{:4_187:}

红影 发表于 2025-2-24 22:09

小辣椒 发表于 2025-2-24 21:55
亲爱的，没办法，收费空间，连接不加自己的logo，被人会拿去用，岁月的教训我得记住的。。。。。

嗯嗯，这个是必须的。打上自己的印记，这样自己也安心{:4_173:}

马黑黑 发表于 2025-2-24 22:20

小辣椒 发表于 2025-2-24 21:53
其实自己也是只能套用，许多东西不会

我封装的JS模块，应用时，在JS层面没有难度，照搬引入模块的方式之后配置几个参数而已。做贴的个性化实现完全就是CSS和HTML结合起来的就行，这些应该是你长期以来都在做的

走过岁月 发表于 2025-2-24 22:47

好美，欣赏小辣椒的作品

庶民 发表于 2025-2-25 08:01

同样的效果，很省力 的

朵拉 发表于 2025-2-25 11:51

制作漂亮，歌曲好听耶{:4_204:}

梦油 发表于 2025-2-25 14:21

小辣椒 发表于 2025-2-24 21:56
梦油晚上好，谢谢欣赏，是一个图片加上一个视频

相互之间做得很协调。

老谟深虑 发表于 2025-2-25 18:12

          制作的真美，点赞！
页: [1] 2 3 4 5
查看完整版本: 心要让你听见（合唱版） （学习黑黑三体 Opening Theme ）播放器效果