黑暗战役B

马黑黑 发表于 2025-4-27 08:46

马黑黑 发表于 2025-4-27 08:46

<div id="hEdiv"><pre id="hEpre">
<style>
@import 'https://638183.freep.cn/638183/web/ku/hc_player3in1.css';
#papa { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1600px); height: auto; aspect-ratio: 16/9; background: #000 url('https://638183.freep.cn/638183/t24/webp3/havy.webp') no-repeat center/cover; animation: flashing .2s linear infinite alternate var(--state); }
#mplayer { bottom: 20px; }
#fsbtn { top: 30px; }
.vid { opacity: .5; }
@keyframes flashing {
0% { filter: brightness(.5); }
100% { filter: brightness(1); }
}
</style>

<div id="papa" class="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1488360994" autoplay loop></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/10/06/39/video6365c52f94302.mp4" autoplay loop muted></video>
</div>

<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hc_player3in1.js';
import { h5lz } from 'https://638183.freep.cn/638183/web/ku/h5lz.js';
hcplay(papa);
var lzConfig = {
papa: '#papa',
total: 100,
size: {width: 10, height: 10},
shape: {background: 'white', borderRadius: '50% 0'},
ani: 'toBottom',
maxTime: 40,
offset: {x: -200, y: -200}
};
h5lz(lzConfig);
</script>
</pre></div>

<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
</script>

马黑黑 发表于 2025-4-27 08:46

本帖最后由马黑黑于 2025-4-27 09:34 编辑

hc_player3in1，基于花潮格式LRC歌词同步封装的花潮音频播放器，而此前推出的 hcplayer3in1 基于原生LRC歌词同步，这是二者的区别。文件名书写上，花朝格式的有一个 _ ，原生的没有。

3in1 就是三合一：纯音、横排歌词、竖排歌词。

纯音：

参照本帖代码，关键在 21 行， hcplay(papa); ，函数传参只有一个 papa，帖子主元素的 id 标识；

歌词横排：

CSS 代码中加入 #lrcDiv { ... } 属性，主要用于定位，left、top 之类的，也可以参考以前的同类插件自定义文本颜色等。

JS代码中，hcplay 函数加一个传参， hcplay(papa, geci); ，其中，geci 是花朝格式LRC歌词变量，需要实现声明该变量并给它赋值，例如下面的代码示例——

var geci = [ , , ];
hcplay(papa, geci);

竖排歌词：

在横排歌词的基础上，在帖子 CSS 代码中的 #lrcDiv 加入:

#lrcDiv { writing-mode: vertical-rl; }

马黑黑 发表于 2025-4-27 08:47

本帖最后由马黑黑于 2025-4-27 09:53 编辑

h5粒子是之前做的插件，这里已经改为了ES6模块，使用起来更方便。

首先，需要引入模块：

import { h5lz } from 'https://638183.freep.cn/638183/web/ku/h5lz.js';

接着，配置粒子属性：

var lzConfig = {
papa: '#papa', /* 给出帖子元素连同 # 号的id名称 */
total: 100,/* 粒子数量 */
size: {width: 10, height: 10},/* 粒子宽高尺寸 */
shape: {background: 'white', borderRadius: '50% 0'}, /* 粒子背景和形状：本行不要或引号内啥也没有的话使用默认值 */
ani: 'toBottom',/* 粒子运行方向，可选值还有：toTop, toRight, toLeft */
maxTime: 40,/* 粒子运动一个周期的最大秒数 */
offset: {x: -200, y: -200}/* 粒子运动偏移量：粒子从出发的地方到结束的地方，xy方向各自偏移多少像素 */
};

最后，运行函数，把声明的参数带上：

h5lz(lzConfig) ;

除帖子元素必须存在外，其余属性配置可以省略，这将使用模块的默认配置，所以最简单的粒子配置无需声明属性配置，如下：

h5lz({papa: '#papa'});

梦江南 发表于 2025-4-27 09:33

震撼！{:4_187:}

红影发表于 2025-4-27 11:17

这个的背景图、视频以及音乐配置得特别好，让人感受到战争的残酷。
非常赞的制作{:4_199:}

红影发表于 2025-4-27 11:20

这个还增加了明暗闪动的设计，特别适合主题。还有h5粒子的加持，让帖子更震撼{:4_199:}

红影发表于 2025-4-27 11:21

这个封装是花潮格式的封装了，更好了，可以有逐字高亮了{:4_199:}

红影发表于 2025-4-27 11:22

这个帖子里这么多好东西，真的太好了，帖子本身也这么精美，太赞了{:4_199:}{:4_199:}{:4_199:}

红影发表于 2025-4-27 11:23

很令人惊心动魄的血与火的洗礼{:4_187:}

马黑黑 发表于 2025-4-27 12:11

梦江南发表于 2025-4-27 09:33
震撼！

{:4_191:}

马黑黑 发表于 2025-4-27 12:11

红影发表于 2025-4-27 11:17
这个的背景图、视频以及音乐配置得特别好，让人感受到战争的残酷。
非常赞的制作

中午嚎

马黑黑 发表于 2025-4-27 13:02

红影发表于 2025-4-27 11:21
这个封装是花潮格式的封装了，更好了，可以有逐字高亮了

横排歌词演示：http://mahei.ccccocccc.cc/art/?st=1745540406&id=1745540406

红影发表于 2025-4-27 13:42

马黑黑发表于 2025-4-27 12:11
中午嚎

嗯嗯，中午嚎没事，不会影响邻居，除了办公室的人{:4_173:}

红影发表于 2025-4-27 13:43

马黑黑发表于 2025-4-27 13:02
横排歌词演示：http://mahei.ccccocccc.cc/art/?st=1745540406&id=1745540406

看到了，黑黑把粒子也调整了，漂亮{:4_187:}

冬天的雨 发表于 2025-4-27 20:47

马老师又一个精美的特效制作

冬天的雨 发表于 2025-4-27 20:48

这个加了粒子效果，看了说明还可以自己添加效果{:4_199:}

冬天的雨 发表于 2025-4-27 20:49

震撼的画面效果，音乐也是配的绝，马老师好分享{:4_178:}

马黑黑 发表于 2025-4-27 21:37

冬天的雨发表于 2025-4-27 20:49
震撼的画面效果，音乐也是配的绝，马老师好分享

晚上嚎

马黑黑 发表于 2025-4-27 21:42

红影发表于 2025-4-27 13:43
看到了，黑黑把粒子也调整了，漂亮

随即颜色是默认设置

页: [1] 2 3 4 5 6

花潮论坛's Archiver

黑暗战役B