gsap实现脸部跟随鼠标移动笑脸动画效果代码-html代码-BFW代码库

gsap实现脸部跟随鼠标移动笑脸动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap实现脸部跟随鼠标移动笑脸动画效果代码

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

<html>
<head>
    <meta charset="UTF-8">
    <style>
        body {
            background-color: #F5F5F5;
            overflow: hidden;
        }
        body,
        html {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        svg {
            position: absolute;
            width: 800px;
            height: 600px;
            visibility: hidden;
        }
    </style>

</head>
<body>

    <svg class="mainSVG" viewBox="0 0 800 600" xmlns="https://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
        <title>face follow</title>
        <defs>
            <circle id="backCircle" cx="400" cy="300" r="60" fill="#45B75E" />
            <clipPath id="mainMask">
                <use xlink:href="#backCircle" />

            </clipPath>
        </defs>
        <rect width="100%" height="100%" fill="#FFF" />
        <use xlink:href="#backCircle" />

        <g id="maskedFace" clip-path="url(#mainMask)">
            <circle id="frontCircle" cx="393" cy="300" r="60" fill="#4AC966" />
        </g>
        <g id="faceGroup">
            <g id="eyeGroup">
                <circle id="eyeL" cx="381.58" cy="300.24" r="7" fill="#fdfdfd" />
                <circle id="eyeR" cx="418.42" cy="300.24" r="7" fill="#fdfdfd" />
            </g>
            <path id="mouth" d="M418.5,315.24a18.5,18.5,0,0,1-37,0h37Z" fill="#fdfdfd" />
            <circle id="mouthOoh" cx="400" cy="326" fill="none" stroke="#FFF" stroke-width="4" r="4" opacity="0" />
        </g>
    </svg>



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

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

    <script>
        var xmlns = "http://www.w3.org/2000/svg",
        xlinkns = &qu.........完整代码请登录后点击上方下载按钮下载查看