css-doodle粒子特效

马黑黑

我曾在《人类遗迹》帖子中使用CSS+JS实现过粒子特效，这个效果如果用 css-doodle 来做更是易如反掌。下面的代码，:doodle{} 选择器中设置了3d景深，:container{} 选择器设置了3d展现场景，各单元格设置好样式、位置、颜色、初始 transform 状态，最后执行关键帧动画飞回到原始定位的地点——

<css-doodle>
	:doodle {
		@grid: 16 / 600px 360px;
		border: 1px solid tan;
		perspective: 800px;
	}
	:container {
		transform-style: preserve-3d;
		background: radial-gradient(circle, black,navy);
	}
	@size: @r(3,6)px;
	border-radius: 50%;
	@place: @r(260,340)px @r(160,220)px;
	background: rgba(@m3(@r(255)),@r(.6, .9));
	transform: rotate(@r(720)deg) translate3d(@r(500)px, @r(300)px, @r(1000)px);
	animation: fly @r(20,40)s @r(-20,0)s infinite linear;
	@keyframes fly { to { transform: rotate(0) translate3d(0, 0, 0); } }
</css-doodle>

运行代码

:container{} 选择器是单元格的直接容器，它的上层父元素是 :doodle {}。它平时基本不用，但在3d转换中，需要有三个层级的DOM结构，其中，一层元素提供景深，二层做容器（① 做3d展现场景；② 装载要做3d运动的子元素），三层就是要做3d运动的子元素；故而在此启用了它。

马黑黑

【附】
《人类遗迹》地址：


① Human Legacy (huachaowang.com)

② 人类遗迹 (byethost11.com)

马黑黑

实际应用一楼的 css-doodle 特效，需要根据帖子尺寸重新定位单元格的初始位置，代码在第十三行：

@place: @r(260,340)px @r(160,220)px;

这里，xy坐标定位的依据是尽可能放在帖子中心处但又不是绝对的中心，这样粒子飞回自己的原始定位点时自然一些。如果觉得回到正中心也行，那这句直接写成下面的句子就好：

@place: center center;

甚至可以这么写:

@place: center;

起个网名好难

欣赏，学习

起个网名好难

css-doodle做这样的大量、随机的图形有优势。

亦是金

欣赏学习！模仿套用了！

梦缘

感谢老师的代码分享，欣赏问好！

马黑黑

起个网名好难 发表于 2023-5-16 08:32
css-doodle做这样的大量、随机的图形有优势。

对，它就是高涂鸦艺术的

马黑黑

亦是金 发表于 2023-5-16 09:52
欣赏学习！模仿套用了！

这个示范有些简单，其实，粒子还可以做一些修饰的，动画也可以重新设计

马黑黑

醉美水芙蓉 发表于 2023-5-16 11:47
欣赏学习老师教程！

中午好

马黑黑

梦缘 发表于 2023-5-16 10:25
感谢老师的代码分享，欣赏问好！

雨中悄然

又见新教程，是不是意味着之前见过的特效都可以转换成这种

雨中悄然

如果觉得回到正中心也行，那这句直接写成下面的句子就好：

@place: center center;（意思是从中间来，回中间去？）

甚至可以这么写:

@place: center;（意思出现和消失都在中间？）

不知道理解的对不对，还是挺有意思的。

马黑黑

雨中悄然 发表于 2023-5-16 12:31
如果觉得回到正中心也行，那这句直接写成下面的句子就好：

@place: center center;（意思是从中间来，回 ...

你没能看明白。粒子（单元格）有自己的定位和预设 transform 初始样式，也就是说，粒子一开始不在原位，它们通过transform 属性随机分放到了不同的地方；然后，通过关键帧动画回到定位的位置，如此反复。

马黑黑

雨中悄然 发表于 2023-5-16 12:28
又见新教程，是不是意味着之前见过的特效都可以转换成这种

不同特效有不同的初始设置和动画设置，使用不同的平台去现实时，各自的实现手段又不一样。

红影

这个写法省了JS语句了，果然简洁了许多

红影

黑黑又带来新效果，学习了

南无月

马黑黑 发表于 2023-5-16 13:43
你没能看明白。粒子（单元格）有自己的定位和预设 transform 初始样式，也就是说，粒子一开始不在原位， ...

好的，我且慢慢试，慢慢明白。

南无月

马黑黑 发表于 2023-5-16 13:44
不同特效有不同的初始设置和动画设置，使用不同的平台去现实时，各自的实现手段又不一样。

听起来不容易的样子，等老师慢慢整