PIXI实现模糊梦幻云流动动画效果代码-html代码-BFW代码库

PIXI实现模糊梦幻云流动动画效果代码

代码语言：html

所属分类：动画

代码描述：PIXI实现模糊梦幻云流动动画效果代码

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

<html lang="en">
<head>

    <meta charset="UTF-8">



    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            display: grid;
            place-items: center;
            background: hsl(0, 0%, 100%);
        }

        canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
        }
    </style>



</head>

<body>




    <script type="module">
        import * as PIXI from "https://cdn.skypack.dev/pixi.js";
        import SimplexNoise from "https://cdn.skypack.dev/simplex-noise";
        import {
            KawaseBlurFilter
        } from "https://cdn.skypack.dev/@pixi/filter-kawase-blur";

        const width = window.innerWidth;
        const height = window.innerHeight;

        const res = 15;
        const cols = 1 + width / res;
        const rows = 1 + height / res;

        const app = new PIXI.Application({
            width: width,
            height: height,
            resolution: 1,
            autoDensity: false,
            backgroundColor: 0xffbe0b
        });
        document.body.appendChild(app.view);

        const simplex = new SimplexNoise();

        const graphics = new PIXI.Graphics();
        app.stage.addChild(graphics);

        const graphics1 = new PIXI.Graphics();
        app.stage.addChild(graphics1);

        const graphics2 = new PIXI.Graphics();
        app.stage.addChild(graphics2);

        let inc = 0.025;

        let zOff = 0;

        const blurFilter = new KawaseBlurFilter(20, 10, true);
        const noise = new PIXI.filters.NoiseFilter(0.2);

        app.stage.filters = [blurFilter, noise];

        const container = new PIXI.Container();
        app.stage.addChild(container);
        container.mask = graphics;

        const container1 = new PIXI.Container();
        app.stage.addChild(container1);
        container1.mask = graphics1;

        const container2 = new PIXI.Container();
        app.stage.addChild(container2);
        container2.mask = graphics2;

        const fill = new PIXI.Graphics();
        container.addChild(fill).........完整代码请登录后点击上方下载按钮下载查看