醉梦 - 欢乐水吧 - 花潮论坛 - Powered by Discuz! Archiver

马黑黑 发表于 2023-9-1 08:08

醉梦

马黑黑 发表于 2023-9-1 08:08

帖子代码
<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp2/zvmg.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; animation: fadein 1s infinite alternate var(--state); }
#papa::after { left: 170px; transform: rotateY(-180deg); }
@keyframes fadein { to {opacity: .1; } }
</style>

<div id="papa"></div>
<audio id="aud" src="https://yinpin.s3-us-east-1.ossfiles.com/zvmg.mp3" crossorigin="anonymous" autoplay loop></audio>

<script>

(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/xyanklet_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: 'top: 100px; color: #ddd; background: #000;',
player_css: `
bottom: 30px;
border-width: 0;
color: #fff;
--size: 240px;
--bRad: 64% 36% 70% 30% / 31% 20% 80% 69%;
--track: tan;
--prog: magenta;
--btnBg: linear-gradient(lime, red);
`,
lizi: { color1: '', color2: 'rgba(240,180,55,.75)' },
});
};
})();

</script>

马黑黑 发表于 2023-9-1 08:09

本帖最后由马黑黑于 2023-9-1 08:42 编辑

配置代码说明
(function() {
   let script = document.createElement('script');
   script.src = 'https://638183.freep.cn/638183/web/api/xyanklet_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: 'top: 100px; color: #ddd; background: #000;',
                     player_css: `
                           bottom: 30px;
                           border-width: 0;
                           color: #fff;
                           --size: 240px;
                           --bRad: 64% 36% 70% 30% / 31% 20% 80% 69%;
                           --track: tan;
                           --prog: magenta;
                           --btnBg: linear-gradient(lime, red);
                     `,
                     lizi: { color1: '', color2: 'rgba(240,180,55,.75)' },
            });
   };
})();
01和26行： (function(){ 代码块 })(); 是将配置的具体代码用匿名函数包裹起来，一来避免变量污染、二来是为了令评分提交后脚本仍可运行；
02-05行：以追加元素的方式加载JS插件；

06行：声明歌词同步的数组变量，留待插件配置使用；

07和25行： script.onload = () => {代码块}; 是追加的插件文档加载完毕后再写具体参数配置以免程序出错；

08和24行： HCPlayer({代码块});插件的具体参数配置写在这里的花括号内；

09行：指定帖子的主元素；

10行：指定同步歌词数组（前面声明为 geci）；

11行：设置 lrc 同步歌词UI相关（和以前的配置一脉相承）；

12行：配置全屏按钮UI；

13-22行：配置播放器，CSS属性和CSS变量较多，一一解释如下：

14行 bottom: 30px; 设置播放器的位置。本帖，帖子元素设置了所有做元素绝对居中，所以，这里只设置播放器的 bottom 属性即可；
15行 border-width: 0; 播放器边框设置，相当于脚链的穿绳，这里设置宽度为0表示不要穿绳。缺省或默认有穿绳，也可直接使用 border 属性自行设置取代本行，例如：border: 2px dashed red;
16行 color: #fff; 设置时间信息文本颜色；
17行 --size: 240px; 设置播放器宽高；
18行 --bRad: 64% 36% 70% 30% / 31% 20% 80% 69%; 设置珠子的形状，通过 border-radius 属性改变珠子外观。比如想要圆形，--bRad: 50%; ，想要树叶，-bRad: 0 100%; ，其他的，0 50% 或 50% 100% 或更复杂的都可以试试；
19行 --track: tan; 设置进度条底轨颜色；
20行 --prog: magenta; 设置进度指示颜色；
21行 --btnBg: linear-gradient(lime, red); 设置播放控制按钮背景色，支持渐变、图片，尺寸固定为40*40；
22行 lizi: { color1: '', color2: 'rgba(240,180,55,.75)' }, 设置珠子颜色的子对象，就这两个键值对，缺省或空值插件将自动分配。

梦油发表于 2023-9-1 09:37

代码，我不懂，但图美、曲好，令人陶。谢谢黑黑先生。分享了。

红影发表于 2023-9-1 10:16

黑黑厉害，把这么多内容都整合好了，还留了这么多接口{:4_199:}

红影发表于 2023-9-1 10:19

原来就是用这一圈珠子的大小变化来体现音乐的动感的，好漂亮的响应式音乐制作{:4_199:}

红影发表于 2023-9-1 10:20

笑，这个帖子还带回帖奖励的，有好代码可用，还有奖励，赚大发了{:4_172:}

红影发表于 2023-9-1 10:21

这《醉梦》真想多醉几次啊{:4_196:}

红影发表于 2023-9-1 10:22

配色也好漂亮，浅色系的珠子和灯光星光相互交映，如梦似幻的美感{:4_199:}

红影发表于 2023-9-1 10:27

好像所有的讲解中，就这个：
22行 lizi: { color1: '', color2: 'rgba(240,180,55,.75)' }, 设置珠子颜色的子对象，就这两个键值对，缺省或空值插件将自动分配。
没看懂，为什么是两个颜色？我得再看看脚链那个帖子去{:4_181:}

红影发表于 2023-9-1 10:41

红影发表于 2023-9-1 10:27
好像所有的讲解中，就这个：
22行 lizi: { color1: '', color2: 'rgba(240,180,55,.75)' }, 设置珠子颜色 ...

我知道了，color1不设置就是随机色，对应脚链里的background吧，color2对应的是脚链里的mnColor吧，是内阴影的设置{:4_173:}

非常开心 发表于 2023-9-1 11:12

融图美，场景自然和谐，歌曲动听。

非常开心 发表于 2023-9-1 11:23

代码，确实不懂，只能模仿{:4_203:}

醉美水芙蓉 发表于 2023-9-1 12:07

醉美水芙蓉 发表于 2023-9-1 12:08

醉美水芙蓉 发表于 2023-9-1 12:09

醉美水芙蓉 发表于 2023-9-1 12:10

醉美水芙蓉 发表于 2023-9-1 12:13

马黑黑 发表于 2023-9-1 12:56

醉美水芙蓉发表于 2023-9-1 12:13
好多人都喜欢隐藏代码，不让别人模仿，只有黑黑老师是公开的！再次感谢黑黑老师的代码教程！

遮遮掩掩没意思的

页: [1] 2 3 4 5 6 7 8 9 10

花潮论坛's Archiver

醉梦