殊途同归

马黑黑

马黑黑

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

马黑黑

本帖测试粒子插件的第六种运动形态：从外面旋转进入帖子中心处。帖子代码——

1. <style>
   
2. #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; }
   
3. #mydiv > img { transform: translate(30px); }
   
4. </style>
   
5. 
   
6. <div id="mydiv">
   
7.         <img src="https://638183.freep.cn/638183/t23/gif/dancing.gif" alt="" />
   
8. </div>
   
9. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1848494864" loop="loop" autoplay="autoplay"></audio>
   
10. 
    
11. <script>
    
12. (function() {
    
13.         let js1 = 'https://638183.freep.cn/638183/web/api/meter_pinpu_lrc.js',
    
14.                 js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_02.js';
    
15. 
    
16.         let loadJs = (url,callback) => {
    
17.                 let body = document.querySelector('body'), jsNode = document.createElement('script');
    
18.                 jsNode.charset = 'utf-8';
    
19.                 jsNode.setAttribute('src', url);
    
20.                 body.appendChild(jsNode);
    
21.                 jsNode.onload = () => callback();
    
22.         };
    
23. 
    
24.         loadJs(js1, () => {
    
25.                 let geci = [[2,"殊途同归",4],[7,"",1]];
    
26.                 HCPlayer({
    
27.                         papa: '#mydiv',
    
28.                         lrcAr: geci,
    
29.                         lrc_css: `
    
30.                                 top: 20px;
    
31.                                 color: lightblue;
    
32.                                 --bg: linear-gradient(rgba(200,200,250,.25),rgba(100,200,250,.65));
    
33.                         `,
    
34.                         player_css: `
    
35.                                 bottom: 10px;
    
36.                                 color: snow;
    
37.                         `,
    
38.                         pinpu: { num: 40, width: 3, color: 'rgba(255,255,255,.5)' },
    
39.                 });
    
40.         });
    
41. 
    
42.         loadJs(js2, () => {
    
43.                 H5lz({
    
44.                         papa: '#mydiv',
    
45.                         total: 160,
    
46.                         size: {width: 16, height: 16},
    
47.                         shape: {background: '', borderRadius: '50%'},
    
48.                         maxTime: 24,
    
49.                         offset: {x: 0, y: 0},
    
50.                         ani: 'out2C',
    
51.                         css: 'opacity: .8;',
    
52.                 });
    
53.         });
    
54. })();
    
55. </script>

复制代码

马黑黑

粒子配置说明：

        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 07:58
粒子配置说明：

        H5lz({

去学习了一下：
④ shape

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

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

红影

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

马黑黑

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

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

马黑黑

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

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

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

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

马黑黑

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

这是塑身运动

马黑黑

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

和第五个效果刚好反向

马黑黑

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

上午好。

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

马黑黑

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

那个太激烈了

马黑黑

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

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

马黑黑

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

那是，所以说合适就好