css-doodle加餐教程（四）

马黑黑

制作一个和 苍穹 帖子类似的2d粒子特效

知识准备：

① 我们需要用到一个很快会在入门教程中介绍的 css-doodle 函数，@rand() ，该函数返回两个数之间的一个浮点数值，例如，@rand(0,3) 会返回 0 - 3 之间的一个浮点数。@rand() 函数内的参数可以只要一个数字，例如，@rand(2)，它将返回在 0 - 2 之间的浮点数。@rand() 函数可以缩写成 @r() 。

② 相关 CSS 知识，例如 calc 计算函数、rgba()颜色表达体系、@keyframes 关键帧动画选择器、animation 关键帧动画调用属性等。

霸王硬上弓：直接上代码——

1. <css-doodle grid="20">
   
2.     :doodle {
   
3.         @size: 400px;
   
4.         background: #000;
   
5.     }
   
6.     background: rgba(@r(255), @r(255), @r(255), @calc(@r(.5) + .5));
   
7.     border-radius: 50%;
   
8.     @size: @r(2,8)px;
   
9.     @place-cell: 50% 102%;
   
10.     animation: ani 12s @r(-20,20)s infinite alternate;
    
11.     @keyframes ani { to { transform: rotate(@r(-40,40)deg) translateY(-300px); } }
    
12. </css-doodle>

复制代码

代码解释：

行1和行12：css-doodle 标签。其中，行1的 grid="20" 表示建立一个 20x20 的网格；

行2至行5：css-doodle 主元素设定，其中，行3设置父元素尺寸为 400x400（px），行4设置主元素背景色；

行6至行11：这些设置都是基于网格里的所有单元格，即主元素下的子元素，其中：

        行6：随机设定每一个单元格的背景色，使用 rgba(R,G,B,Alpha) 颜色体系，R、G、G、Alpha 四个参数值均使用 css-doodle 的 @r() 函数获取，Alpha 系数还使用 CSS 的 calc() 计算函数确保其中不低于 0.5 也不会高于该系数的峰值 1 ；

        行7：纯CSS属性，所有单元格都设置成圆形；

        行8：使用 @r() 函数随机设置各单元格大小，最小 2x2（px）、最大 8x8（px）;

        行9：用 @place-cell 定位单元格，横向 50%，纵向 102%，这么设置横与纵的方向定位，是为了初始时令元素相对在横向中心处、纵向底部且隐藏单元格；

        行10：用 animation 属性调用 ani 关键帧动画，12s 的运行周期，延时从 -20 至 20 秒之间，循环且往复运行。负值的延时，使得粒子的状态在初始运行时就能体现出来：负值延时会立即执行，且立即进入负值转正值的周期状态，例如，设置 -2s 的运行延时，则该粒子一开始就进入到运行周期环节中的第2秒的状态。

        行11：设计一个名为 ani 的关键帧动画，先随机在 -40deg 至 40deg 之间进行旋转，然后沿Y轴上升 300 px，rotate 结合 translate 转换会令运动对象做弧线运动。

效果演示：请将代码复制到 http://mahei.freeee.ml/api/pencilcode/pencilcode-ddl.html 页面运行查看。

马黑黑

使用原生 CSS+HTML+JS实现类似效果的代码：

1. <style>
   
2. #mydiv {
   
3.         margin: 20px auto;
   
4.         width: 400px;
   
5.         height: 400px;
   
6.         background: #000;
   
7.         overflow: hidden;
   
8.         cursor: pointer;
   
9.         position: relative;
   
10. }
    
11. .dot {
    
12.         position: absolute;
    
13.         left: 50%;
    
14.         bottom: -10px;
    
15.         width: 4px;
    
16.         height: 4px;
    
17.         border-radius: 50%;
    
18.         background: snow;
    
19. }
    
20. @keyframes ani { to { transform: rotate(var(--deg)) translateY(-300px); }}
    
21. </style>
    
22. 
    
23. <div id="mydiv"></div>
    
24. 
    
25. <script>
    
