gsap实现图形粒子变换动画效果代码-html代码-BFW代码库

gsap实现图形粒子变换动画效果代码

代码语言：html

所属分类：粒子

代码描述：gsap实现图形粒子变换动画效果代码

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

<html lang="en">
<head>

    <meta charset="UTF-8">



    <style>
:root {
        --width: 600;
        --height: 500;
        --background: #87CE01;
    }

        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            color: white;
            font-family: sans-serif;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--background);
            position: relative;
        }

        #container canvas {
            width: calc(var(--width) *1px);
            height: calc(var(--height) *1px);
        }

        .gsap-3-logo {
            width: 100px;
            position: fixed;
            bottom: 8px;
            right: 60px;
            z-index: 100;
        }
    </style>




    <style>
        .sg {
            width: 35px;
            height: 35px;
            position: fixed;
            bottom: 10px;
            right: 10px;
        }

        .sg .eye {
            -webkit-transform: translateX(0px);
            transform: translateX(0px);
        }

        .sg:hover .eye {
            -webkit-transition: -webkit-transform 0.3s ease;
            transition: -webkit-transform 0.3s ease;
            transition: transform 0.3s ease;
            transition: transform 0.3s ease, -webkit-transform 0.3s ease;
            -webkit-transform: translateX(12px);
            transform: translateX(12px);
        }
    </style>
</head>

<body>
    <div id="container">
        <canvas width="750" height="625" style="touch-action: none; cursor: inherit;"></canvas>
    </div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.3.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/MotionPathPlugin.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/PixiPlugin3.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi.5.1.5.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ScrubGSAPTimeline.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi-filters.js"></script>


    <script >
        function _defineProperty(obj, key, value) {
            if (key in obj) {
                Object.define.........完整代码请登录后点击上方下载按钮下载查看