meowgine实现鱼儿与睡莲跟谁鼠标游动动画效果代码-html代码-BFW代码库

meowgine实现鱼儿与睡莲跟谁鼠标游动动画效果代码

代码语言：html

所属分类：动画

代码描述：meowgine实现鱼儿与睡莲跟谁鼠标游动动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
@import url("https://fonts.googleapis.com/css2?family=Bangers&family=Roboto&display=swap");
        body {
            height: 100vh;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ffe792;
        }

        .container {
            width: 88vmin;
            -webkit-animation: appearing 3s ease-in-out;
            animation: appearing 3s ease-in-out;
        }
@-webkit-keyframes appearing {
            0% {
                opacity: 0;
                transform: scale(0);
            }
            10% {
                opacity: 0;
                transform: scale(0);
            }
        }
@keyframes appearing {
            0% {
                opacity: 0;
                transform: scale(0);
            }
            10% {
                opacity: 0;
                transform: scale(0);
            }
        }

        .viewbox {
            display: block;
            background-color: #8acbb5;
            border: 2vmin solid #c9daa4;
            border-radius: 54% 46% 36% 64%/54% 61% 39% 46%;
            cursor: pointer;
        }

        .help {
            position: absolute;
            left: 3vmin;
            top: 3vmin;
            font-family: "Roboto", sans-serif;
            font-size: 2.5vmin;
            color: #8acbb5;
            display: inline-block;
            padding: 2vmin;
            background: #fff;
            box-shadow: -0.5vmin 0.5vmin 0 #c1ab81;
            border-bottom: 0.5vmin solid #c9daa4;
            -webkit-animation: bounce-in 1s ease-in-out;
            animation: bounce-in 1s ease-in-out;
        }
@-webkit-keyframes bounce-in {
            0% {
                transform: scale(0);
            }
            10% {
                transform: scale(0);
            }
            50% {
                transform: scale(1.2);
            }
        }
@keyframes bounce-in {
            0% {
                transform: scale(0);
            }
            10% {
                transform: scale(0);
            }
            50% {
                transform: scale(1.2);
            }
        }
    </style>


</head>

<body>
    <main class="container">
        <canvas class="viewbox"></canvas>
    </main>
    <div class="help">
        Tap the water
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/meowgine.min.js"></script>

<script>
    (() => {
        "use strict";

        let viewbox = {};
        let fish = {};
        let lily = {};
        let cursor = {};

        const init = () => {
            viewbox = new mg.Viewbox(".viewbox", ".container");
            viewbox.resize();

            fish = new mg.Particle(25, 25, 0, 0);
            lily = new mg.Particle(50, 50, 0, 0);
            lily.radius = 7;
            cursor = new mg.Particle(50, 50, 0, 0);
            cursor.radius = 2;

            viewbox.element.addEventListener("click", event => {
                cursor.x = viewbox.pxToVw(event.clientX - viewbox.x0);
                cursor.y = viewbox.pxToVh(event.clientY - viewbox.y0);
            });

            window.addEventListener("resize", () => {
                viewbox.resize();
            });

            loop();
        };

        const loop = () => {
            viewbox.clear();

            lily.direction = fish.angleTo({
                x: cursor.x, y: cursor.y
            });
            lily.speed = fish.distanceTo({
                x: cursor.x, y: cursor.y
            }) / 80;

            fish.direction = fish.angleTo({
                x: lily.x, y: lily.y
            });
            fish.speed = fish.distanceTo({
                x: lily.x, y: lily.y
            }) / 50;

            fish.update();
            lily.update();
            cursor.update();

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