论坛 › 马黑黑教程专版 › css-doodle加餐教程（四）

马黑黑 发表于 2023-4-14 08:40

css-doodle加餐教程（四）

本帖最后由 马黑黑 于 2023-4-14 08:43 编辑

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

知识准备：

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

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

霸王硬上弓：直接上代码——
<css-doodle grid="20">
    :doodle {
      @size: 400px;
      background: #000;
    }
    background: rgba(@r(255), @r(255), @r(255), @calc(@r(.5) + .5));
    border-radius: 50%;
    @size: @r(2,8)px;
    @place-cell: 50% 102%;
    animation: ani 12s @r(-20,20)s infinite alternate;
    @keyframes ani { to { transform: rotate(@r(-40,40)deg) translateY(-300px); } }
</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 页面运行查看。

马黑黑 发表于 2023-4-14 09:00

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

<style>
#mydiv {
        margin: 20px auto;
        width: 400px;
        height: 400px;
        background: #000;
        overflow: hidden;
        cursor: pointer;
        position: relative;
}
.dot {
        position: absolute;
        left: 50%;
        bottom: -10px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: snow;
}
@keyframes ani { to { transform: rotate(var(--deg)) translateY(-300px); }}
</style>

<div id="mydiv"></div>

<script>
Array.from({length: 400}).forEach( (item,key) => {
        let sp = document.createElement('span');
        let ww = Math.random() * 6 + 2;
        sp.className = 'dot';
        sp.style.cssText += `
                --deg: ${-50 + Math.random() * 100}deg;
                width: ${ww}px;
                height: ${ww}px;
                background: #${Math.random().toString(16).substr(-6)};
                animation: ani 10s ${Math.random() * key - 4}s infinite alternate;
        `;
        mydiv.appendChild(sp);
});
</script>以上代码渲染的效果放在楼下，效果与 css-doodle 相比会有所差异，因为一些值的设置范围不尽一致

马黑黑 发表于 2023-4-14 09:00

<style>
#mydiv {
        margin: 20px auto;
        width: 400px;
        height: 400px;
        background: #000;
        overflow: hidden;
        cursor: pointer;
        position: relative;
}
.dot {
        position: absolute;
        left: 50%;
        bottom: -10px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: snow;
}
@keyframes ani { to { transform: rotate(var(--deg)) translateY(-300px); }}
</style>

<div id="mydiv"></div>

<script>
Array.from({length: 400}).forEach( (item,key) => {
        let sp = document.createElement('span');
        let ww = Math.random() * 6 + 2;
        sp.className = 'dot';
        sp.style.cssText += `
                --deg: ${-50 + Math.random() * 100}deg;
                width: ${ww}px;
                height: ${ww}px;
                background: #${Math.random().toString(16).substr(-6)};
                animation: ani 10s ${Math.random() * key - 4}s infinite alternate;
        `;
        mydiv.appendChild(sp);
});
</script>

红影 发表于 2023-4-14 16:28

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

马黑黑 发表于 2023-4-14 18:10

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

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

红影 发表于 2023-4-14 22:44

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

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

马黑黑 发表于 2023-4-14 23:57

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

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

红影 发表于 2023-4-15 12:56

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

是啊，它用整合好的东西，更容易去做复杂的{:4_204:}

马黑黑 发表于 2023-4-15 13:11

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

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

雨中悄然 发表于 2023-4-15 21:39

向经典粒子束致敬

马黑黑 发表于 2023-4-15 21:55

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

{:5_108:}

红影 发表于 2023-4-16 09:13

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

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

马黑黑 发表于 2023-4-16 09:29

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

不是这样理解。

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

红影 发表于 2023-4-16 11:16

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

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

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

马黑黑 发表于 2023-4-16 11:37

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

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

红影 发表于 2023-4-16 17:41

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

惟一的不足就是不能用css-doodle加餐教程{:4_173:}

马黑黑 发表于 2023-4-16 19:09

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

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

红影 发表于 2023-4-16 22:25

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

这个只能黑黑加工了，我肯定不行{:4_173:}

马黑黑 发表于 2023-4-16 22:26

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

这个比较麻烦额

红影 发表于 2023-4-16 23:17

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

不管怎么麻烦，你肯定能弄出来的{:4_187:}

查看完整版本: css-doodle加餐教程（四）