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 f.........完整代码请登录后点击上方下载按钮下载查看