殊途同归

马黑黑 发表于 2023-9-15 07:47

本帖最后由马黑黑于 2023-9-15 22:22 编辑 <br /><br /><style>
#mydiv { margin: -80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; box-shadow: 0 0 12px gray; background: url('https://638183.freep.cn/638183/t23/webp2/uttg.webp') no-repeat center/cover; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; --state: running; }
#mydiv > img { transform: translate(30px); }
</style>

<div id="mydiv">
<img src="https://638183.freep.cn/638183/t23/gif/dancing.gif" alt="" />
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1848494864" loop="loop" autoplay="autoplay"></audio>

<script>
(function() {
let js1 = 'https://638183.freep.cn/638183/web/api/meter_pinpu_lrc.js',
js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_02.js';

let loadJs = (url,callback) => {
let body = document.querySelector('body'), jsNode = document.createElement('script');
jsNode.charset = 'utf-8';
jsNode.setAttribute('src', url);
body.appendChild(jsNode);
jsNode.onload = () => callback();
};

loadJs(js1, () => {
let geci = [,];
HCPlayer({
papa: '#mydiv',
lrcAr: geci,
lrc_css: `
top: 20px;
color: lightblue;
--bg: linear-gradient(rgba(200,200,250,.25),rgba(100,200,250,.65));
`,
player_css: `
bottom: 10px;
color: snow;
z-index: 2;
`,
pinpu: { num: 40, width: 3, color: 'rgba(255,255,255,.5)' },
});
});

loadJs(js2, () => {
H5lz({
papa: '#mydiv',
total: 160,
size: {width: 16, height: 16},
shape: {background: '', borderRadius: '50%'},
maxTime: 24,
offset: {x: 0, y: 0},
ani: 'out2C',
css: 'opacity: .8;',
});
});
})();
</script>

马黑黑 发表于 2023-9-15 07:49

如果没有看到粒子效果，按一下 Ctrl + F5 ，这是为了更新缓存中的插件资源，按 Ctrl + F5 是硬刷新。

马黑黑 发表于 2023-9-15 07:50

本帖测试粒子插件的第六种运动形态：从外面旋转进入帖子中心处。帖子代码——
<style>
#mydiv { margin: 100px auto; width: 1024px; height: 640px; box-shadow: 0 0 12px gray; background: url('https://638183.freep.cn/638183/t23/webp2/uttg.webp') no-repeat center/cover; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; --state: running; }
#mydiv > img { transform: translate(30px); }
</style>

<div id="mydiv">
<img src="https://638183.freep.cn/638183/t23/gif/dancing.gif" alt="" />
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1848494864" loop="loop" autoplay="autoplay"></audio>

<script>
(function() {
let js1 = 'https://638183.freep.cn/638183/web/api/meter_pinpu_lrc.js',
js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_02.js';

let loadJs = (url,callback) => {
let body = document.querySelector('body'), jsNode = document.createElement('script');
jsNode.charset = 'utf-8';
jsNode.setAttribute('src', url);
body.appendChild(jsNode);
jsNode.onload = () => callback();
};

loadJs(js1, () => {
let geci = [,];
HCPlayer({
papa: '#mydiv',
lrcAr: geci,
lrc_css: `
top: 20px;
color: lightblue;
--bg: linear-gradient(rgba(200,200,250,.25),rgba(100,200,250,.65));
`,
player_css: `
bottom: 10px;
color: snow;
`,
pinpu: { num: 40, width: 3, color: 'rgba(255,255,255,.5)' },
});
});

loadJs(js2, () => {
H5lz({
papa: '#mydiv',
total: 160,
size: {width: 16, height: 16},
shape: {background: '', borderRadius: '50%'},
maxTime: 24,
offset: {x: 0, y: 0},
ani: 'out2C',
css: 'opacity: .8;',
});
});
})();
</script>

马黑黑 发表于 2023-9-15 07:58

粒子配置说明：

