TweenMa实现鼠标跟随彩带飘动动画效果代码-html代码-BFW代码库

TweenMa实现鼠标跟随彩带飘动动画效果代码

代码语言：html

所属分类：动画

代码描述：TweenMa实现鼠标跟随彩带飘动动画效果代码，结合了rxjs

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

<html lang="en">
<head>

    <meta charset="UTF-8">






    <style>
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background-color: black;
        }

        #app {
            width: 100%;
            height: 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="app">
        <svg id="stage" width="367" height="756" xmlns="http://www.w3.org/2000/svg"><path d="" style="fill: red;"></path><path d="" style="fill: blue;"></path><path d="" style="fill: green;"></path><path d="" style="fill: yellow;"></path><path d="" style="fill: white;"></path></svg>
    </div>


  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Rx.5.0.1.js"></script>
    <script id="rendered-js">
        "use strict";
       
        console.clear();
        class App {
            constructor(container) {
                this.width = 600;
                this.height = 600;
                this.followers = [];
                this.colors = ['red',
                    'blue',
                    'green',
                    'yellow',
                    'white'];
                this.previewMode = false;
                this.record = false;
                this.recording = [];
                console.log('APP STARTED');
                this.previewMode = location.pathname.match(/fullcpgrid/i);
                this.container = container;
                this.svg = document.getElementById('stage');
                window.addEventListener('resize', () => this.onResize());
                this.onResize();
                this.colors.map(color => this.followers.push(new Follower(this.svg, color)));
                let input = new Input(this.container);
                input.starts.subscribe(() => {
                    this.recording = [];
                 .........完整代码请登录后点击上方下载按钮下载查看