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-..........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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