马黑黑 发表于 2023-8-8 08:31

筝鸣

<style>
#papa { margin: 0 0 0 calc(50% - 681px); width: 1200px; height: 800px; background: url('https://638183.freep.cn/638183/t23/3/lkp.jpg') 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: url('https://638183.freep.cn/638183/Pic/81/bird3.gif'); top: 5px; animation: move1 6s infinite linear var(--state); }
#papa::before { left: 5px; }
#papa::after { right: 5px; }
@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=1300995139" autoplay loop></audio>

马黑黑 发表于 2023-8-8 08:35

本帖最后由 马黑黑 于 2023-8-8 08:39 编辑 <br /><br /><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/ewave_lrc.js';
    script.charset = 'utf-8';
    document.head.appendChild(script);
    let geci = [ ];
    window.onload = () => {
      HCPlayer({
            papa: '#papa',
            lrcAr: geci,
            lrc_css: `
                top: 20px;
                color: lightblue;
                --bg: linear-gradient(rgba(200,200,250,.25),rgba(100,200,250,.65));
            `,
            player_css: `
                    top: 130px;
                transform: rotate(45deg); <span class="zhushi">/* 播放器旋转 */</span>
                --bg: rgb(100,200,250,.75);
                --br: 20%; <span class="zhushi">/* 圆角设置 50%为圆形，0% 为矩形 */</span>
            `,
            fs_css: `top: 50%;`,
      });
    }
})();

&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-8 08:49

漂亮！{:4_204:}

马黑黑 发表于 2023-8-8 09:26

东篱闲人 发表于 2023-8-8 08:49
漂亮！

音画帖还是建议你使用插件方式，需要鼓捣的代码不多，一般只是做些简单配置，学习成本偏低。参考条目（我会完善）：

http://mhh.52qingyin.cn/art/?id=1

东篱闲人 发表于 2023-8-8 09:38

马黑黑 发表于 2023-8-8 09:26
音画帖还是建议你使用插件方式，需要鼓捣的代码不多，一般只是做些简单配置，学习成本偏低。参考条目（我 ...

对的。。。

红影 发表于 2023-8-8 09:40

马黑黑 发表于 2023-8-8 09:26
音画帖还是建议你使用插件方式，需要鼓捣的代码不多，一般只是做些简单配置，学习成本偏低。参考条目（我 ...
原来黑黑在自己那里做了汇总，而且都是剥离出来的。{:4_199:}

马黑黑 发表于 2023-8-8 09:40

红影 发表于 2023-8-8 09:40
原来黑黑在自己那里做了汇总

不全

红影 发表于 2023-8-8 09:45

方形的嵌套频谱，真漂亮。{:4_199:}暂停就全缩回去了。要是能停在最后的扩展处岂不更好{:4_204:}

红影 发表于 2023-8-8 09:46

马黑黑 发表于 2023-8-8 09:40
不全

你那里的效果怎么调用那么快，这里的效果出来总有点滞后呢。

花飞飞 发表于 2023-8-8 10:01

这个我又没有见过，新的封装。。{:4_199:}

花飞飞 发表于 2023-8-8 10:02

封装后的代码实在是简洁之极。。。{:4_170:}

马黑黑 发表于 2023-8-8 10:26

红影 发表于 2023-8-8 09:45
方形的嵌套频谱，真漂亮。暂停就全缩回去了。要是能停在最后的扩展处岂不更好

这个设计理念不同，就是酱紫

马黑黑 发表于 2023-8-8 10:26

花飞飞 发表于 2023-8-8 10:02
封装后的代码实在是简洁之极。。。

还好

马黑黑 发表于 2023-8-8 10:27

花飞飞 发表于 2023-8-8 10:01
这个我又没有见过，新的封装。。

早期插件之一，当时收录木有不记得了，现在略作修改

马黑黑 发表于 2023-8-8 10:28

红影 发表于 2023-8-8 09:46
你那里的效果怎么调用那么快，这里的效果出来总有点滞后呢。

论坛要加载的东西偏多，加之数据库的读取速度不是很好，而插件是在页面加载完毕之后才能工作，所以会有些速度上的差异。

马黑黑 发表于 2023-8-8 10:29

红影 发表于 2023-8-8 09:45
方形的嵌套频谱，真漂亮。暂停就全缩回去了。要是能停在最后的扩展处岂不更好

可以弄成圆形的，--br 变量管这个形状

红影 发表于 2023-8-8 15:28

马黑黑 发表于 2023-8-8 10:26
这个设计理念不同，就是酱紫

嗯嗯，很漂亮呢{:4_187:}

红影 发表于 2023-8-8 15:34

马黑黑 发表于 2023-8-8 10:28
论坛要加载的东西偏多，加之数据库的读取速度不是很好，而插件是在页面加载完毕之后才能工作，所以会有些 ...
对了，我去pencilcode里试验，怎么看不到效果啊。不是这个，我是说一次去那试验，不是快慢问题了，直接看不到封装后的效果。上次就想问了，忘记了{:4_173:}

红影 发表于 2023-8-8 15:36

马黑黑 发表于 2023-8-8 10:29
可以弄成圆形的，--br 变量管这个形状

圆形的看到过啊，这个形状没看到过。挺好的{:4_204:}

花飞飞 发表于 2023-8-8 19:03

马黑黑 发表于 2023-8-8 10:27
早期插件之一，当时收录木有不记得了，现在略作修改

看来库存很多……慢慢学习。。{:4_173:}
页: [1] 2 3 4 5 6 7
查看完整版本: 筝鸣