anime格子交错动画-html代码-BFW代码库

anime格子交错动画

代码语言：html

所属分类：粒子

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title> anime.js grid staggering demo</title>

    <style>
        *, *:before, *:after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }

        html,
        body {
            background-color: #252423;
            color: #F6F4F2;
        }

        body {
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-weight: 400;
            font-feature-settings: "tnum" 1, "ss03" 1;
            -webkit-font-smoothing: antialiased;
        }

        h1, h2 {
            font-weight: 600;
        }

        input {
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-variant-numeric: tabular-nums;
        }

        sup {
            vertical-align: super;
            font-size: .625em;
        }

        strong {
            font-weight: 600;
        }

        .color-white {
            color: #F6F4F2;
        }

        /* White */
        .color-black {
            color: #2E2C2C;
        }

        /* Black */
        .color-red, .color-targets {
            color: #FF4B4B;
        }

        /* red: */
        .color-orange, .color-properties {
            color: #FF8F42;
        }

        /* orange: */
        .color-lightorange, .color-prop-params {
            color: #FFC730;
        }

        /* lightorange: */
        .color-yellow, .color-anim-params {
            color: #F6FF56;
        }

        /* yellow: */
        .color-citrus, .color-values {
            color: #A4FF4F;
        }

        /* citrus: */
        .color-green, .color-keyframes {
            color: #18FF74;
        }

        /* green: */
        .color-darkgreen, .color-staggering {
            color: #00D672;
        }

        /* darkgreen: */
        .color-turquoise, .color-tl {
            color: #3CFFEC;
        }

        /* turquoise: */
        .color-skyblue, .color-controls {
            color: #61C3FF;
        }

        /* skyblue: */
        .color-kingblue, .color-callbacks {
            color: #5A87FF;
        }

        /* kingblue: */
        .color-lavender, .color-svg {
            color: #8453E3;
        }

        /* lavender: */
        .color-purple, .color-easings {
            color: #C26EFF;
        }

        /* purple: */
        .color-pink, .color-helpers {
            color: #FB89FB;
        }

        /* pink: */

        .anime-mini-logo {
            width: 100px;
            height: 24px;
            transform: scaleY(.5);
        }

        body,
        html {
            position: absolute;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh;
            background-color: #FF4B4B;
        }

        .stagger-visualizer {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            width: 17rem;
            height: 17rem;
        }

        .stagger-visualizer div {
            /*position: absolute;*/
            width: 1rem;
            height: 1rem;
            border: 1px solid #FFF;
            background-color: #FFF;
        }
    </style>


<.........完整代码请登录后点击上方下载按钮下载查看