gsap实现地鼠从洞里爬出动画效果代码-html代码-BFW代码库

gsap实现地鼠从洞里爬出动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap实现地鼠从洞里爬出动画效果代码

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

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

<head>

    <meta charset="UTF-8">





    <style>
        *,
        *:after,
        *:before {
            box-sizing: border-box;
        }
        body {
            min-height: 100vh;
            display: grid;
            place-items: center;
            background: linear-gradient(#dbf0f0 0 52%, #b0d194 50%);
        }
        .mole-in-hole {
            height: 25vmin;
        }
        .mole {
            display: none;
        }
        .mole__eye {
            fill: #1a1a1a;
        }
        .mole__whiskers {
            stroke: #1c1717;
        }
        .mole__body {
            fill: #bfbfbf;
        }
        .mole__tummy,
        .mole__muzzle {
            fill: #f4f5f6;
        }
        .mole__chin {
            fill: #abb5ba;
        }
        .mole__nose {
            fill: #f8c8bf;
        }
        .cap__body {
            fill: #1c1717;
        }
        .cap__strap,
        .cap__top,
        .cap__peak {
            fill: #d94426;
        }
        .hole__lip {
            fill: #635036;
        }
    </style>




</head>

<body>
    <svg class="mole-in-hole" viewBox="0 0 200 227" fill="none" xmlns="http://www.w3.org/2000/svg">
        <clipPath id="a" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="177" width="200" height="50">
     .........完整代码请登录后点击上方下载按钮下载查看