26. Array.from({length: 400}).forEach( (item,key) => {
    
27.         let sp = document.createElement('span');
    
28.         let ww = Math.random() * 6 + 2;
    
29.         sp.className = 'dot';
    
30.         sp.style.cssText += `
    
31.                 --deg: ${-50 + Math.random() * 100}deg;
    
32.                 width: ${ww}px;
    
33.                 height: ${ww}px;
    
34.                 background: #${Math.random().toString(16).substr(-6)};
    
35.                 animation: ani 10s ${Math.random() * key - 4}s infinite alternate;
    
36.         `;
    
37.         mydiv.appendChild(sp);
    
38. });
    
39. </script>

复制代码

以上代码渲染的效果放在楼下，效果与 css-doodle 相比会有所差异，因为一些值的设置范围不尽一致

马黑黑

红影

DZ没法使用css-doodle ，这真让人头疼。好在黑黑能用原生 CSS+HTML+JS实现类似效果，厉害

马黑黑

红影 发表于 2023-4-14 16:28
DZ没法使用css-doodle ，这真让人头疼。好在黑黑能用原生 CSS+HTML+JS实现类似效果，厉害

帖子先做，然后才用 css-doodle 做类似效果

红影

马黑黑 发表于 2023-4-14 18:10
帖子先做，然后才用 css-doodle 做类似效果

虽然 css-doodle 看这个更简洁，但还是习惯帖子的做法。

马黑黑

红影 发表于 2023-4-14 22:44
虽然 css-doodle 看这个更简洁，但还是习惯帖子的做法。

这要看应用场景和效果的复杂度。css-doodle可能更擅长做复杂类型的东东。

红影

马黑黑 发表于 2023-4-14 23:57
这要看应用场景和效果的复杂度。css-doodle可能更擅长做复杂类型的东东。

是啊，它用整合好的东西，更容易去做复杂的

马黑黑

红影 发表于 2023-4-15 12:56
是啊，它用整合好的东西，更容易去做复杂的

是的，很多功能都封装在那里

雨中悄然

向经典粒子束致敬

马黑黑

雨中悄然 发表于 2023-4-15 21:39
向经典粒子束致敬

红影

马黑黑 发表于 2023-4-15 13:11
是的，很多功能都封装在那里

在这点上，黑黑的整站程序比DZ的好，可以包罗万象。DZ估计自己用了现成的一些东西，而使得css-doodle没法使用吧？

马黑黑

红影 发表于 2023-4-16 09:13
在这点上，黑黑的整站程序比DZ的好，可以包罗万象。DZ估计自己用了现成的一些东西，而使得css-doodle没法 ...

不是这样理解。

dz之所以不让用第三方JS，是因为：一防冲突，dz也是用了大量的第三方库；二保安全，JS能干的事情毕竟多，如果开放了，论坛的安全性会打折扣。

红影

马黑黑 发表于 2023-4-16 09:29
不是这样理解。

dz之所以不让用第三方JS，是因为：一防冲突，dz也是用了大量的第三方库；二保安全，JS ...

哦，还有这的考虑啊。我对建站不懂，黑黑不说，还不知道呢

马黑黑

红影 发表于 2023-4-16 11:16
哦，还有这的考虑啊。我对建站不懂，黑黑不说，还不知道呢

dz是一个很优秀的论坛程序

红影

马黑黑 发表于 2023-4-16 11:37
dz是一个很优秀的论坛程序

惟一的不足就是不能用css-doodle加餐教程

马黑黑

红影 发表于 2023-4-16 17:41
惟一的不足就是不能用css-doodle加餐教程

其实可以用，要做一些加工

红影

马黑黑 发表于 2023-4-16 19:09
其实可以用，要做一些加工

这个只能黑黑加工了，我肯定不行

马黑黑

红影 发表于 2023-4-16 22:25
这个只能黑黑加工了，我肯定不行

这个比较麻烦额

红影

马黑黑 发表于 2023-4-16 22:26
这个比较麻烦额

不管怎么麻烦，你肯定能弄出来的