蔡文晶 - 江湖

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #tz { left: 50%; transform: translateX(calc(-50% - 1px)); width: 1200px; height: 750px; overflow: hidden; background: lightblue url('https://638183.freep.cn/638183/t24/3/jlhu.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px #000; z-index: 1; position: relative; }
   
3. #tz:fullscreen li-zi { offset-path: path('M700 900 Q-400 450,960 -20'); }
   
4. li-zi { position: absolute; top: 0; width: 16px; height: 16px; border-radius: 50%; background: olive; offset-path: path('M600 800 Q-400 450,860 -20'); offset-distance: 0; filter: drop-shadow(-100px -160px 0 var(--shadow)); animation: fly 20s cubic-bezier(0.17,0.86,0.73,0.14) infinite var(--state); }
   
5. li-zi:hover { filter: hue-rotate(180deg) drop-shadow(-100px -160px 0 lightgreen); }
   
6. #player { position: absolute; right: 180px; bottom: 180px; width: 160px; height: 160px; cursor: pointer; transition: .5s; animation: rot 8s linear infinite var(--state); }
   
7. #player:hover { filter: brightness(1.2); }
   
8. @keyframes fly { to { offset-distance: 100%; } }
   
9. @keyframes rot { to { transform: rotate(1turn); } }
   
10. </style>
    
11. 
    
12. <div id="tz">
    
13.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1440089299" autoplay loop></audio>
    
14.         <img id="player" alt="" title="播放" src="https://638183.freep.cn/638183/web/svg/flower_3.svg" />
    
15. </div>
    
16. 
    
17. <script>
    
18. //粒子
    
19. new Array(total = 60).fill(0).map((i,k) => {
    
20.         i = document.createElement('li-zi');
    
21.         i.style.cssText += `
    
22.                 left: ${600 / total * k + 20}px;
    
23.                 background-image: linear-gradient(lightgreen, #${Math.random().toString(16).substring(2,8)});
    
24.                 animation-delay: -${Math.random() * 20}s;
    
25.                 --shadow: #${Math.random().toString(16).substring(2,8)};
    
26.         `;
    
27.         tz.prepend(i);
    
28. });
    
29. //联动函数
    
30. var mState = () => {
    
31.         tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
    
32.         player.title = ['暂停','播放'][+aud.paused];
    
33. };
    
34. aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
    
35. player.onclick = () => aud.paused ? aud.play() : aud.pause();
    
36. //全屏
    
37. var sF = document.createElement('script');
    
38. sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
    
39. sF.charset = 'utf-8';
    
40. document.querySelector('body').appendChild(sF);
    
41. sF.onload = () => FS({
    
42.         papa: '#tz',
    
43.         css: 'bottom: 20px; left: 50%; transform: translateX(-50%); --color: white; --fsBg: green;',
    
44. });
    
45. </script>

复制代码

马黑黑

本帖：

（一）通过CSS伪类 :fullscreen 简单处理 li-zi 的运行路径 offset-path，非精细处理；
（二）animation-timing-function 即动画在每一个周期内的时间分布（时间曲率），使用了 赛贝尔曲线，cubic-bezier(0.17,0.86,0.73,0.14)，功能类似于之前一直使用的 linear（匀速）。

马黑黑

（三）粒子有真伪：粒子、影子，其实容易辨认——粒子背景渐变、影子纯色。设备指针触碰真粒子时粒子会变色，影子粒子变为浅绿色。

梦油

这些飘舞的彩球为大草原增添了无穷的魅力，赞精彩的制作！

梦江南

谢谢老师分享，漂亮！

红影

这样的背景下，这样的粒子运行带着梦幻般的感觉。很赞。
全屏的效果更震撼呢，这个制作太美了

红影

马黑黑 发表于 2024-6-24 07:46
（三）粒子有真伪：粒子、影子，其实容易辨认——粒子背景渐变、影子纯色。设备指针触碰真粒子时粒子会变色 ...

filter: drop-shadow(-100px -160px 0 var(--shadow));是这句弄的影子吧，然后js里还赋予了阴影的各种颜色。
粒子和粒子阴影，这影子两字用得咋那么别扭呢

红影

马黑黑 发表于 2024-6-24 07:37
本帖：

（一）通过CSS伪类 :fullscreen 简单处理 li-zi 的运行路径 offset-path，非精细处理；

animation: fly 20s cubic-bezier(0.17,0.86,0.73,0.14) infinite var(--state); }

这个倒是第一次见呢，原来动画还能这样设计

红影

这些粒子小精灵被小播转动出来的一样。它们活泼泼地跑出来，到了中间行为慢下来，贪看草原的美丽，然后又被后面涌出的粒子推搡着，笑嘻嘻地从右上角跑出去了。

这个制作带来视觉盛宴，真的像在眼前展开了一个童话故事般

南无月

这个贴子电脑看全屏效果极其壮观，透亮透亮的。。正宗的漂亮。

南无月

马黑黑 发表于 2024-6-24 07:37
本帖：

（一）通过CSS伪类 :fullscreen 简单处理 li-zi 的运行路径 offset-path，非精细处理；

原来看代码，还纳闷为啥整一个路径还有一个曲线。。。
原来后一个是时间分布。。
先快再慢再快。。。。
这样更精细啊，可以控制某个范围的速度。。
改为相同数据是不是应该就匀速了，跟之前一样

南无月

马黑黑 发表于 2024-6-24 07:46
（三）粒子有真伪：粒子、影子，其实容易辨认——粒子背景渐变、影子纯色。设备指针触碰真粒子时粒子会变色 ...

这里又解惑了。。。现在明白。
立体的是粒子。。没有立体感的是它的影子。。
所以，点某个粒子变色的时候，远处的影子也会变色。。
只不过粒子和影子离得有点远，不像平时的阴影一直就在边上。。

还有就是，运动的粒子不好逮，飞得太6了。。

马黑黑

南无月 发表于 2024-6-24 12:46
这里又解惑了。。。现在明白。
立体的是粒子。。没有立体感的是它的影子。。
所以，点某个粒子变色的时 ...

暂停音乐再慢慢逮

南无月

马黑黑 发表于 2024-6-24 12:48
暂停音乐再慢慢逮

飞着逮比较有刺激，站着没兴趣逮了

马黑黑

南无月 发表于 2024-6-24 12:41
原来看代码，还纳闷为啥整一个路径还有一个曲线。。。
原来后一个是时间分布。。
先快再慢再快。。。。 ...

匀速的应该是 0,0,1,1

使用 cubic-bezier() 函数表达运动时间曲率，需要四个参数：x1, y1, x2, y2，它们都是三次贝塞尔曲线的两个控制点的坐标，其中，x1、x2 取值范围是浮点数，0~1之间（含头尾值）；y1、y2也建议在 0~1 之间取值，但本质上 y1、y2 不受限制。

马黑黑

南无月 发表于 2024-6-24 12:36
这个贴子电脑看全屏效果极其壮观，透亮透亮的。。正宗的漂亮。

图好，效果就好

马黑黑

梦油 发表于 2024-6-24 09:29
这些飘舞的彩球为大草原增添了无穷的魅力，赞精彩的制作！

马黑黑

梦江南 发表于 2024-6-24 09:44
谢谢老师分享，漂亮！

马黑黑

红影 发表于 2024-6-24 10:31
这样的背景下，这样的粒子运行带着梦幻般的感觉。很赞。
全屏的效果更震撼呢，这个制作太美了