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">
            <ellipse cx="100" cy="202" rx="100" ry="25" fill="#C4C4C4" />
        </clipPath>
        <clipPath id="b" x="0" y="0" width="200" height="227">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M200 0H0v202c0 13.807 44.772 25 100 25s100-12.193 110-25V0z" fill="#C4C4C4" />
        </clipPath>
        <mask id="c" mask-type="alpha" maskUnits="userSpaceOnUse" x="15" y="20" width="171" height="250">
            <path d="M100.5 20c-46.944 0-85 38.056-85 85v165h170V105c0-46.944-38.056-85-85-85z" fill="#C4C4C4" />
        </mask>
        <mask id="d" mask-type="alpha" maskUnits="userSpaceOnUse" x="60" y="95" width="81" height="50">
            <ellipse cx="100.5" cy="120" rx="40" ry="25" fill="#F3ECEC" />
        </mask>
        <mask id="e" mask-type="alpha" maskUnits="userSpaceOnUse" x="22" y="13" width="157" height="57">
            <path d="M99.5 13C71 13 29 30.5 22 69.5h157c-5.5-43-51-56.5-79.5-56.5z" fill="#423F3F" />
        </mask>
        <g class="hole" transform="translate(0 -1)" clip-path="url(#a)">
            <ellipse class="hole__lip" cx="100" cy="202" rx="100" ry="25" fill="#C4C4C4" />
            <ellipse class="hole__hole" cx="100" cy="214" rx="100" ry="25" fill="#000" />
        </g>
        <g clip-path="url(#b)">
            <g class="mole">
                <path class="mole__body" d="M100.5 20c-46.944 0-85 38.056-85 85v165h170V105c0-46.944-38.056-85-85-85z" fill="#C4C4C4" />
                <g mask="url(#c)">
                    <rect class="mole__tummy" x="45.5" y="164" width="110" height="123" rx="55" fill="#F3ECEC" />
                </g>
                <g class="mole__face">
                    <g mask="url(#d)">
                        <ellipse class="mole__chin" cx="100.5" cy="120" rx="40" ry="25" fill="#E2E0E0" />
                        <ellipse class="mole__muzzle" cx="100.5" cy="116" rx="40" ry="25" fill="#F3ECEC" />
                    </g>
                    <ellipse class="mole__nose" cx="100..........完整代码请登录后点击上方下载按钮下载查看