论坛 › 欢乐水吧 › Don't Say No

马黑黑 发表于 2023-8-7 12:17

Don't Say No

<style>
#papa { margin: 0 0 0 calc(50% - 681px); width: 1200px; height: 750px; background: url('https://638183.freep.cn/638183/t23/webp1/lp.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#papa::before, #papa::after { position: absolute; content: ''; width: 100px; height: 100px; top: 5px; border-radius: 50%; -webkit-box-reflect: below 540px linear-gradient(to bottom, transparent, rgba(255,255,255,.5)); animation: move 6s infinite linear var(--state); }
#papa::before { left: 5px; background: repeating-linear-gradient( to top right, transparent, transparent 5px, rgba(255,255,255,.7) 5px, rgba(255,255,255,.5) 10px, transparent 10px, transparent 15px ); background-size: 200%; }
#papa::after { right: 5px; background: repeating-linear-gradient( to bottom right, transparent, transparent 5px, rgba(255,255,255,.7) 5px, rgba(255,255,255,.5) 10px, transparent 10px, transparent 15px ); background-size: 200%; }
@keyframes move { from { background-position: top right; } to { background-position: bottom left; } }
</style>

<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=22651392" autoplay loop></audio>

马黑黑 发表于 2023-8-7 12:18

<style>
#codePre { font: normal 14px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; }
.zhushi { color: green; }
</style>

<pre id="codePre">

配置代码：

&lt;script&gt;

(function() {
    let script = document.createElement('script');
    script.src = 'https://638183.freep.cn/638183/web/api/meter_pinpu_lrc.js';
    script.charset = 'utf-8';
    document.head.appendChild(script);
    let geci = [ ];
    window.onload = () => {
      HCPlayer({
            papa: '#papa',
            lrcAr: geci,
            lrc_css: `
                top: 20px;
                right: 200px;
                color: lightblue;
                --bg: linear-gradient(rgba(200,200,250,.25),rgba(100,200,250,.65));
            `,
            player_css: `
                bottom: 10px;
                left: 140px;
                color: snow;
            `,
            <span class="zhushi">/* 频谱设置 num - 频谱数; width - 频谱条宽; color - 频谱条颜色（不要 color 则去随机颜色）*/</span>
            pinpu: { num: 40, width: 3, color: 'rgba(255,255,255,.5)' },
      });
    }
})();

&lt;/script&gt;

</pre>

<script>

let runCodes = (str) => {
    let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
    let js_str = str.match(reg);
    js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
    let func = new Function(js_str);
    func();
};

runCodes(codePre.innerText);

</script>

马黑黑 发表于 2023-8-7 12:23

本帖演示 meter 标签进度条+频谱按钮播放器插件封装，带lrc歌词。

频谱的设置，提供三个参数，每一个参数都是可选参数。比如只想设置频谱数，则：

    pinpu: {num: 60},

或要设置频谱数和频谱条的宽度：

    pinpu: {num: 30, width: 4},

上面听到的这两个参数，键值都是纯数字。color 设置频谱颜色，若设置，需要将键值写在小角引号了。

花飞飞 发表于 2023-8-7 13:22

这个画面好清爽！

花飞飞 发表于 2023-8-7 13:25

管状和柱状频谱结合起来，这是打包了个新的小播吧……
两个小圆斜线渐变，很漂亮……

花飞飞 发表于 2023-8-7 13:27

进度条填充色最后会改变……

红影 发表于 2023-8-7 14:57

带进度条的频谱播放器，漂亮。黑黑又一个新的打包上传效果。帖子里的音乐节奏很舒服{:4_199:}

红影 发表于 2023-8-7 15:00

四角的圆形变幻效果也很惊艳。两个的颜色和动态方向还不一样的。漂亮{:4_187:}

马黑黑 发表于 2023-8-7 18:06

红影 发表于 2023-8-7 14:57
带进度条的频谱播放器，漂亮。黑黑又一个新的打包上传效果。帖子里的音乐节奏很舒服

meter进度条是以前封装过的插件，这里只是修改、打包，没有全新做。

马黑黑 发表于 2023-8-7 18:08

红影 发表于 2023-8-7 15:00
四角的圆形变幻效果也很惊艳。两个的颜色和动态方向还不一样的。漂亮

上边两个角的圆形元素是主元素的伪元素，它们设置的背景色是一样的，由于有透明度，它们下面的背景色会影响到它们自身的背景图案；下边两个角落的圆形图案是上边的圆形图案的倒影，基于Chromium的浏览器可以看到，其他内核的浏览器看不到。

马黑黑 发表于 2023-8-7 18:08

花飞飞 发表于 2023-8-7 13:22
这个画面好清爽！

清清爽爽干干净净

马黑黑 发表于 2023-8-7 18:09

花飞飞 发表于 2023-8-7 13:27
进度条填充色最后会改变……

这是meter的特征

马黑黑 发表于 2023-8-7 18:09

花飞飞 发表于 2023-8-7 13:25
管状和柱状频谱结合起来，这是打包了个新的小播吧……
两个小圆斜线渐变，很漂亮……

之前发不过的插件，只是当时直接使用，不是封装成文件

醉美水芙蓉 发表于 2023-8-7 18:13

马黑黑 发表于 2023-8-7 19:09

醉美水芙蓉 发表于 2023-8-7 18:13
整个画面干净漂亮！

晚上好

花飞飞 发表于 2023-8-7 20:19

马黑黑 发表于 2023-8-7 18:08
清清爽爽干干净净

透亮之极。。。喜欢。。{:4_173:}

花飞飞 发表于 2023-8-7 20:20

马黑黑 发表于 2023-8-7 18:09
这是meter的特征

{:4_173:}反正挺好看。。

花飞飞 发表于 2023-8-7 20:21

马黑黑 发表于 2023-8-7 18:09
之前发不过的插件，只是当时直接使用，不是封装成文件

对我来说是新的。。。
明白了现在把之前没有封起来的逐渐打包。。。

马黑黑 发表于 2023-8-7 20:53

花飞飞 发表于 2023-8-7 20:21
对我来说是新的。。。
明白了现在把之前没有封起来的逐渐打包。。。

就是，过去做的，代码直接用在帖子里，现在做的，引用就好

马黑黑 发表于 2023-8-7 20:54

花飞飞 发表于 2023-8-7 20:20
反正挺好看。。

HTML5封装的标签，使用的人不多

查看完整版本: Don't Say No