css-doodle粒子特效
本帖最后由 马黑黑 于 2023-5-16 08:32 编辑 <br /><br /><style>.mama { margin-left: 40px; position: relative; }
.hCode, .hLineNum { padding: 10px; width: calc(100% - 40px); background: #f9f9f9; box-sizing: border-box; overflow-x: auto; tab-size: 3; position: absolute; }
.hCode { left: 40px; margin-left: -40px; padding-left: 45px; }
.hLineNum { width: 40px; background: #ccc; border-right: 1px solid #ccc; text-align: right; pointer-events: none; }
.stage { display: grid; place-items: center; }
</style>
<p>我曾在《人类遗迹》帖子中使用CSS+JS实现过粒子特效，这个效果如果用 css-doodle 来做更是易如反掌。下面的代码，:doodle{} 选择器中设置了3d景深，:container{} 选择器设置了3d展现场景，各单元格设置好样式、位置、颜色、初始 transform 状态，最后执行关键帧动画飞回到原始定位的地点——</p>
<div class="mama">
<pre class="hCode"><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></pre>
<pre class="hLineNum"></pre>
</div>
<p><br><br><button class="btnok" type="button" value="运行代码">运行代码</button><br><br></p>
<div class="stage"></div>
<p><br><br>:container{} 选择器是单元格的直接容器，它的上层父元素是 :doodle {}。它平时基本不用，但在3d转换中，需要有三个层级的DOM结构，其中，一层元素提供景深，二层做容器（① 做3d展现场景；② 装载要做3d运动的子元素），三层就是要做3d运动的子元素；故而在此启用了它。</p>
<script>
let script = document.createElement('script');
script.src = '/css-doodle.min.js';
document.head.appendChild(script);
let btns = document.querySelectorAll('.btnok'),
stages = document.querySelectorAll('.stage'),
hCodes = document.querySelectorAll('.hCode'),
hLineNums = document.querySelectorAll('.hLineNum'),
mamas = document.querySelectorAll('.mama');
btns.forEach((item,key) => {
let lines = hCodes.innerText.trim().split('\n').length;
let str = '';
for(i = 0; i < lines; i ++) {
str += i + 1 + '\n';
}
hLineNums.innerText = str;
mamas.style.cssText += `height: ${hCodes.offsetHeight + 10}px`;
item.onclick = () => {
let val = item.value;
stages.innerHTML = val === '运行代码' ? hCodes.innerText : '';
item.value = item.innerText = val === '运行代码' ? '关闭运行' : '运行代码';
}
});
</script>
【附】
《人类遗迹》地址：
① 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做这样的大量、随机的图形有优势。 欣赏学习！模仿套用了！{:4_190:} 感谢老师的代码分享，欣赏问好！{:4_185:} 起个网名好难 发表于 2023-5-16 08:32
css-doodle做这样的大量、随机的图形有优势。
对，它就是高涂鸦艺术的 亦是金 发表于 2023-5-16 09:52
欣赏学习！模仿套用了！
这个示范有些简单，其实，粒子还可以做一些修饰的，动画也可以重新设计 醉美水芙蓉 发表于 2023-5-16 11:47
欣赏学习老师教程！
中午好 梦缘 发表于 2023-5-16 10:25
感谢老师的代码分享，欣赏问好！
{:4_190:} 又见新教程，是不是意味着之前见过的特效都可以转换成这种 如果觉得回到正中心也行，那这句直接写成下面的句子就好：
@place: center center;（意思是从中间来，回中间去？）
甚至可以这么写:
@place: center;（意思出现和消失都在中间？）
不知道理解的对不对，还是挺有意思的。 雨中悄然 发表于 2023-5-16 12:31
如果觉得回到正中心也行，那这句直接写成下面的句子就好：
@place: center center;（意思是从中间来，回 ...
你没能看明白。粒子（单元格）有自己的定位和预设 transform 初始样式，也就是说，粒子一开始不在原位，它们通过transform 属性随机分放到了不同的地方；然后，通过关键帧动画回到定位的位置，如此反复。 雨中悄然 发表于 2023-5-16 12:28
又见新教程，是不是意味着之前见过的特效都可以转换成这种
不同特效有不同的初始设置和动画设置，使用不同的平台去现实时，各自的实现手段又不一样。
这个写法省了JS语句了，果然简洁了许多{:4_187:} 黑黑又带来新效果，学习了{:4_199:} 马黑黑 发表于 2023-5-16 13:43
你没能看明白。粒子（单元格）有自己的定位和预设 transform 初始样式，也就是说，粒子一开始不在原位， ...
好的，我且慢慢试，慢慢明白。{:4_173:} 马黑黑 发表于 2023-5-16 13:44
不同特效有不同的初始设置和动画设置，使用不同的平台去现实时，各自的实现手段又不一样。
听起来不容易的样子，等老师慢慢整{:4_173:}