CSS 生成粒子动画

使用 CSS 构建强大且酷炫的粒子动画
10000 个元素，卡出天际
css-doodle 很好用~学废了！

记录

引入 css-doodle

<script src="https://unpkg.com/css-doodle@0.29.0/css-doodle.min.js"></script>

创建个有 10000 个 item 的 grid

<!-- 100x100的grid布局 -->
    <css-doodle grid="100x100">
        <!-- Grid 布局的高宽分别为 100vw 和 100vh -->
        :doodle{ @size:100vw 100vmin; }
        <!-- 赋值给每一个grid item -->
        position:absolute;
        top:50%;
        left:50%;
        width:2px;
        height:2px;
        background: #000;
        border-radius: 50%;
    </css-doodle>

此时 10000 个粒子都在同一个点 3. 分散粒子

修改 left 和 top
@r 用于获取随机数

<!-- 100x100的grid布局 -->
    <css-doodle grid="100x100">
        <!-- Grid 布局的高宽分别为 100vw 和 100vh -->
        :doodle{ @size:100vw 100vmin; }
        <!-- 赋值给每一个grid item -->
        position:absolute;
        top:@r(1%,100%);
        left:@r(1%,100%);
        width:2px;
        height:2px;
        background: #000;
        border-radius: 50%;
    </css-doodle>

缩放粒子以及随机色

background: hsl(@r(1, 270, 3), @r(10%, 90%), @r(10%, 90%));
        zoom: @rn(.1, 5, 3);

添加动画

transform: rotate(@r(360deg)) translate(@r(-50, 50)vmin, @r(-50, 50)vmin);
        animation: move @r(5, 15)s infinite @r(-10, 0)s @p(linear, ease-in, ease-in-out) alternate;
        @keyframes move {
            100% {
                transform: rotate(0) translate(0, 0);
            }
        }

添加 3D 太卡了，改成 10*10

:doodle{ @size:100vw 100vmin;perspective: 10px; }
        :container {
            perspective: 100px;
            transform-style: preserve-3d;
        }
        <!-- 赋值给每一个grid item -->
        position:absolute;
        top:@r(1%,100%);
        left:@r(1%,100%);
        width:2px;
        height:2px;
        background: hsl(@r(150, 270, 3), @r(10%, 90%), @r(10%, 90%));
        zoom: @rn(.1, 5, 3);
        border-radius: 50%;
        transform: scale(@rn(1, 10, 3)) translate3d(@rn(-50, 50, 3)vw, @rn(-50, 50, 3)vh, @rn(-100, 20)px);
        animation: move @rn(5, 15, 3)s infinite @rn(-20, -10, 3)s linear alternate;
        box-shadow: 0 0 1px #fff, 0 0 5px #fff;
        @keyframes move {
            100% {
                margin-top: 500px;
            }
        }

CSS 生成粒子动画 ​

记录 ​

CSS 生成粒子动画

记录