gsap+svg实现吉他弹奏动画效果代码-html代码-BFW代码库

gsap+svg实现吉他弹奏动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+svg实现吉他弹奏动画效果代码

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

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

<head>

    <meta charset="UTF-8">




    <style>
        html, body {
            height: 100%;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        svg {
            width: 100%;
            max-width: 800px;
            height: 100vh;
            visibility: hidden;
        }

        .gsap-3-logo {
            width: 20vw;
            max-width: 150px;
            position: fixed;
            bottom: 15px;
            right: 15px;
        }
    </style>



</head>

<body>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600" xml:space="preserve">
        <defs>
            <clipPath id="holeClip">
                <circle cx="400" cy="371.122" r="22.69" />
            </clipPath>
            <clipPath id="neckClip">
                <rect x="383.873" y="110.561" width="32.254" height="253.636" />
            </clipPath>
        </defs>
        <path id="notePath" fill="none" d="M438.102,368.318c0,0,3.357-68.318,45.062-82.958c3.995-1.402,11.503-4.043,11.503-4.043
            c26.977-13.359,44.659-32.345,40.3-62.132c-2.877-19.661-27.7-31.651-44.202-35.654c-0.898-0.218-1.802-0.426-2.678-0.72
            c-27.313-9.184-23.131-54.256-23.131-54.256" />
        <path id="notepath2" fill="none" d="M451.744,313.113c0.357,0,0.713,0.002,1.066,0.005c12.958,0.117,18.587-3.061,25.342,1.303
            c2.246,1.451,3.955,3.574,5.141,5.97c2.767,5.59,10.022,14.116,23.589,14.116c14.118,0,28.743-12.801,28.743-12.801
            .........完整代码请登录后点击上方下载按钮下载查看