gsap+svg实现骑行中的自行车动画效果代码-html代码-BFW代码库

gsap+svg实现骑行中的自行车动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+svg实现骑行中的自行车动画效果代码岩灯动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
html, body {
  width:100%;
  height:100%;
  overflow:hidden;
  background:lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
}

svg {
  width:80%;
  height:80%;  
  max-width:600px;
  overflow:visible;
}
</style>


</head>

<body  >
  <svg viewBox="0 0 510 510">
  <path stroke="#00000010" stroke-width="12" stroke-linecap="round" d="M26,447 L477,447" />
  <path id="road" stroke="#ffffff30" stroke-width="4" stroke-linecap="round" d="M28,447 L475,447" stroke-dasharray="35 55" />
  
  <g class="crank">
    <path stroke="#9D9FA2" stroke-width="6" d="M225,368 L265,368"/>
    <path class="pedal" stroke="#000" stroke-width="8" d="M255,368 L275,368"/>    
  </g>
  <g id="wheel">
		<path id="spokes" fill="none" stroke="#9D9FA2" stroke-width="3" d="M399.8,250v192.4 M496,346.2H303.6
			 M363,257.4l73.6,177.8 M488.7,309.4l-177.8,73.6 M467.8,278.2L331.7,414.3 M467.8,414.3L331.7,278.2 M436.6,257.4L363,435.1
			 M488.7,383.1l-177.8-73.6"/>
    <circle id="tire" cx="400" cy="346" r="94" stroke-width="11" stroke="#000" fill="none"/>
		<circle id="rim" cx="400" cy="346" r="81" stroke-width="4" stroke="#fff" fill="none"/>
    <circle id="nexus" cx="400" cy="346" r="7.5" />
	</g>
  
  <use href="#wheel" x="-299"/>
  <g id="frame">
    <path fill="#fff" d="M402.9,344.9c-5.5-6.8-16.6-19.3-19.5-24.9c0,0-34.1-110.3-42.2-137.3l-7.5,2.9l8.7,28.1H180.8
    c0,0-16.6-53.1-17-54.3l-7.5,2.4c4.8,15.5,13.9,44.4,18.8,60.1c-23.5,38.2-54.3,88.2-77.8,126.4v0l0,0.1
    c38,7.5,92.1,18.3,129.9,25.8c1.2-1.4,121.5-140.6,121.5-140.6c4.4,14.2,25.1,81.7,27.3,88.8c1.7,4.4,14.8,19.5,20.8,26.3
    C399.1,351.4,404.4,348.4,402.9,344.9 M109.4,343.5c2.1-3.4,51.6-84,68.7-111.6c5.4,17.2,40.5,129.3,41.6,132.9
    C219.8,364.8,138.7,349.2,109.4,343.5z M226.2,357.5l-0.3,0.4c-10.5-33.6-31-99.2-41.5-132.6h156.2L226.2,357.5z"/>
    <path id="seat" fill="#9D9FA2" d="M122.9,159.2c-1.5-1-2.5-1.6-3.6-3c-1.1-1.5-1.6-3.4-1-5.1c1.2-2.9,5-3.4,8.1-3.2c3.7,0.2,7.3,0.8,10.9,1.2
	c12.9,1.5,26,1.7,39,0.5c5.4-0.5,10.8-1.2,16.2-1c4.1,0.1,8.3,0.8,12.2,2.1c1.3,0.4,2.7,0.9,3.7,1.8c1,0.9,1.7,2.4,1.3,3.7
	c-0.7,2.1-3.4,2.7-5.6,2.7c-6.4,0.1-12.8-1-19.2-0.8c-7.5,0.2-14.9,2.2-21.4,5.8c-3.6,2-7,4.4-10.7,6c-5.4,2.3-11.7,2.8-17.3,0.9
	C129.9,169,125.1,164.7,122.9,159.2"/>
  
    <path id="handles" fill="none" stroke="#000" stroke-width="13.5" stroke-linecap="round" d="M352.9,174.7h27.5
	c39,0,39.6,40.7,4.2,40.7 M373.5,232.9c35.4,0,30.3-42.7-8.7-42.7h-27.5 M352,174.7l-16.2,15.5"/>
  </g>
  <g id="chain" stroke="#fff" stroke-width="3">
    <path stroke-dasharray="3 6" d="M105,342 L220,349"/>
    <path stroke-dasharray="3 6" d="M107,352 L217,387"/>
  </g>
  <circle cx="225" cy="368" r="10" fill="#fff" />
  <circle cx="225" cy="368" r="6.5" fill="#9D9FA2" />
  <circle cx="225" cy="368" r="20".........完整代码请登录后点击上方下载按钮下载查看