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;
        }

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

网友评论0