css-doodle粒子特效

马黑黑

南无月 发表于 2023-5-16 17:57
听起来不容易的样子，等老师慢慢整

这不是已经整好了吗

马黑黑

南无月 发表于 2023-5-16 17:56
好的，我且慢慢试，慢慢明白。

这个其实是好好理解的：粒子一开始就在路上，是赶回原点的路上。原点，就是 @place 设定的地方，但是，开始时，每一个粒子都因为 transform 属性的设置，在一个随机的地方，接着，每一个 粒子都执行 fly 关键帧动画，那是飞回原点的动画；而 animation 属性有一个从负数到0的延时设置，表示动画立即执行，如果是负数，比如 -2，则立即执行的动画是从 2 秒开始（一开始就在路上就这意思）。

马黑黑

红影 发表于 2023-5-16 17:49
黑黑又带来新效果，学习了

这个不新吧，只是实现平台和方式不一样而已

马黑黑

红影 发表于 2023-5-16 17:48
这个写法省了JS语句了，果然简洁了许多

它背后是一大堆的JS

南无月

马黑黑 发表于 2023-5-16 18:08
这不是已经整好了吗

十分好看，跟了一贴，辛苦老师有空去瞧瞧

南无月

马黑黑 发表于 2023-5-16 18:13
这个其实是好好理解的：粒子一开始就在路上，是赶回原点的路上。原点，就是 @place 设定的地方，但是，开 ...

这个我搬走好好消化一下

马黑黑

南无月 发表于 2023-5-16 20:34
这个我搬走好好消化一下

关键帧动画，animation属性，transform转换，这些，可能需要梳理一下

马黑黑

南无月 发表于 2023-5-16 20:33
十分好看，跟了一贴，辛苦老师有空去瞧瞧

瞧过了

红影

马黑黑 发表于 2023-5-16 18:17
这个不新吧，只是实现平台和方式不一样而已

效果一样，但表现方式不一样啊。

红影

马黑黑 发表于 2023-5-16 18:17
它背后是一大堆的JS

不管背后的事，只要看着简洁了就好

马黑黑

红影 发表于 2023-5-16 21:39
效果一样，但表现方式不一样啊。

效果一样的就不算新。所谓新娘，说有所指的，不能因为后来穿着打扮像新娘就是新娘

马黑黑

红影 发表于 2023-5-16 21:40
不管背后的事，只要看着简洁了就好

也是。瓶子里装的什么酒不管它，酒瓶漂亮就好。我买酒总是看看酒瓶好不好看，有时仅仅是为了酒瓶好看就买了。

红影

马黑黑 发表于 2023-5-16 21:41
效果一样的就不算新。所谓新娘，说有所指的，不能因为后来穿着打扮像新娘就是新娘

都什么啊，正好说反了吧，打扮像新娘不是新娘。效果相像也不能说是原来的，肯定是新的啊

红影

马黑黑 发表于 2023-5-16 21:45
也是。瓶子里装的什么酒不管它，酒瓶漂亮就好。我买酒总是看看酒瓶好不好看，有时仅仅是为了酒瓶好看就买 ...

这个不能相比的，喝的是酒不是酒瓶啊

马黑黑

红影 发表于 2023-5-16 22:02
都什么啊，正好说反了吧，打扮像新娘不是新娘。效果相像也不能说是原来的，肯定是新的啊

新说有所指的额。你要说的应该是新方法做出了同样的效果。

马黑黑

红影 发表于 2023-5-16 22:03
这个不能相比的，喝的是酒不是酒瓶啊

我喜欢用瓶子直接喝，所以可以算做喝瓶子。

南无月

马黑黑 发表于 2023-5-16 21:23
关键帧动画，animation属性，transform转换，这些，可能需要梳理一下

龙那个帖子我试着把落花改成转的，就试图瞧瞧它们是咋回事

马黑黑

南无月 发表于 2023-5-16 22:29
龙那个帖子我试着把落花改成转的，就试图瞧瞧它们是咋回事

转动，需要用到 transform 的rotate，如果和 translate一起使用，translate 放在 rotate的后面，会改变元素的路径，相反则不会

南无月

马黑黑 发表于 2023-5-16 22:41
转动，需要用到 transform 的rotate，如果和 translate一起使用，translate 放在 rotate的后面，会改变元 ...

好的，只能等实际试试操作理解。我再搬一个走

红影

马黑黑 发表于 2023-5-16 22:03
新说有所指的额。你要说的应该是新方法做出了同样的效果。

反正就是新的，这个没错吧