游心

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #papa {
   
3.         margin: 0 0 0 calc(50% - 561px);
   
4.         width: 960px;
   
5.         height: 600px;
   
6.         box-shadow: 4px 8px 28px gray;
   
7.         background: url('https://638183.freep.cn/638183/t23/webp2/yzxb.jpg');
   
8.         display: grid;
   
9.         place-items: center;
   
10.         position: relative;
    
11. }
    
12. li-zi {
    
13.         position: absolute;
    
14.         width: 20px;
    
15.         height: 20px;
    
16.         border-radius: 50%;
    
17.         background: navy;
    
18.         opacity: .75;
    
19.         animation: moving var(--duration) var(--delay) linear infinite alternate var(--state);
    
20. }
    
21. @keyframes moving {
    
22.         from { transform: translate(0,0); }
    
23.         to { transform: translate(var(--xx),var(--yy)); }
    
24. }
    
25. </style>
    
26. 
    
27. <div id="papa"></div>
    
28. 
    
29. <script>
    
30. let total = 90;
    
31. let rx = papa.offsetWidth / 2 - 10, ry = papa.offsetHeight / 2 - 10;
    
32. Array.from({length: total}).forEach((item,key) => {
    
33.         let rad = (Math.PI / 180) * 360 / total;
    
34.         item = document.createElement('li-zi');
    
35.         item.style.cssText += `
    
36.                 --xx: ${rx * Math.cos(rad * key)}px;
    
37.                 --yy: ${ry * Math.sin(rad * key)}px;
    
38.                 --duration: ${2 + Math.random() * 3}s;
    
39.                 --delay: -${Math.random() * 5}s;
    
40.                 background: #${Math.random().toString(16).substr(-6)};
    
41.         `;
    
42.         papa.appendChild(item);
    
43. });
    
44. 
    
45. let sf = document.createElement('script');
    
46. sf.src = 'https://638183.freep.cn/638183/web/api/mplayer.js';
    
47. sf.charset = 'utf-8';
    
48. document.body.appendChild(sf);
    
49. 
    
50. sf.onload = () => {
    
51.         let myplayer = new mPlayer();
    
52.         myplayer.setAudSrc('https://music.163.com/song/media/outer/url?id=1933923242');
    
53.         myplayer.setBtnCss(`
    
54.                 background: url('https://638183.freep.cn/638183/t23/btn/hshx.png') no-repeat center/cover;
    
55.                 width: 200px;
    
56.                 height: 200px;
    
57.                 filter: hue-rotate(200deg) opacity(.8);
    
58.         `);
    
59.         myplayer.setLrcCss('top:10px; left:10px; color: lightblue; --bg: snow;');
    
60.         myplayer.lrcAr = [[2,'变奏的梦想 - 游心',6],[10,'',0]];
    
61. };
    
62. </script>
    

复制代码

马黑黑

关于 li-zi 元素的运动：

父元素约束了 li-zi 的位置，在大矩形即帖子父元素自身的中心。故而，关键帧动画的 from 里的 translate(0,0) 指的就是这个位置；to 里的位置，需要计算椭圆圆周上的点，依据粒子应该运动的角度，360 / total * 序号，在 JS 中要变换成弧度，Math.PI / 180 * 角度。

最后算出变量 --xx、--yy，它们就是 to 的点坐标。

起个网名好难

                               
登录/注册后可看大图

马黑黑

起个网名好难 发表于 2023-12-23 17:54

谢谢

马黑黑

醉美水芙蓉 发表于 2023-12-23 18:07
黑黑老师晚上好！欣赏学习老师精彩音画！

感谢支持

红影

这个粒子的往复运动也好看。那个做播放器的花儿也是黑黑常用的呢

红影

很奇妙的背景，漂亮

红影

看这个用了mplayer组件，应该也可以使用ypPlayer组件的吧

红影

黑黑总能找到这样奇妙的背景的呢，记得之前也有个背景特别奇妙

马黑黑

红影 发表于 2023-12-23 19:36
这个粒子的往复运动也好看。那个做播放器的花儿也是黑黑常用的呢

这是好花花

马黑黑

红影 发表于 2023-12-23 19:40
黑黑总能找到这样奇妙的背景的呢，记得之前也有个背景特别奇妙

随便找随便有

马黑黑

红影 发表于 2023-12-23 19:38
看这个用了mplayer组件，应该也可以使用ypPlayer组件的吧

都可以

亦是金

欣赏黑黑老师新粒子效果代码，学习了！

红影

马黑黑 发表于 2023-12-23 19:52
这是好花花

是啊，而且每次使用效果都完全不同

红影

马黑黑 发表于 2023-12-23 19:53
随便找随便有

这科不一定，和人的审美观有关呢。

红影

马黑黑 发表于 2023-12-23 19:53
都可以

而且粒子也可以换图图的呢

马黑黑

红影 发表于 2023-12-23 20:38
而且粒子也可以换图图的呢

对，background属性

马黑黑

亦是金 发表于 2023-12-23 20:35
欣赏黑黑老师新粒子效果代码，学习了！

都那样儿