红影 发表于 2023-8-25 11:04

《且试天下》（学习黑黑示波效果插件）

<style>
#papa { margin: 80px 0 0 calc(50% - 593px); width: 1024px; height: 576px; background: url('https://pic.imgdb.cn/item/64e77035661c6c8e54c23ecc.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; z-index: 1; position: relative; --state: running; overflow: hidden; }
#pic{ position: absolute; left: 100px; top: 36px; width: 332px; height: 276px; opacity: .95; }
#pic1{ position: absolute; right: 90px; top: 36px; width: 332px; height: 276px; opacity: .35; }
</style>
<div id="papa">
<img id="pic" src="https://pic.imgdb.cn/item/64e77063661c6c8e54c28c27.gif" alt="" />
<img id="pic1" src="https://pic.imgdb.cn/item/64e77063661c6c8e54c28c27.gif" alt="" />
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/07/18/15f2c6b6b26274b95f5ceb1e33845be8.mp3" autoplay loop></audio>
<script>
(function() {
    let script = document.createElement('script');
    script.src = 'https://638183.freep.cn/638183/web/api/osc_lrc.js';
    script.charset = 'utf-8';
    document.head.appendChild(script);
let geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
   script.onload = () => {
       HCPlayer({
        papa: '#papa', /* 宿主元素 */
        lrcAr: geci, /* 歌词 */
        lrc_css: `
                top: 20px; /* 位置 */
                color: lightblue; /* 歌词底色 */
                --bg: linear-gradient(rgba(255,255,219,.45),rgba(255,255,219,.9));/* 歌词同步颜色 */
        `,
        player_css: `
                bottom: 20px; /* 位置 */
                --track: SkyBlue; /* 底轨颜色 */
                --prog: LightGoldenrodYellow; /* 进度颜色 */
                --ww: 240px; /* 示波宽度 */
        `,
        fs_css: 'left: -100px; top: 10px; --color: #eee; --bg: #333;', /* 全屏按钮 */
      });
   };
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>

红影 发表于 2023-8-25 11:07

用黑黑的插件做帖子真方便，我做帖子这么慢的人，也可以随手就做了。
把黑黑的插件汇总这里再黏贴一下，空了继续去使用
http://mhh.52qingyin.cn/api/player/

红影 发表于 2023-8-25 11:10

一首古风歌曲送给大家。这个示波效果正好可以呼应月亮在水中有些扭曲的倒影，这张图图不算清晰，就为了这个月亮倒影选的这个图图@马黑黑这个示波进度插件我用得还可以吧{:4_173:}

红影 发表于 2023-8-25 11:12

哦，想起来了，好像有个地址能把图片变清晰的，忘了这个就用了个不清晰的，大意了。

醉美水芙蓉 发表于 2023-8-25 11:56

马黑黑 发表于 2023-8-25 12:04

红影 发表于 2023-8-25 11:07
用黑黑的插件做帖子真方便，我做帖子这么慢的人，也可以随手就做了。
把黑黑的插件汇总这里再黏贴一下，空 ...

这个示波播放器，用在此处显得宁静，宁静中又有所期盼，挺好的

小辣椒 发表于 2023-8-25 12:13

这个示波播放器我好像做过的，插件的感觉可以秒做的

小辣椒 发表于 2023-8-25 12:14

欣赏亲爱的精彩的制作{:4_199:}

红影 发表于 2023-8-25 19:22

醉美水芙蓉 发表于 2023-8-25 11:56
很漂亮！欣赏了！

多谢水芙蓉美女鼓励{:4_187:}

红影 发表于 2023-8-25 19:23

马黑黑 发表于 2023-8-25 12:04
这个示波播放器，用在此处显得宁静，宁静中又有所期盼，挺好的

特意选了这个图图，觉得挺适合示波进度的样子的{:4_173:}

红影 发表于 2023-8-25 19:23

小辣椒 发表于 2023-8-25 12:13
这个示波播放器我好像做过的，插件的感觉可以秒做的

是啊，有插件可用真的太好了{:4_173:}

红影 发表于 2023-8-25 19:24

小辣椒 发表于 2023-8-25 12:14
欣赏亲爱的精彩的制作

抱抱亲爱的，好有好几个插件没做呢，争取都做一下{:4_173:}

千羽 发表于 2023-8-25 19:32

这个示波放在水面挺好的，两色增添了视觉效果{:4_187:}

千羽 发表于 2023-8-25 19:32

问好影儿，周末快乐{:4_187:}

马黑黑 发表于 2023-8-25 20:30

红影 发表于 2023-8-25 19:23
特意选了这个图图，觉得挺适合示波进度的样子的

眼光不错

红影 发表于 2023-8-25 20:34

千羽 发表于 2023-8-25 19:32
这个示波放在水面挺好的，两色增添了视觉效果

谢谢羽儿鼓励，黑黑有好多个插件呢，羽儿一起来玩啊{:4_173:}

红影 发表于 2023-8-25 20:35

千羽 发表于 2023-8-25 19:32
问好影儿，周末快乐

抱抱羽儿，一起快乐{:4_179:}

红影 发表于 2023-8-25 20:37

马黑黑 发表于 2023-8-25 20:30
眼光不错

颜色还是配得不行，要是跟那倒影再协调点就好了。可惜我调色差劲{:4_173:}

马黑黑 发表于 2023-8-25 20:45

红影 发表于 2023-8-25 20:37
颜色还是配得不行，要是跟那倒影再协调点就好了。可惜我调色差劲

颜色的调配靠感悟和灵感

红影 发表于 2023-8-25 22:17

马黑黑 发表于 2023-8-25 20:45
颜色的调配靠感悟和灵感

我最缺的就是这个{:4_173:}
页: [1] 2
查看完整版本: 《且试天下》（学习黑黑示波效果插件）