gsap+svg实现篮球在篮球框上跳动动画效果代码
代码语言：html
所属分类：动画
代码描述：gsap+svg实现篮球在篮球框上跳动动画效果代码，结合了MorphSVGPlugin3、EasePack、MotionPathPlugin插件。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
background-color: #32292F;
overflow: hidden;
text-align:center;
display: flex;
align-items: center;
justify-content: center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
svg {
min-height: 80vh;
visibility: hidden;
}
</style>
</head>
<body >
<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<defs>
<radialGradient id="ballShineGrad" cx="400" cy="286.7" fx="400" fy="286.7" r="80" gradientTransform="translate(827.84 183.02) rotate(136.27) scale(1 .8)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff"/>
<stop offset=".05" stop-color="#fefcfd" stop-opacity=".99"/>
<stop offset=".09" stop-color="#fdf5f8" stop-opacity=".95"/>
<stop offset=".12" stop-color="#fbe9f0" stop-opacity=".89"/>
<stop offset=".15" stop-color="#f8d8e5" stop-opacity=".8"/>
<stop offset=".18" stop-color="#f4c3d6" stop-opacity=".69"/>
<stop offset=".21" stop-color="#efa8c4" stop-opacity=".55"/>
<stop offset=".23" stop-color="#ea88ae" stop-opacity=".39"/>
<stop offset=".26" stop-color="#e36496" stop-opacity=".2"/>
</radialGradient>
<radialGradient id="shadowGrad" cx="400" cy="300" fx="400" fy="300" r="45" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#000"/>
<stop offset=".89" stop-color="#a98291" stop-opacity=".27"/>
</radialGradient>
<radialGradient id="ballGrad1" cx="397.53" cy="295.98" fx="397.53" fy="295.98" r="47.04" gradientUnits="userSpaceOnUse">
<stop offset=".62" stop-color="#b63366" stop-opacity=".19"/>
<stop offset=".78" stop-color="#360f1e" stop-opacity=".61"/>
<stop offset="1" stop-color="#0f0408" stop-opacity=".81"/>
</radialGradient>
<path id="endPath" d="M400,262.5c20.71,0,37.5,16.79,37.5,37.5s-16.79,37.5-37.5,37.5" fill="none" stroke="#bec2c6" stroke-miterlimit="10" stroke-width="6"/>
<linearGradient id="basketballGrad" x1="408.9" y1="205.37" x2="408.9" y2="273.1" gradientTransform="translate(204.57 -160.3) rotate(30)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FFE3E0"/>
<stop offset="1" stop-color="#ccc"/>
</linearGradient>
<linearGradient id="basketballGrad-2" x1="394.25" y1="205.37" x2="394.25" y2="273.1" xlink:href="#basketballGrad"/>
<linearGradient id="basketballGrad-3" x1="408.9" y1="205.37" x2="408.9" y2="273.1" gradientTransform="translate(461.88 -196.83) rotate(60)" xlink:href="#basketballGrad"/>
<linearGradient id="basketballGrad-4" x1="394.25" y1="205.37" x2="394.25" y2="273.1" gradientTransform="translate(461.88 -196.83) rotate(60)" xlink:href="#basketballGrad"/>
<linearGradient id="basketballGrad-5" x1="408.9" y1="205.37" x2="408.9" y2="273.1" gradientTransform="translate(702.99 -99.81) rotate(90)" xlink:href="#basketballGrad"/>
<linearGradient id="basketballGrad-6" x1="394.25" y1="205.37" x2="394.25" y2="273.1" gradientTransform="translate(702.99 -99.81) rotate(90)" xlink:href="#basketballGrad"/>
<linearGradient id="basketballGrad-7" y1="205.37" y2="273.1" gradientTransform="translate(863.28 104.76) rotate(120)" xlink:href="#basketballGrad"/>
<linearGradient id="basketballGrad-8" x1="394.25" y1="205.37" x2="394.25" y2="273.1" gradientTransform="translate(863.28 104.76) rotate(120)" xlink:href="#basketballGrad"/>
<linearGradient id="basketballGrad-9" x1="408.9" y1="205.37" x2="408.9" y2="273.1" gradientTransform="translate(899.82 362.07) rotate(150)" xlink:href="#basketballGrad"/>
<linearGradient id="basketballGrad-10" x1="394.25" y1="205.37" x2="394.25" y2="273.1" gradientTransform="translate(899.82 362.07) rotate(150)" xlink:href="#basketballGrad"/>
<linearGradient id="basketballGrad-11" x1="408.9" y1="205.37" x2="408.9" y2="273.1" gradientTransform="translate(802.8 603.17) rotate(-180)" xlink:href="#basketballGrad"/>
<linearGradient id="basketballGrad-12" x1="394.25" y1="205.37" x2="394.25" y2="273.1" gradientTransform="translate(802.8 603.17) rotate(-180)" xlink:href="#basketballGrad"/>
<linearGradient id="basketballGrad-13" x1="408.9" y1="205.37" x2="408.9" y2="273.1" gradientTransform="translate(598.23 763.47) rotate(-150)" xlink:href="#basketballGrad"/>
<linearGradient id="basketballGrad-14" x1="394.25" y1="205.37" x2="394.25" y2="273.1" gradientTransform="translate(598.23 763.47) rotate(-150)" xlink:href="#basketballGrad"/>
<linearGradient id="basketballGrad-15" x1="408.9" y1="205.37" x2="408.9" y2="273.1" gradientTransform="translate(340.92 800) rotate(-120)" xlink:href="#basketballGrad"/>
<linearGradient id="basketballGrad-16" x1="394.25" y1="205.37" x2="394.25" y2="273.1" gradientTransform="translate(340.92 800) rotate(-120)" xlink:href="#basketballGrad"/>
<linearGradient id="basketballGrad-17" x1="408.9" y1="205.37" x2="408.9" y2="273.1" gradientTransform="translate(99.81 702.99) rotate(-90)" xlink:href="#basketballGrad"/>
<linearGradient id="basketballGrad-18" x1="394.25" y1="205.37" x2="394.25" y2="273.1" gradientTransform="translate(99.81 702.99) rotate(-90)" xlink:href="#basketballGrad"/>
<linearGradient id="basketballGrad-19" x1="408.9" x2="408.9" gradientTransform="translate(-60.48 498.42) rotate(-60)" xlink:href="#basketballGrad"/>
<linearGradient id="basketballGrad-20" x1="394.25" y1="205.37" x2="394.25" y2="273.1" gradientTransform="translate(-60.48 498.42) rotate(-60)" xlink:href="#basketballGrad"/>
<linearGradient id="basketballGrad-21" x1="408.9" y1="205.37" x2="408.9" y2="273.1" gradientTransform="translate(-97.02 241.11) rotate(-30)" xlink:href="#basketballGrad"/>
<linearGradient id="basketballGrad-22" x1="394.25" y1="205.37" x2="394.25" y2="273.1" gradientTransform="translate(-97.02 241.11) rotate(-30)" xlink:href="#basketballGrad"/>
<linearGradient id="basketballGrad-23" x1="408.9" y1="205.37" x2="408.9" y2="273.1" gradientTransform="matrix(1,0,0,1,0,0)" xlink:href="#basketballGrad"/>
<linearGradient id="basketballGrad-24" x1="394.25" y1="205.37" x2="394.25" y2="273.1" gradientTransform="matrix(1,0,0,1,0,0)" xlink:href="#basketballGrad"/>
</defs>
<circle id="mainPath" cx="400.93" cy="300.93" r="95.31" fill="none" />
<g id="net">
<g>
<path d="m449.66,218.35l3.45,2.08.07.04c.82.49,1.19,1.44.98,2.32l-8.37,36.01v.05c-.18.73-.84,1.21-1.56,1.17l-17.45-.87,1.19-1.7,4.98,13.04v.03c.21.51-.05,1.08-.56,1.27-.19.07-.39.08-.58.04l-11.21-2.68.86-1.15,5.12,9.71v.02c.17.3.05.66-.24.82-.15.08-.33.09-.48.04l-9.07-3.11c-.24-.08-.36-.34-.28-.58.08-.23.33-.36.56-.29l9.17,2.81-.72.87-5.43-9.54c-.21-.38-.08-.85.29-1.07.17-.1.36-.12.54-.09h.03s11.3,2.29,11.3,2.29l-1.13,1.34-5.44-12.86c-.26-.62.03-1.34.65-1.61.16-.07.33-.1.49-.1h.05s17.47.26,17.47.26l-1.56,1.22,7.1-36.28,1.05,2.36-3.53-1.95c-1.1-.61-1.49-1.99-.89-3.09s1.99-1.49,3.09-.89c.02.01.05.03.07.04Z" fill="url(#basketballGrad)"/>
<path d="m447.39,222.28l-3.45-2.08,2.57-.27-27.87,24.28.28-1.96,8.96,15,.02.04c.35.58.16,1.33-.42,1.68-.16.1-.34.15-.52.17l-14.51,1.33.61-1.67,8.29,9.03.02.02c.29.32.27.81-.05,1.11-.15.14-.33.2-.52.21l-10.12.12.42-1.04,6.15,6.48c.17.18.17.47-.02.64-.18.17-.46.16-.63,0l-6.38-6.26c-.24-.23-.24-.62,0-.86.11-.11.26-.17.4-.18h.02s10.11-.48,10.11-.48l-.55,1.33-8.59-8.75c-.38-.39-.38-1.01.01-1.4.16-.16.36-.25.57-.27h.03s14.46-1.82,14.46-1.82l-.92,1.89-9.48-14.68c-.4-.63-.29-1.44.24-1.93l.04-.04,27-25.25c.7-.65,1.71-.75,2.5-.31l.07.04,3.53,1.95c1.1.61,1.49,1.99.89,3.09-.61,1.1-1.99,1.49-3.09.89-.02-.01-.05-.03-.07-.04Z" fill="url(#basketballGrad-2)"/>
</g>
<g>
<path d="m484.81,253.63l1.95,3.53.04.07c.46.83.31,1.84-.31,2.51l-25.25,27-.04.04c-.51.54-1.32.63-1.93.24l-14.68-9.48,1.88-.88-2.2,13.79v.03c-.09.54-.6.9-1.13.82-.2-.03-.38-.13-.52-.26l-8.37-7.93,1.32-.57-.42,10.97v.02c-.01.33-.3.6-.63.58-.17,0-.33-.09-.43-.21l-6.3-7.23c-.16-.19-.15-.48.04-.64.19-.16.46-.15.63.03l6.53,7.02-1.06.39.07-10.97c0-.43.36-.78.79-.78.2,0,.38.07.51.2l.02.02,8.65,7.63-1.65.59,1.72-13.86c.08-.67.69-1.15,1.37-1.06.17.02.33.08.47.16l.04.03,15,8.96-1.96.28,24.28-27.87-.27,2.57-2.08-3.45c-.65-1.07-.3-2.47.78-3.12s2.47-.3,3.12.78c.01.02.03.05.04.07Z" fill="url(#basketballGrad-3)"/>
<path d="m480.88,255.9l-1.95-3.53,2.36,1.05-36.28,7.1,1.22-1.56.26,17.47v.04c.01.68-.53,1.23-1.21,1.24-.19,0-.37-.04-.53-.11l-13.24-6.1,1.37-1.14,2.67,11.97v.03c.1.42-.17.84-.59.94-.2.04-.39,0-.55-.08l-8.82-4.96.88-.69,2.09,8.69c.06.24-.09.49-.34.55-.24.06-.48-.09-.54-.32l-2.39-8.61c-.09-.32.1-.66.42-.75.15-.04.31-.02.44.04h.02s8.99,4.65,8.99,4.65l-1.14.88-3.07-11.88c-.14-.53.18-1.07.71-1.2.22-.06.44-.04.63.05h.03s13.43,5.67,13.43,5.67l-1.74,1.17-.87-17.45c-.04-.74.47-1.39,1.17-1.55h.05s36.01-8.38,36.01-8.38c.93-.22,1.86.21,2.32.98l.04.07,2.08,3.45c.65,1.07.3,2.47-.78,3.12-1.07.65-2.47.3-3.12-.78-.01-.02-.03-.05-.04-.07Z" fill="url(#basketballGrad-4)"/>
</g>
<g>
<path d="m497.62,301.76l-.07,4.03v.08c-.02.95-.66,1.75-1.52,2.01l-35.37,10.75-.05.02c-.71.22-1.46-.12-1.79-.76l-7.97-15.55,2.07.18-8.8,10.84-.02.03c-.34.42-.96.49-1.38.14-.16-.13-.27-.3-.32-.48l-3.29-11.05,1.43.17-5.85,9.28v.02c-.19.28-.56.37-.85.19-.15-.09-.24-.24-.27-.4l-1.84-9.41c-.05-.25.11-.48.36-.53.24-.05.47.11.53.34l2.15,9.35-1.12-.19,5.54-9.47c.22-.37.7-.5,1.07-.28.17.1.29.25.35.43v.03s3.68,10.93,3.68,10.93l-1.73-.31,8.41-11.14c.41-.54,1.18-.65,1.72-.24.14.1.25.23.33.37l.02.04,8.51,15.26-1.84-.74,34.97-11.99-1.52,2.09-.07-4.03c-.02-1.25.98-2.29,2.23-2.31s2.29.98,2.31,2.23c0,.02,0,.06,0,.08Z" fill="url(#basketballGrad-5)"/>
<path d="m493.08,301.76l.07-4.03,1.52,2.09-34.97-11.99,1.84-.74-8.51,15.26-.02.04c-.33.59-1.08.8-1.67.47-.16-.09-.3-.22-.4-.36l-8.41-11.9,1.76-.31-3.68,11.7v.03c-.14.41-.58.64-.99.51-.19-.06-.34-.19-.44-.35l-5.16-8.7,1.11-.16-2.53,8.57c-.07.24-.32.38-.56.31-.24-.07-.37-.31-.31-.55l2.23-8.65c.08-.32.41-.52.74-.44.15.04.28.13.36.26v.02s5.48,8.51,5.48,8.51l-1.43.19,3.28-11.82c.15-.53.69-.83,1.21-.69.22.06.4.19.52.35l.02.03,8.81,11.61-2.09.15,7.97-15.55c.34-.66,1.1-.97,1.79-.76l.05.02,35.37,10.75c.91.28,1.5,1.11,1.52,2.01v.08s.07,4.03.07,4.03c.02,1.25-.98,2.29-2.23,2.31-1.25.02-2.29-.98-2.31-2.23,0-.02,0-.06,0-.08Z" fill="url(#basketballGrad-6)"/>
</g>
<g>
<path d="m484.64,349.85l-2.08,3.45-.04.07c-.49.82-1.44,1.19-2.32.98l-36.01-8.37h-.05c-.73-.18-1.21-.84-1.17-1.56l.87-17.45,1.7,1.19-13.04,4.98h-.03c-.51.21-1.08-.05-1.27-.56-.07-.19-.08-.39-.04-.58l2.68-11.21,1.15.86-9.71,5.12h-.02c-.3.17-.66.05-.82-.24-.08-.15-.09-.33-.04-.48l3.11-9.07c.08-.24.34-.36.58-.28.23.08.36.33.29.56l-2.81,9.17-.87-.72,9.54-5.43c.38-.21.85-.08,1.07.29.1.17.12.36.09.54v.03s-2.29,11.3-2.29,11.3l-1.34-1.13,12.86-5.44c.62-.26,1.34.03,1.61.65.07.16.1.33.1.49v.05s-.26,17.47-.26,17.47l-1.22-1.56,36.28,7.1-2.36,1.05,1.95-3.53c.61-1.1,1.99-1.49,3.09-.89s1.49,1.99.89,3.09c-.01.02-.03.05-.04.07Z" fill="url(#basketballGrad-7)"/>
<path d="m480.71,347.58l2.08-3.45.27,2.57-24.28-27.87,1.96.28-15,8.96-.04.02c-.58.35-1.33.16-1.68-.42-.1-.16-.15-.34-.17-.52l-1.33-14.51,1.67.61-9.03,8.29-.02.02c-.32.29-.81.27-1.11-.05-.14-.15-.2-.33-.21-.52l-.12-10.12,1.04.42-6.48,6.15c-.18.17-.47.17-.64-.02-.17-.18-.16-.46,0-.63l6.26-6.38c.23-.24.62-.24.86,0,.11.11.17.26.18.4v.02s.48,10.11.48,10.11l-1.33-.55,8.75-8.59c.39-.38,1.01-.38,1.4.01.16.16.25.36.27.57v.03s1.82,14.46,1.82,14.46l-1.89-.92,14.68-9.48c.63-.4,1.44-.29,1.93.24l.04.04,25.25,27c.65.7.75,1.71.31,2.5l-.04.07-1.95,3.53c-.61,1.1-1.99,1.49-3.09.89-1.1-.61-1.49-1.99-.89-3.09.01-.02.03-.05.04-.07Z" fill="url(#basketballGrad-8)"/>
</g>
<g>
<path d="m449.36,385l-3.53,1.95-.07.04c-.83.46-1.84.31-2.51-.31l-27-25.25-.04-.04c-.54-.51-.63-1.32-.24-1.93l9.48-14.68.88,1.88-13.79-2.2h-.03c-.54-.09-.9-.6-.82-1.13.03-.2.13-.38.26-.52l7.93-8.37.57,1.32-10.97-.42h-.02c-.33-.01-.6-.3-.58-.63,0-.17.09-.33.21-.43l7.23-6.3c.19-.16.48-.15.64.04.16.19.15.46-.03.63l-7.02,6.53-.39-1.06,10.97.07c.43,0,.78.36.78.79,0,.2-.07.38-.2.51l-.02.02-7.63,8.65-.59-1.65,13.86,1.72c.67.08,1.15.69,1.06,1.37-.02.17-.08.33-.16.47l-.03.04-8.96,15-.28-1.96,27.87,24.28-2.57-.27,3.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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