H5lz({
papa: '#mydiv', /* 指定父元素 */
total: 160, /* 粒子总数 */
size: {width: 16, height: 16}, /* 粒子宽高 */
shape: {background: '', borderRadius: '50%'}, /* 粒子形状（缺省或空值使用插件默认值） */
maxTime: 24, /* 运动周期最高时长 */
offset: {x: 0, y: 0}, /* 纵横偏移量，第五、六种运动形态忽略此设置 */
ani: 'out2C', /* 关键帧动画名称（由插件定义，请参阅 H5粒子插件 (52qingyin.cn) ） */
css: 'opacity: .8;', /* 辅助CSS样式，此处是透明度设置 */
});

上海朝阳 发表于 2023-9-15 08:54

哈哈哈，我是进来看到杰克逊的招牌动作在你头像哪里跳舞，主面空白，便换极速出现了画面，美极了。

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

又是一个新的效果，这次的粒子万流归海，是往内部去的，太棒了{:4_199:}

红影发表于 2023-9-15 10:26

这个跳舞小人看得笑喷，头一次看到黑黑做这么使劲锻炼的帖子，比擦地板可累多了{:4_173:}

红影发表于 2023-9-15 10:30

马黑黑发表于 2023-9-15 07:58
粒子配置说明：

H5lz({

去学习了一下：
④ shape

配置粒子形状，值为 Object 对象，共两个键值对，健名是 background 和 borderRadius（注意大小写）。其中，background 是粒子的背景设置，支持颜色表达、渐变背景、图片背景；borderRadius 对应 CSS的 border-radius 属性。键值均为字符串值。

图片怎么放？上个帖子我本来想直接换个米粒的，结果图片放不进不去，后来只能去渐变色来模仿大米了{:4_173:}

红影发表于 2023-9-15 10:31

只要换ani: 'out2C', 的内容，就能得到各种粒子效果，这个太厉害了{:4_199:}

马黑黑 发表于 2023-9-15 10:48

红影发表于 2023-9-15 10:31
只要换ani: 'out2C', 的内容，就能得到各种粒子效果，这个太厉害了

名称是插件预设和指定的，目前共六种

马黑黑 发表于 2023-9-15 10:50

红影发表于 2023-9-15 10:30
去学习了一下：
④ shape

你能用渐变背景，用图片就不应该是问题：

shape: {background: 'url("图片地址")', borderRadius: '0'},

要注意的是单引号和双引号的使用。

马黑黑 发表于 2023-9-15 10:51

红影发表于 2023-9-15 10:26
这个跳舞小人看得笑喷，头一次看到黑黑做这么使劲锻炼的帖子，比擦地板可累多了
这是塑身运动

马黑黑 发表于 2023-9-15 10:52

红影发表于 2023-9-15 10:22
又是一个新的效果，这次的粒子万流归海，是往内部去的，太棒了

和第五个效果刚好反向

马黑黑 发表于 2023-9-15 10:53

上海朝阳发表于 2023-9-15 08:54
哈哈哈，我是进来看到杰克逊的招牌动作在你头像哪里跳舞，主面空白，便换极速出现了画面，美极了。

上午好。

我的东东，不兼容IE所使用的内核，所以必须使用当代浏览器才能看到效果。顺便提一下：IE已经退出历史舞台。

醉美水芙蓉 发表于 2023-9-15 12:06

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

马黑黑 发表于 2023-9-15 12:20

醉美水芙蓉发表于 2023-9-15 12:08
来首迈克杰克逊的舞曲更漂亮了！

那个太激烈了

马黑黑 发表于 2023-9-15 12:21

醉美水芙蓉发表于 2023-9-15 12:06
黑黑老师这个效果好，有种粒粒归仓的意思，要是飞的是钞票，那黑黑老师有花不完的钱💰了！

钱钱乃身外之物，合适就好

醉美水芙蓉 发表于 2023-9-15 17:25

马黑黑 发表于 2023-9-15 17:42

醉美水芙蓉发表于 2023-9-15 17:25
老师说得是，但没有钱也不行，什么都干不了，连吃喝玩乐都成问题！

那是，所以说合适就好

页: [1] 2 3 4

花潮论坛's Archiver

殊途同归