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
            s20.668-19.734,20.668-45.647c0-27.623-21.934-32.578-29.251-42.691c-7-9.674-6.302-22.796,1.761-31.603
            c10.034-10.959,29.372-21.235,29.372-50.272"
/>
       
<line id="shadow" fill="none" stroke="#262626" stroke-width="3" stroke-miterlimit="10" x1="243.336" y1="571.535" x2="556.664" y2="571.535" />
       
<g id="guitar">
           
<circle id="circle" fill="none" stroke="#262626" stroke-width="1" stroke-miterlimit="10" cx="400" cy="311.122" r="54.265" />
           
<path id="note" fill="#7683F3" d="M442.539,352.692c-0.792-0.541-1.595-1.458-2.107-2.098v-1.593c0-0.315-0.255-0.57-0.57-0.57
                c-0.315,0-0.57,0.255-0.57,0.57v14.054c-0.889-0.708-2.219-1.158-3.707-1.158c-2.676,0-4.846,1.456-4.846,3.253
                c0,1.796,2.17,3.253,4.846,3.253c2.676,0,4.846-1.456,4.846-3.253c0-0.129-0.012-0.256-0.034-0.382
                c0.021-0.059,0.034-0.122,0.034-0.188v-10.499c1.285,0.341,2.923,1.473,2.923,1.473c1.575,1.011,1.541,3.14,1.541,3.14
                C446.664,355.529,443.849,353.587,442.539,352.692z"
/>
           
<path id="note2" fill="#7683F3" d="M456.344,320.211l-0.002-0.063c0-0.025-0.001-0.049-0.003-0.074l-0.434-12.456
                c-0.032-0.928-0.981-1.539-1.839-1.183l-10.387,4.104c-0.516,0.214-0.844,0.729-0.819,1.287l0.363,9.807
                c-0.834-0.358-1.872-0.435-2.917-0.147c-2.083,0.575-3.401,2.384-2.943,4.042c0.457,1.658,2.517,2.535,4.599,1.961
                c1.833-0.506,3.072-1.968,3.032-3.441h0.001l-0.425-9.944c-0.021-0.501,0.275-0.961,0.739-1.151l8.193-3.344
                c0.437-0.178,0.918,0.134,0.933,0.606l0.303,7.501c-0.815-0.413-1.846-0.53-2.881-0.245c-1.968,0.543-3.193,2.327-2.736,3.985
                c0.457,1.658,2.424,2.561,4.392,2.018c1.684-0.465,2.82-1.837,2.828-3.262L456.344,320.211z"
/>
           
<rect id="neckBack" x="383.873" y="110.561" fill="#3656D8" width="32.254" height="253.636" />
           
<path id="bodyBack" fill="#FFFFFF" stroke="#262626" stroke-width="3" stroke-miterlimit="10" d="M482.801,438.348
                c0,0-2.212-25.285-15.366-41.722c-8.79-10.983-13.654-24.717-12.351-38.724c0.604-6.5,2.996-13.226,5.656-19.364
                c1.425-3.289,2.217-6.817,2.422-10.396c0-30.705-16.613-55.597-63.163-55.597s-63.163,24.892-63.163,55.597
                c0.206,3.579,0.997,7.107,2.422,10.396c2.66,6.139,5.052,12.864,5.656,19.364c1.303,14.007-3.561,27.741-12.351,38.724
                c-13.154,16.437-15.366,41.722-15.366,41.722c-0.345,4.88-0.467,9.777-0.264,14.665c1.505,36.181,14.398,64.25,83.065,64.25
                c68.667,0,81.56-28.069,83.065-64.25C483.269,448.125,483.147,443.228,482.801,438.348z"
/>
           
<path id="bodyFront" fill="#FFFFFF" stroke="#262626" stroke-width="3" stroke-miterlimit="10" d="M482.801,438.348
                c0,0-2.212-25.285-15.366-41.722c-8.79-10.983-13.654-24.717-12.351-38.724c0.604-6.5,2.996-13.226,5.656-19.364
                c1.425-3.289,2.217-6.817,2.422-10.396c0-30.705-16.613-55.597-63.163-55.597s-63.163,24.892-63.163,55.597
                c0.206,3.579,0.997,7.107,2.422,10.396c2.66,6.139,5.052,12.864,5.656,19.364c1.303,14.007-3.561,27.741-12.351,38.724
                c-13.154,16.437-15.366,41.722-15.366,41.722c-0.345,4.88-0.467,9.777-0.264,14.665c1.505,36.181,14.398,64.25,83.065,64.25
                c68.667,0,81.56-28.069,83.065-64.25C483.269,448.125,483.147,443.228,482.801,438.348z"
/>
           
<rect id="neck" x="383.873" y="110.561" fill="#7683F3" width="32.254" height="253.636" />
           
<g id="neckClipGroup" clip-path="url(#neckClip)">
               
<g id="highLightGroup">
                   
<polygon id="neckHighlight2" opacity="0.2" fill="#EBEBEB" points="416.127,300.785 383.873,288.391
                        383.873,267.989 416.127,282.227 416.127,300.785"
/>
                    <polygon id="neckHighlightMorph2" opacity="0.2" fill="none" points="416.127,288.391
                       .........完整代码请登录后点击上方下载按钮下载查看

网友评论0