gsap+svg实现篮球在篮球框上跳动动画效果代码-html代码-BFW代码库

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="bas.........完整代码请登录后点击上方下载按钮下载查看