CSS+TWEEN创意3d粒子

马黑黑

马黑黑

代码：

1. <style>
   
2.     #papa { margin: 20px auto; width: 1024px; height: 640px; border: 1px solid gray; perspective: 3000px; transform-style: preserve-3d; overflow: visible; display: grid; place-items: center; position: relative; }
   
3.     .son { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(35deg, green, skyblue); filter: drop-shadow(2px 4px 8px gray); opacity: 0; transform: rotateZ(var(--a)) translate3d(var(--x), var(--y), var(--z)); --x: 0; --y: 0; --z: 0; --a: 0; }
   
4. </style>
   
5. 
   
6. <div id="papa"></div>
   
7. 
   
8. <script type="module">
   
9.     import TWEEN from 'https://638183.freep.cn/638183/3dev/examples/jsm/libs/tween.module.js';
   
10. 
    
11.     const total = 60, sons = [];
    
12. 
    
13.     Array.from({length: total}).forEach(son => {
    
14.         son = document.createElement('div');
    
15.         son.className = 'son';
    
16.         son.style.background = `
    
17.         linear-gradient(
    
18.             35deg,
    
19.             #${Math.random().toString(16).substring(2, 8)},
    
20.             #${Math.random().toString(16).substring(2, 8)}
    
21.         )
    
22.         `;
    
23.         sons.push(son);
    
24.         papa.appendChild(son);
    
25.         const begin = {
    
26.             x: papa.clientWidth / 4 - Math.random() * papa.clientWidth / 2,
    
27.             y: papa.clientHeight / 4 - Math.random() * papa.clientHeight / 2,
    
28.             z: -5000,
    
29.             a: 0
    
30.         };
    
31.         const end = {
    
32.             x: 0,
    
33.             y: [-papa.clientHeight / 1.5, papa.clientHeight / 3],
    
34.             z: [-2000, 600],
    
35.             a: [60 - Math.random() * 120, 80 - Math.random() * 160]
    
36.         };
    
37.         const tween = new TWEEN.Tween(begin)
    
38.             .to(end, Math.random() * 5000 + 8000)
    
39.             .onUpdate( () => {
    
40.                 son.style.setProperty('--x', begin.x + 'px');
    
41.                 son.style.setProperty('--y', begin.y + 'px');
    
42.                 son.style.setProperty('--z', begin.z + 'px');
    
43.                 son.style.setProperty('--a', begin.a + 'deg');
    
44.             })
    
45.             .onStart( () => son.style.opacity = '1')
    
46.             .delay(Math.random() * 5000)
    
47.             .repeat(Infinity)
    
48.             .repeatDelay(Math.random() * 5000)
    
49.             .easing(TWEEN.Easing.Exponential.Out)
    
50.             .yoyo(Math.random() * 10000)
    
51.             .start();
    
52.     });
    
53. 
    
54.     const animate = () => {
    
55.         requestAnimationFrame(animate);
    
56.         TWEEN.update();
    
57.     };
    
58. 
    
59.     animate();
    
60. </script>

复制代码

杨帆

美妙的效果！谢谢马老师经典讲授与分享

梦江南

代码如此神奇，能用到篮球、足球中就战无不胜了！

红影

a: [60 - Math.random() * 120, 80 - Math.random() * 160]
这个导致的回到在下面时是半圆形吧。又是一种小球发散和回归的新效果呢

红影

CSS+TWEEN创意3d粒子，真是创意无限啊

马黑黑

红影 发表于 2025-7-8 16:36
CSS+TWEEN创意3d粒子，真是创意无限啊

部分有tween驱动的数据使用了数组。

初学者也可以酱紫设计：不用那么多的属性数据，仅一个旋转、一个平移，然后，给它们都设置目标数组，这样可能更容易把握一些。

马黑黑

红影 发表于 2025-7-8 16:35
a: [60 - Math.random() * 120, 80 - Math.random() * 160]
这个导致的回到在下面时是半圆形吧。又是一种 ...

这是角度数组。第一个数组元素发生在上方，第二个数组元素影响下方的布局。

马黑黑

梦江南 发表于 2025-7-8 15:55
代码如此神奇，能用到篮球、足球中就战无不胜了！

马黑黑

杨帆 发表于 2025-7-8 15:24
美妙的效果！谢谢马老师经典讲授与分享

红影

马黑黑 发表于 2025-7-8 18:46
部分有tween驱动的数据使用了数组。

初学者也可以酱紫设计：不用那么多的属性数据，仅一个旋转、一个 ...

是的，那些数组比较难理解些

红影

马黑黑 发表于 2025-7-8 18:47
这是角度数组。第一个数组元素发生在上方，第二个数组元素影响下方的布局。

嗯嗯，它的数值决定了布局的形式。

马黑黑

红影 发表于 2025-7-8 21:13
嗯嗯，它的数值决定了布局的形式。

多因素综合起来影响运动形态

马黑黑

红影 发表于 2025-7-8 21:05
是的，那些数组比较难理解些

Tween支持使用数组表示要变更的目标数据。这和svg的动画的实现表达方式是一脉相承的

红影

马黑黑 发表于 2025-7-8 21:43
多因素综合起来影响运动形态

有的时候很难直接想到运动状态，尤其多因素下的。只能做出来看了。

红影

马黑黑 发表于 2025-7-8 21:44
Tween支持使用数组表示要变更的目标数据。这和svg的动画的实现表达方式是一脉相承的

主要我两个都没好，没理解透。

马黑黑

红影 发表于 2025-7-8 22:12
主要我两个都没好，没理解透。

tween应该是最好理解的：仅仅是理解的话，20分钟读完文档就行了。用起来需要慢慢琢磨、体会。

马黑黑

红影 发表于 2025-7-8 22:10
有的时候很难直接想到运动状态，尤其多因素下的。只能做出来看了。

需要对原理、规范都能透彻理解

红影

马黑黑 发表于 2025-7-9 14:03
tween应该是最好理解的：仅仅是理解的话，20分钟读完文档就行了。用起来需要慢慢琢磨、体会。

它的含义和运作方式知道了，怎样操控它，还是有难度。

红影

马黑黑 发表于 2025-7-9 14:04
需要对原理、规范都能透彻理解

是的，这个是必须的