旋涡（测试h5粒子动画5）

马黑黑

马黑黑

因为JS资源有所改变，如果此前打开过论坛中使用过此资源的帖子，请按以下 Ctrl + F5 刷新帖子，这样就可以看到效果。

马黑黑

帖子代码

1. <style>
   
2. #mydiv { margin: 0 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 640px; box-shadow: 0 0 12px gray; background: url('https://638183.freep.cn/638183/t23/webp2/xrwo.webp') no-repeat center/cover; overflow: hidden; z-index: 1; position: relative; --state: running; }
   
3. </style>
   
4. 
   
5. <div id="mydiv"></div>
   
6. <audio id="aud" src="https://file.uhsea.com/2309/f771566dbcbb1038ed45fbe2c5624bceCN.mp3" loop autoplay></audio>
   
7. 
   
8. <script>
   
9. 
   
10. let js1 = 'https://638183.freep.cn/638183/web/api/tube_lrc.js', js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_02.js';
    
11. 
    
12. let loadJs = (url,callback) => {
    
13.         let body = document.querySelector('body'), jsNode = document.createElement('script');
    
14.         jsNode.charset = 'utf-8';
    
15.         jsNode.setAttribute('src', url);
    
16.         body.appendChild(jsNode);
    
17.         jsNode.onload = () => callback();
    
18. };
    
19. 
    
20. loadJs(js1, () => {
    
21.         let geci = [[2,"旋涡",4],[7,"",1]];
    
22.         HCPlayer({
    
23.                 papa: '#mydiv',
    
24.                 lrcAr: geci,
    
25.                 lrc_css: `
    
26.                         top: 20px;
    
27.                         color: silver;
    
28.                         --bg: linear-gradient(rgba(10,100,100,.4),rgba(10,100,100,.7));
    
29.                 `,
    
30.                 player_css: `
    
31.                         bottom: 10px;
    
32.                         opacity: .95;
    
33.                         --track: silver;
    
34.                         --prog: red;
    
35.                         --color: silver;
    
36.                         --bg: conic-gradient(tan,blue,green,pink,lightblue);
    
37.                 `,
    
38.         });
    
39. });
    
40. 
    
41. loadJs(js2, () => {
    
42.         H5lz({
    
43.                 papa: '#mydiv',
    
44.                 total: 180,
    
45.                 size: {width: 10, height: 10},
    
46.                 shape: {background: '', borderRadius: '50%'},
    
47.                 maxTime: 24,
    
48.                 offset: {x: 0, y: 0},
    
49.                 ani: 'c2Out',
    
50.                 css: 'opacity: .8;',
    
51.         });
    
52. });
    
53. 
    
54. </script>
    

复制代码

马黑黑

h5粒子插件在原来 （请参阅 http://mhh.52qingyin.cn/art/show ... rt=mahei_1694186574） 四个动画的基础上加了一个 c2Out 动画，就是本帖呈现的样子：粒子从中心（c位）出发，顺时针旋转到外面（2Out）。配置在三楼代码中的 49 行。

马黑黑

h5粒子插件的动画，全部基于 CSS 关键帧动画，它因此是受限的，运动形态一般依赖于 CSS 变量。开发此插件，意在挑战自己，看看自己基于CSS关键帧动画能做到多少。

马黑黑

醉美水芙蓉 发表于 2023-9-13 22:01
欣赏老师制作的精彩特效！

精彩不精彩不好说，玩玩

红影

这个真漂亮，彩色粒子从当中散发出来，和背景图结合得那么完美。非常赞

红影

马黑黑 发表于 2023-9-13 21:55
因为JS资源有所改变，如果此前打开过论坛中使用过此资源的帖子，请按以下 Ctrl + F5 刷新帖子，这样就可以 ...

这个粒子的插件名称还是原来的，那之前的那个帖子里的效果不也跟着变了？

马黑黑

红影 发表于 2023-9-13 22:20
这个粒子的插件名称还是原来的，那之前的那个帖子里的效果不也跟着变了？

它不改变之前用到的功能

马黑黑

红影 发表于 2023-9-13 22:19
这个真漂亮，彩色粒子从当中散发出来，和背景图结合得那么完美。非常赞

测试中，不知道有木有问题

红影

马黑黑 发表于 2023-9-13 22:46
它不改变之前用到的功能

哦，是在 ani: 'c2Out', 中调节的吧。

红影

马黑黑 发表于 2023-9-13 22:47
测试中，不知道有木有问题

目前看起来没问题

马黑黑

红影 发表于 2023-9-13 23:01
目前看起来没问题

有时候需要一点时间才发现

红影

马黑黑 发表于 2023-9-13 23:02
有时候需要一点时间才发现

我一般是跟着做时经常碰到问题，不过都是我自己的问题

马黑黑

红影 发表于 2023-9-13 23:09
我一般是跟着做时经常碰到问题，不过都是我自己的问题

是问题就是问题

梦油

真漂亮，真漂亮！你可真行！

红影

马黑黑 发表于 2023-9-13 23:09
是问题就是问题

能解决的最后就不是问题了

马黑黑

红影 发表于 2023-9-14 10:27
能解决的最后就不是问题了

不是问题也曾经是个问题

马黑黑

梦油 发表于 2023-9-14 09:15
真漂亮，真漂亮！你可真行！

谢谢鼓励

红影

马黑黑 发表于 2023-9-14 13:24
不是问题也曾经是个问题

最后就成了进步的阶梯