风云 - 音乐沙龙 - 花潮论坛 - Powered by Discuz! Archiver

马黑黑 发表于 2023-8-30 07:58

风云

马黑黑 发表于 2023-8-30 07:59

帖子代码
<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp2/fgyy.webp') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; 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/t22/gif/star.gif'); top: 0; left: 0; mix-blend-mode: screen; }
#papa::after { left: 170px; transform: rotateY(-180deg); }
#papa > img { position: absolute; bottom: 0; left: 0; mix-blend-mode: screen; }
#papa > img:nth-of-type(2) { left: 170px; transform: rotateY(-180deg); }
</style>

<div id="papa">
<img src="https://638183.freep.cn/638183/t22/gif/star.gif" alt="" />
<img alt="" src="https://638183.freep.cn/638183/t22/gif/star.gif" />
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=201876" autoplay loop></audio>

<script>

(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/oscpp_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
let geci = [ , ];
script.onload = () => {
HCPlayer({
papa: '#papa',
lrcAr: geci,
lrc_css: 'top: 20px;',
fs_css: 'color: lightblue; background: navy;',
player_css: `
bottom: 10px;
--discBg: radial-gradient(red,transparent), conic-gradient(red, magenta, blue, aqua, lime, yellow, red);
--discSize: 30px;
--hh: 120px;
`,
pinpu: {num: 160, size: 2, gap: 0, color1: 'blue', color2: 'lightblue'},
});
};
})();

</script>

马黑黑 发表于 2023-8-30 08:09

本帖最后由马黑黑于 2023-8-30 08:10 编辑

播放器插件：https://638183.freep.cn/638183/web/api/oscpp_lrc.js

播放器配置：

（一）player_css

--discBg: 配置播放按钮样式，可用背景图片、渐变背景；
--discSize: 按钮尺寸；
--hh: 频谱所在区域总高度；

【附】播放器的宽度不用设置，将由频谱宽度及间距、按钮尺寸等共同影响。

（二）频谱子对象 pinpu: {...}

num: 频谱条数，数值;
size: 频谱宽度，数值；
gap: 频谱间距，数值；
color1 和 color2: 分别是频谱条的中间颜色和两头颜色，字符串值。缺省或控制将使用随机颜色。

山里人 发表于 2023-8-30 08:17

频谱漂亮，又有新作品了

亦是金 发表于 2023-8-30 08:36

漂亮的频谱。谢谢老师的代码，又可以套用了，真好！！！{:4_205:}

红影发表于 2023-8-30 09:23

黑黑把这个又封装成插件了，真好。这个播放器真漂亮{:4_199:}

红影发表于 2023-8-30 09:25

这个帖子对那闪烁的星星的处理也很值得学习，知道怎样添加多个动图来美化帖子了。帖子里的好东西多多。而且代码简单，便于操作{:4_199:}

红影发表于 2023-8-30 09:27

这个插件的控制接口很完备，又这么多接口足够用了呢，太好了{:4_199:}

小辣椒 发表于 2023-8-30 11:23

这个加了转盘了，更加漂亮了{:4_178:}

小辣椒 发表于 2023-8-30 11:24

这个背景好炫的，手机看光感非常的漂亮

小辣椒 发表于 2023-8-30 11:26

马黑黑发表于 2023-8-30 08:09
播放器插件：https://638183.freep.cn/638183/web/api/oscpp_lrc.js

播放器配置：

黒黑设计太完美了，晚上学习做一个{:4_199:}

马黑黑 发表于 2023-8-30 11:53

小辣椒发表于 2023-8-30 11:26
黒黑设计太完美了，晚上学习做一个

非响应式的频谱其实不好调

马黑黑 发表于 2023-8-30 11:53

山里人发表于 2023-8-30 08:17
频谱漂亮，又有新作品了

中午好

马黑黑 发表于 2023-8-30 11:54

亦是金发表于 2023-8-30 08:36
漂亮的频谱。谢谢老师的代码，又可以套用了，真好！！！

{:4_191:}

马黑黑 发表于 2023-8-30 11:54

红影发表于 2023-8-30 09:23
黑黑把这个又封装成插件了，真好。这个播放器真漂亮

看着还行

马黑黑 发表于 2023-8-30 11:55

红影发表于 2023-8-30 09:25
这个帖子对那闪烁的星星的处理也很值得学习，知道怎样添加多个动图来美化帖子了。帖子里的好东西多多。而且 ...

简单的东东未必都不是好东东{:4_170:}

马黑黑 发表于 2023-8-30 11:56

红影发表于 2023-8-30 09:27
这个插件的控制接口很完备，又这么多接口足够用了呢，太好了

感觉接口偏多了

马黑黑 发表于 2023-8-30 11:57

小辣椒发表于 2023-8-30 11:23
这个加了转盘了，更加漂亮了

支持图片，比如你可以放一朵梅花：

--discBg: url('图片地址') no-repeat center/cover;

使用图片是，可以适当将 size 尺寸设置大一点，50之内应该可以的

马黑黑 发表于 2023-8-30 11:58

小辣椒发表于 2023-8-30 11:24
这个背景好炫的，手机看光感非常的漂亮

背景图好

小辣椒 发表于 2023-8-30 12:52

马黑黑发表于 2023-8-30 11:53
非响应式的频谱其实不好调

那我危险了，一下子做不好了，只能套用了

页: [1] 2 3 4 5 6

花潮论坛's Archiver

风云