gsap+svg实现小鸡听音乐跳舞动画效果代码
代码语言：html
所属分类：动画
代码描述：gsap+svg实现小鸡听音乐跳舞动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background-color: #e6e6e6;
}
svg {
width: 100vw;
height: 100vh;
}
.hidden {
visibility: hidden;
}
</style>
</head>
<body >
<svg viewBox="190 190 700 700" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="scene">
<rect width="1080" height="1080" fill="#E6E6E6" />
<ellipse id="shadow" cx="526.126" cy="765.556" rx="175.972" ry="33.5184" fill="#DDDDDD" />
<g id="legLeft">
<rect id="Rectangle 6" width="28.4382" height="69.5478" rx="14.2191" transform="matrix(-1 0 0 1 483.913 715.256)" fill="#6B6B6B" />
<rect width="28.4382" height="69.5478" rx="14.2191" transform="matrix(-0.735032 -0.678032 -0.678032 0.735032 487.568 725.065)" fill="#6B6B6B" />
</g>
<g id="legRight">
<rect x="567.914" y="714.395" width="28.4382" height="69.5478" rx="14.2191" fill="#6B6B6B" />
<rect x="564.259" y="724.203" width="28.4382" height="69.5478" rx="14.2191" transform="rotate(-42.6901 564.259 724.203)" fill="#6B6B6B" />
</g>
<g id="middle">
<g id="body">
<ellipse cx="528.781" cy="653.821" rx="126.827" ry="112.632" fill="#2AD867" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M528.781 766.454C598.826 766.454 655.608 716.026 655.608 653.821C655.608 651.881 655.553 649.952 655.444 648.035L655.156 646.867C574.777 745.976 524.171 757.356 424.893 717.088L428.616 722.919C451.822 749.411 488.06 766.454 528.781 766.454Z" fill="#28CF65" />
</g>
<path id="armRight" d="M654.385 717.896C703.901 688.949 652.099 523.642 600.298 546.495C531.738 602.867 589.633 740.75 654.385 717.896Z" fill="#1F984B" />
<path id="armLeft" d="M386.005 717.896C336.489 688.949 388.29 523.642 440.092 546.495C508.652 602.867 450.757 740.75 386.005 717.896Z" fill="#1F984B" />
</g>
<g id="face">
<g id="hair">
<path d="M430.278 241.052C414.769 255.053 445.117 296.776 470.127 320.319C470.127 320.319 554.349 356.507 538.84 307.395C523.331 258.284 445.787 227.051 430.278 241.052Z" fill="#1F984B" />
<path d="M369.966 308.472C361.565 329.366 436.524 359.738 443.202 363.83C449.879 367.923 482.405 331.951 482.405 331.951C449.233 298.133 378.367 287.579 369.966 308.472Z" fill="#1F984B" />
<path d="M530.654 337.982C508.899 291.025 611.214 246.006 627.154 263.884C643.094 281.763 552.41 384.939 530.654 337.982Z" fill="#1F984B" />
<path d="M558.011 352.629C558.011 352.629 639.863 283.701 666.142 319.027C688.827 349.522 585.345 375.362 572.001 384.353L573.304 387.309C570.035 386.779 569.887 385.777 572.001 384.353L558.011 352.629Z" fill="#1F984B" />
</g>
<path d="M422.786 365.544L416.671 357.833C479.949 290.567 578.589 303.861 624.585 363.683L618.204 370.329L523.818 399.576L422.786 365.544Z" fill="#656565" />
<g id="faceBase">
<path d="M650.5 461C663.477 569.845 586.864 587.5 517 587.5C429.158 584.284 378.804 560.746 386.495 461C393.715 367.359 447.136 334.5 517 334.5C586.864 334.5 637.523 352.155 650.5 461Z" fill="#2AD867" />
</g>
<g id="eyeLeft">
<path d="M422.325 439.558C429.012 415.597 491.899 415.601 498.463 436.276C505.026 456.952 492.556 485.175 462.691 485.175C432.827 485.175 415.639 463.519 422.325 439.558Z" fill="#FEFFFC" />
<g id="Mask Group">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="420" y="421" width="81" height="65">
<path d="M422.325 439.558C429.012 415.597 491.899 415.601 498.463 436.276C505.026 456.952 492.556 485.175 462.691 485.175C432.827 485.175 415.639 463.519 422.325 439.558Z" fill="#FEFFFC" />
</mask>
<g mask="url(#mask0)">
<circle id="eyeballLeft" cx="464.601" cy="453.822" r="28.0472" fill="#5A5A5A" />
</g>
</g>
</g>
<g id="eyeRight">
<path d="M617.532 439.558C610.845 415.597 547.958 415.601 541.395 436.276C534.831 456.952 547.302 485.175 577.166 485.175C607.03 485.175 624.219 463.519 617.532 439.558Z" fill="#F9FFFB" />
<g id="Mask Group_2">
<mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="539" y="421" width="80" height="65">
<path d="M617.532 439.558C610.845 415.597 547.958 415.601 541.395 436.276C534.831 456.952 547.302 485.175 577.166 485.175C607.03 485.175 624.219 463.519 617.532 439.558Z" fill="#F9FFFB" />
</mask>
<g mask="url(#mask1)">
<circle id="eyeballRight" cx="575.525" cy="453.822" r="28.0472" fill="#5A5A5A" />
</g>
</g>
</g>
<g id="eyeLids">
<rect id="eyelidTop" x="411" y="392" width="211" height="24" fill="#2AD867" />
<rect id="eyelidBottom" x="411" y="486" width="211" height="53" fill="#2AD867" />
</g>
<path id="faceShadow" fill-rule="evenodd" clip-rule="evenodd" d="M553.108 341.541C591.695 365.828 611.043 378.006 628.033 448.747C646.083 523.9 582.089 577.065 484.62 583.3C481.531 583.497 478.672 583.697 476.03 583.898C488.565 585.848 502.255 586.96 517 587.5C586.864 587.5 663.477 569.845 650.5 461C639.249 366.628 599.67 340.807 543.806 335.609C544.373 336.003 544.991 336.413 545.661 336.839C548.221 338.464 550.702 340.026 553.108 341.541Z" fill="#28CB62" />
<g id="nose">
<path d="M519.079 487.472C465.586 487.472 476.744 568.204 519.079 568.204C561.414 568.204 572.572 487.472 519.079 487.472Z" fill="#6C997A" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M554.095 534.621L553.537 534.073C526.712 543.846 510.277 542.334 483.505 531.336C486.111 550.288 499.136 568.204 519.079 568.204C537.865 568.204 550.512 552.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0